/**
* Base HTML Element Styling & Accessibility Foundation
*
* Maps semantic design tokens to base HTML elements without imposing
* heavy specificity on Elementor widgets.
*
* @package ATheme\Theme
* @since 1.0.0
*/
/* 1. Body & Root Text */
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-family-body);
font-size: var(--font-size-base);
font-weight: var(--font-weight-regular);
}
/* 2. Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-text-heading);
font-family: var(--font-family-heading);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin-block-end: var(--space-4);
}
h1 {
font-size: var(--font-size-3xl);
}
h2 {
font-size: var(--font-size-2xl);
}
h3 {
font-size: var(--font-size-xl);
}
h4 {
font-size: var(--font-size-lg);
}
h5 {
font-size: var(--font-size-md);
}
h6 {
font-size: var(--font-size-base);
}
/* 3. Paragraphs & Text Content */
p {
margin-block-end: var(--space-4);
}
p:last-child {
margin-block-end: 0;
}
small {
font-size: var(--font-size-sm);
}
strong,
b {
font-weight: var(--font-weight-bold);
}
em,
i {
font-style: italic;
}
/* 4. Links */
a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
a:hover {
color: var(--color-primary-hover);
}
/* 5. Accessible Focus Visible State */
:focus-visible {
outline: var(--focus-ring-width) solid var(--color-focus-ring);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-sm);
}
main:focus:not(:focus-visible) {
outline: none;
}
/* 6. Blockquotes */
blockquote {
margin-block: var(--space-6);
padding-inline-start: var(--space-5);
border-inline-start: 4px solid var(--color-primary);
font-style: italic;
color: var(--color-text-muted);
}
/* 7. Code & Preformatted Text */
code,
kbd,
samp {
font-family: var(--font-family-mono);
font-size: 0.875em;
padding: 0.15em 0.35em;
border-radius: var(--radius-sm);
background-color: var(--color-surface-subtle);
color: var(--color-text-heading);
}
pre {
font-family: var(--font-family-mono);
font-size: var(--font-size-sm);
padding: var(--space-4);
border-radius: var(--radius-md);
background-color: var(--color-surface-subtle);
overflow-x: auto;
margin-block: var(--space-4);
}
pre code {
background: transparent;
padding: 0;
font-size: inherit;
}
/* 8. Horizontal Rules */
hr {
border: 0;
height: 1px;
background-color: var(--color-border);
margin-block: var(--space-8);
}
/* 9. Form Inputs (Fallback) */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
display: block;
width: 100%;
min-height: var(--input-height);
padding-inline: var(--input-padding-inline);
padding-block: var(--space-2);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
color: var(--color-text);
background-color: var(--input-bg);
border: 1px solid var(--input-border-color);
border-radius: var(--input-radius);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
border-color: var(--color-primary);
outline: 2px solid transparent;
outline-offset: 1px;
box-shadow: 0 0 0 1px var(--color-primary);
}
/* Placeholder text is visible text and needs 4.5:1 like any other. The theme
declares it rather than leaving it to the user agent, whose defaults differ
between browsers and are not guaranteed to reach the threshold. `opacity: 1`
is required because some browsers dim the placeholder by default, which would
lower the ratio below the declared colour's own value. */
input::placeholder,
textarea::placeholder {
color: var(--color-neutral-600);
opacity: 1;
}
textarea {
min-height: 7.5rem;
resize: vertical;
}
label {
display: inline-block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-heading);
margin-block-end: var(--space-1);
}
/* 10. Tables */
table {
margin-block: var(--space-6);
}
th,
td {
padding-inline: var(--space-4);
padding-block: var(--space-3);
text-align: start;
border-block-end: 1px solid var(--color-border);
}
th {
font-weight: var(--font-weight-semibold);
color: var(--color-text-heading);
background-color: var(--color-surface-elevated);
}
/* 11. Accessibility Helper Classes (WordPress Standards) */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: var(--color-surface);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
clip: auto !important;
clip-path: none;
color: var(--color-primary);
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
height: auto;
inset-inline-start: var(--space-4);
inset-block-start: var(--space-4);
line-height: normal;
padding: var(--space-3) var(--space-5);
text-decoration: none;
width: auto;
z-index: var(--z-toast);
}
.alignleft {
float: left;
margin-inline-end: var(--space-5);
margin-block-end: var(--space-4);
}
.alignright {
float: right;
margin-inline-start: var(--space-5);
margin-block-end: var(--space-4);
}
/* RTL overrides for WordPress core alignment classes */
body.rtl .alignleft,
[dir="rtl"] .alignleft {
float: right;
margin-inline-end: 0;
margin-inline-start: var(--space-5);
}
body.rtl .alignright,
[dir="rtl"] .alignright {
float: left;
margin-inline-start: 0;
margin-inline-end: var(--space-5);
}
.aligncenter {
clear: both;
display: block;
margin-inline: auto;
margin-block-end: var(--space-4);
}
/* 12. Windows High Contrast / Forced Colors Mode */
@media (forced-colors: active) {
:focus-visible,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
outline: 2px solid Highlight !important;
outline-offset: 2px !important;
}
}