/* Section font-size: optional components.json "font-size" (xs|sm|lg|xl) → data-font-size + theme :root. Omit = global base. */

[data-font-size="xs"] {
    --section-font-root: var(--font-size-xs);
    font-size: var(--section-font-root);
}

[data-font-size="sm"] {
    --section-font-root: var(--font-size-sm);
    font-size: var(--section-font-root);
}

[data-font-size="lg"] {
    --section-font-root: var(--font-size-lg);
    font-size: var(--section-font-root);
}

[data-font-size="xl"] {
    --section-font-root: var(--font-size-xl);
    font-size: var(--section-font-root);
}

/* Font Awesome <i>: primary unless a closer rule sets color (e.g. contact links use inherit for hover) */
i.fa-solid,
i.fa-brands,
i.fa-regular {
    color: var(--color-primary);
}

/* Header / Hero — maps to sections[].id "header", component Hero */

.hero {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

.hero__inner {
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding: clamp(1.5em, 4vw, 3em) clamp(1em, 4vw, 2.5em);
    display: grid;
    gap: clamp(1.5em, 4vw, 3em);
    align-items: center;
}

@media (min-width: 48em) {
    /* col-left / col-right widths from components.json (66% / 34%) — fr keeps ratio after gap */
    .hero__inner {
        grid-template-columns: minmax(0, 66fr) minmax(0, 34fr);
        gap: clamp(2em, 5vw, 4em);
    }
}

.hero__content {
    /* col-left.text-align in components.json */
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

/* Heading scale vs --section-font-root (from data-font-size / theme.font-size in components.json) */
.hero[data-font-size] h1,
.about-me[data-font-size] h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: calc(var(--section-font-root) * 3);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

@media (max-width: 47.9375em) {
    .hero[data-font-size] h1 {
        font-size: calc(var(--section-font-root) * 2);
    }

    .hero[data-font-size] h2 {
        font-size: calc(var(--section-font-root) * 1.5);
    }
}

.hero[data-font-size] h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: calc(var(--section-font-root) * 1.5);
    line-height: 1.3;
    color: var(--color-primary);
}

.about-me[data-font-size] h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: calc(var(--section-font-root) * 1.5);
    line-height: 1.3;
    color: var(--color-primary);
}

.why-me[data-font-size] h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: calc(var(--section-font-root) * 1.5);
    line-height: 1.3;
    color: var(--color-primary);
}

.why-me:not([data-font-size]) h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: calc(var(--font-size-base) * 1.5);
    line-height: 1.3;
    color: var(--color-primary);
}

.hero[data-font-size] .hero__tagline {
    font-size: 1em;
    line-height: var(--line-height-base);
    max-width: 36em;
}

.hero__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    margin-top: 0.25em;
}

.hero__contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75em;
    height: 2.75em;
    border-radius: 50%;
    color: var(--color-primary);
    background-color: var(--color-secondary-light);
    border: var(--divider-border-width) var(--divider-border-style)
        var(--divider-border-color);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.hero__contact a:hover {
    background-color: var(--color-tertiary);
    color: var(--color-quaternary);
    text-decoration: none;
}

.hero__contact a:focus-visible {
    outline: 2px solid var(--color-quinary);
    outline-offset: 2px;
}

.hero__contact a i {
    color: inherit;
    font-size: 1.125em;
    font-style: normal;
    line-height: 1;
}

.hero__figure {
    margin: 0;
    border-radius: 0.5em;
    overflow: hidden;
    box-shadow: 0 0.25em 1.5em hsla(201.1, 52.9%, 20%, 0.12);
}

.hero__figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* About me — sections[].id "about-me", component AboutMe */

.about-me {
    background-color: var(--color-tertiary);
    color: var(--color-primary);
}

.about-me__inner {
    /* props.text-align in components.json */
    text-align: center;
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding: clamp(1.5em, 4vw, 2.75em) clamp(1em, 4vw, 2.5em);
    /* props.divider: show + position bottom — inside max-width like the rest of the component */
    border-bottom: var(--divider-border-width) var(--divider-border-style)
        var(--divider-border-color);
}

.about-me h2 {
    margin-bottom: 0.75em;
}

.about-me__body {
    display: flex;
    flex-direction: column;
    gap: 1em;
    max-width: 50em;
    margin-inline: auto;
}

.about-me[data-font-size] p {
    font-size: 1em;
    line-height: var(--line-height-base);
}

/* Why me — sections[].id "why-me", component WhyMe */

.why-me {
    background-color: var(--color-tertiary);
    color: var(--color-primary);
}

.why-me__inner {
    /* props.text-align; props.columns 3 from 48em */
    text-align: center;
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding: clamp(1.5em, 4vw, 2.75em) clamp(1em, 4vw, 2.5em);
}

.why-me h2 {
    margin-bottom: 1em;
}

.why-me__cards {
    display: grid;
    gap: 1.25em;
    grid-template-columns: 1fr;
}

/* props.columns: 3 — must follow base .why-me__cards or 1fr overrides this */
@media (min-width: 48em) {
    .why-me__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* cards.background-color in components.json */
.why-me__card {
    background-color: var(--color-secondary);
    border-radius: 0.5em;
    border: var(--divider-border-width) var(--divider-border-style)
        var(--divider-border-color);
    padding: clamp(1.25em, 3vw, 1.75em);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
    text-align: center;
}

.why-me__icon {
    display: flex;
}

.why-me__icon i {
    font-size: 2em;
    line-height: 1;
}

.why-me .why-me__card p {
    /* 1em: section root when data-font-size set; otherwise inherits global base */
    font-size: 1em;
    line-height: var(--line-height-base);
    max-width: 28em;
    margin-inline: auto;
}

/* Footer — sections[].id "footer", component Footer (contentRef footer, tagline; ContactInfo + Tagline) */

.site-footer {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}

.site-footer__inner {
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding: clamp(1.75em, 4vw, 2.75em) clamp(1em, 4vw, 2.5em);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5em, 4vw, 2.25em);
}

.site-footer__intro {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.site-footer__intro p {
    font-size: 1em;
    line-height: var(--line-height-base);
    max-width: 40em;
    margin-inline: auto;
    color: var(--color-secondary);
}

.site-footer__contact-list {
    display: grid;
    gap: 1.25em;
    grid-template-columns: 1fr;
    justify-items: stretch;
}

@media (min-width: 48em) {
    .site-footer__contact-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.site-footer__contact-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 1em 1.25em;
    border-radius: 0.5em;
    text-decoration: none;
    color: var(--color-secondary);
    background-color: hsla(60, 44.2%, 91.6%, 0.12);
    border: var(--divider-border-width) var(--divider-border-style)
        hsla(60, 44.2%, 91.6%, 0.25);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.site-footer__contact-link:hover {
    background-color: hsla(60, 44.2%, 91.6%, 0.2);
    color: var(--color-tertiary);
    border-color: hsla(60, 44.2%, 91.6%, 0.4);
}

.site-footer__contact-link:focus-visible {
    outline: 2px solid var(--color-quinary);
    outline-offset: 2px;
}

.site-footer__contact-icon {
    display: flex;
}

.site-footer__contact-icon i {
    font-size: 1.75em;
    line-height: 1;
    font-style: normal;
    color: var(--color-secondary);
}

.site-footer__contact-link:hover .site-footer__contact-icon i {
    color: inherit;
}

.site-footer__contact-label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1em;
}

/* Tagline sub-section: divider top from components.json */
.site-footer__tagline {
    border-top: var(--divider-border-width) var(--divider-border-style)
        hsla(60, 44.2%, 91.6%, 0.35);
    padding-top: clamp(1.25em, 3vw, 1.75em);
}

.site-footer__tagline p {
    font-size: 0.85em;
    line-height: var(--line-height-base);
    color: hsla(60, 44.2%, 91.6%, 0.85);
}