/*
Theme Name:   Art of the Kevin | TT5
Theme URI:    https://artofthekevin.com
Description:  Custom Twenty Twenty-Five child theme for artofthekevin.com — digital illustration and painting portfolio
Author:       Kevin W. Herron
Author URI:   https://kevinwherron.com
Template:     twentytwentyfive
Version:      1.5.7
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  aotk-tt5-child
Tags:         full-site-editing, block-theme
*/

/*
 * Art of the Kevin | TT5 — style.css
 *
 * Section index:
 *  1. Custom Properties
 *  2. Global / Reset
 *  3. Typography
 *  4. Layout
 *  5. Header
 *  6. Navigation
 *  7. Content
 *  8. Footer
 *  9. Utilities
 * 10. Dark Mode
 * 11. Responsive — Tablet  (min-width: 768px)
 * 12. Responsive — Desktop (min-width: 1024px)
 *
 * Palette:
 *   accent      #586994  (blue-slate)
 *   accent-muted #7D869C
 *   muted       #A2ABAB
 *   sage        #B4C4AE
 *   warm        #E5E8B6  (butter)
 */


/* ── 1. CUSTOM PROPERTIES ──────────────────────────────────────────────── */

:root {

    /* Colors — palette */
    --aotk-color-accent:        #586994;
    --aotk-color-accent-muted:  #7D869C;
    --aotk-color-muted:         #A2ABAB;
    --aotk-color-sage:          #B4C4AE;
    --aotk-color-warm:          #E5E8B6;

    /* Colors — semantic (light mode defaults) */
    --aotk-color-surface:       #ffffff;
    --aotk-color-surface-alt:   #f4f6f8;
    --aotk-color-ink:           #1b1f24;
    --aotk-color-ink-muted:     #3a3f47;

    /* Colors — interactive */
    --aotk-color-link:          var(--aotk-color-accent);
    --aotk-color-link-hover:    #5a6b8f; /* darker shade, passes WCAG AA on white */

    /* Colors — buttons */
    --aotk-color-btn-bg:        var(--aotk-color-accent);
    --aotk-color-btn-text:      #ffffff;
    --aotk-color-btn-border:    var(--aotk-color-accent);
    --aotk-color-btn-hover-bg:  var(--aotk-color-warm);
    --aotk-color-btn-hover-text: var(--aotk-color-surface);

    /* Colors — nav pills */
    --aotk-color-nav-bg:        var(--aotk-color-surface);
    --aotk-color-nav-text:      var(--aotk-color-ink);
    --aotk-color-nav-border:    var(--aotk-color-accent);
    --aotk-color-nav-hover-bg:  var(--aotk-color-warm);
    --aotk-color-nav-hover-text: var(--aotk-color-surface);

    /* Typography
     * Font family is registered in theme.json settings.typography.fontFamilies
     * and applied globally via styles.typography.fontFamily — not a CSS token.
     * Do not duplicate it here; two sources of truth cause editor/front-end drift. */
    --aotk-type-lh-body:        1.55;
    --aotk-type-lh-heading-lg:  1.2;
    --aotk-type-lh-heading-sm:  1.3;
    --aotk-type-size-body:      1.15rem;

    /* Spacing */
    --aotk-space-xs:  0.25rem;
    --aotk-space-sm:  0.5rem;
    --aotk-space-md:  1rem;
    --aotk-space-lg:  1.5rem;
    --aotk-space-xl:  2rem;

    /* Radii */
    --aotk-radius-pill: 9999px;
    --aotk-radius-card: 0.5rem;
    --aotk-radius-sm:   0.375rem;
    --aotk-radius-md:   0.6rem;
    --aotk-radius-lg:   0.75rem;

    color-scheme: light;
}


/* ── 2. GLOBAL / RESET ─────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--aotk-color-surface);
    color: var(--aotk-color-ink);
    /* font-family and line-height set via theme.json styles.typography */
}


/* ── 3. TYPOGRAPHY ─────────────────────────────────────────────────────── */

p, li { font-size: var(--aotk-type-size-body); }

/* Headings — color only; size and weight inherit from TT5 */
h1, h2, h3, h4, h5, h6,
.wp-block-heading { color: var(--aotk-color-accent); }

h1, h2 { line-height: var(--aotk-type-lh-heading-lg); }
h3, h4, h5, h6 { line-height: var(--aotk-type-lh-heading-sm); }

/* Links */
a       { color: var(--aotk-color-link); }
a:hover { color: var(--aotk-color-link-hover); }
/* focus-visible: see §9 Utilities — single canonical rule */

/* Post title links — suppress TT5's default content-link underline */
.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover,
.wp-block-post-title a:focus  { text-decoration: underline; }

/* Links inside light-background sections */
:where(.has-background:not([class*="has-background-color"]), .has-white-background-color) a {
    color: var(--aotk-color-accent);
}
:where(.has-background:not([class*="has-background-color"]), .has-white-background-color) a:hover {
    color: var(--aotk-color-link-hover);
}

/* Blockquotes */
blockquote,
.wp-block-quote {
    margin: 1.25em 0;
    padding-left: var(--aotk-space-md);
    border-left: 4px solid var(--aotk-color-accent);
    color: var(--aotk-color-ink);
    font-style: italic;
}

/* Pullquotes */
.wp-block-pullquote {
    margin: var(--aotk-space-lg) 0;
    padding: var(--aotk-space-lg);
    border-radius: var(--aotk-radius-card);
    background-color: var(--aotk-color-surface-alt);
    color: var(--aotk-color-warm);
    font-style: italic;
    text-align: center;
}

/* Citation */
blockquote cite,
.wp-block-quote cite,
.wp-block-pullquote cite {
    display: block;
    margin-top: 0.75rem;
    font-style: normal;
    color: var(--aotk-color-muted);
    text-align: right;
}
:where(.has-background:not([class*="has-background-color"]), .has-white-background-color) :is(blockquote cite, .wp-block-quote cite, .wp-block-pullquote cite) {
    color: var(--aotk-color-accent-muted);
}
/* Em-dash before cite */
.entry-content blockquote cite::before { content: "\2014\2009"; }

/* Body text on explicit light sections */
:where(.has-background:not([class*="has-background-color"]), .has-white-background-color) :is(p, li) {
    color: var(--aotk-color-accent-muted);
}

/* Tables */
.wp-block-table td,
.wp-block-table th {
    border-color: color-mix(in oklab, var(--aotk-color-ink-muted) 30%, transparent);
}

/* Code */
.wp-block-code, pre, code, kbd, samp {
    background: color-mix(in oklab, var(--aotk-color-surface-alt) 70%, transparent);
    color: var(--aotk-color-ink);
}


/* ── 4. LAYOUT ─────────────────────────────────────────────────────────── */

/* Guard against rare header top border injected by TT5 */
.wp-site-header .wp-block-group.alignfull {
    border-top: none !important;
    box-shadow: none !important;
    background-image: none !important;
}


/* ── 5. HEADER ─────────────────────────────────────────────────────────── */

/*
 * Header is locked dark — same surface as the footer so both ends of every
 * page share a consistent dark frame regardless of OS colour-scheme.
 * Hardcoded values match the locked footer: #0c0f13 bg, #E5E8B6 title.
 */
.wp-block-template-part[data-slug="header"] {
    background-color: #0c0f13;
}

/* Site title in header */
.wp-block-template-part[data-slug="header"] .wp-block-site-title a,
.wp-block-template-part[data-slug="header"] .wp-block-site-title {
    color: var(--aotk-color-warm);
    text-decoration: none;
    font-weight: 500;
}
.wp-block-template-part[data-slug="header"] .wp-block-site-title a:hover {
    color: var(--aotk-color-sage);
}


/* ── 6. NAVIGATION ─────────────────────────────────────────────────────── */

/* Nav pill style — replaces TT5's default link-style navigation */
.wp-block-navigation,
.wp-block-navigation__container { border: 0; }

.wp-block-navigation .wp-block-navigation__container { gap: var(--aotk-space-sm); }

.wp-block-navigation .wp-block-navigation-item { margin-right: 0; }

.wp-block-navigation :is(a.wp-block-navigation-item__content, button.wp-block-navigation-item__content) {
    display: inline-block;
    padding: .55rem .9rem;
    border-radius: var(--aotk-radius-pill);
    background-color: var(--aotk-color-nav-bg);
    border: 1px solid var(--aotk-color-nav-border);
    color: var(--aotk-color-nav-text);
    line-height: 1.2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .05s ease;
}

.wp-block-navigation :is(a.wp-block-navigation-item__content, button.wp-block-navigation-item__content):hover,
.wp-block-navigation :is(a.wp-block-navigation-item__content, button.wp-block-navigation-item__content):focus {
    background-color: var(--aotk-color-nav-hover-bg);
    color: var(--aotk-color-nav-hover-text);
    border-color: var(--aotk-color-nav-hover-bg);
}

/* Active / current page pill */
.wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > a.wp-block-navigation-item__content,
.wp-block-navigation a.wp-block-navigation-item__content[aria-current="page"] {
    background-color: var(--aotk-color-accent);
    border-color: var(--aotk-color-accent);
    color: var(--aotk-color-btn-text);
}

/* Submenu panel */
.wp-block-navigation .wp-block-navigation__submenu-container {
    background-color: var(--aotk-color-surface);
    border: 1px solid var(--aotk-color-nav-border);
    padding: var(--aotk-space-sm);
    border-radius: var(--aotk-radius-lg);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .35);
}

.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
    display: block;
    margin: var(--aotk-space-xs) 0;
    padding: var(--aotk-space-sm) .75rem;
    border-radius: var(--aotk-radius-md);
    background-color: transparent;
    border: 1px solid transparent;
}

.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:focus {
    background-color: var(--aotk-color-nav-hover-bg);
    color: var(--aotk-color-nav-hover-text);
    border-color: var(--aotk-color-nav-hover-bg);
}

/* Mobile / overlay menu pills */
.wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open button.wp-block-navigation-item__content {
    display: block;
    width: 100%;
    margin: var(--aotk-space-xs) 0;
}


/* ── 7. CONTENT ────────────────────────────────────────────────────────── */

/* Content — Buttons */
.wp-block-button__link,
.wp-element-button {
    background-color: var(--aotk-color-btn-bg);
    color: var(--aotk-color-btn-text);
    border: 2px solid var(--aotk-color-btn-border);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .05s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.wp-block-button__link:focus,
.wp-element-button:focus {
    background-color: var(--aotk-color-btn-hover-bg);
    color: var(--aotk-color-btn-hover-text);
    border-color: var(--aotk-color-btn-hover-bg);
}

.wp-block-button__link:active,
.wp-element-button:active { transform: translateY(1px); }


/* ── 8. FOOTER ─────────────────────────────────────────────────────────── */

/*
 * Footer is intentionally locked dark regardless of OS color-scheme.
 * Hardcoded values are correct by design — do not replace with tokens.
 * #0c0f13 = dark surface value; #d0d3d6 = dark ink-muted value.
 *
 * Layout: mobile-first — stacked single column on small screens,
 * restored to three-column row at tablet (§11, min-width: 768px).
 */
footer,
.wp-block-site-footer {
    background-color: #0c0f13;
    color: #d0d3d6;
}

footer a       { color: var(--aotk-color-warm); }
footer a:hover { color: var(--aotk-color-accent-muted); }

/* Mobile: stack footer columns, centre content */
footer .wp-block-group.alignfull,
.wp-block-site-footer .wp-block-group.alignfull {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--aotk-space-md);
}

footer .wp-block-site-title,
footer .wp-block-site-title a {
    text-align: center;
}


/* ── 9. UTILITIES ──────────────────────────────────────────────────────── */

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: fixed;
    left: var(--aotk-space-md);
    top: var(--aotk-space-md);
    width: auto;
    height: auto;
    padding: var(--aotk-space-sm) .75rem;
    background: var(--aotk-color-surface-alt);
    border: 2px solid var(--aotk-color-warm);
    border-radius: var(--aotk-radius-sm);
    z-index: 10000;
}

/* Single canonical focus-visible rule — covers all interactive elements.
   Do not add per-element focus-visible rules; they will conflict with this. */
:where(a, button, [role="button"], input, select, textarea):focus-visible {
    outline: 3px solid var(--aotk-color-warm);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ── 10. DARK MODE ─────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {

    :root {
        --aotk-color-surface:       #0c0f13;
        --aotk-color-surface-alt:   #161b22;
        --aotk-color-ink:           #f5f6f7;
        --aotk-color-ink-muted:     #d0d3d6;

        --aotk-color-link:          var(--aotk-color-warm);
        --aotk-color-link-hover:    var(--aotk-color-accent-muted);

        --aotk-color-btn-hover-text: var(--aotk-color-surface);
        --aotk-color-nav-hover-text: var(--aotk-color-surface);

        color-scheme: dark;
    }

    /* Headings flip to warm in dark mode */
    h1, h2, h3, h4, h5, h6,
    .wp-block-heading { color: var(--aotk-color-warm); }

    /* Pullquote light-mode override — restore dark values */
    .wp-block-pullquote {
        background-color: var(--aotk-color-surface-alt);
        color: var(--aotk-color-warm);
    }

}

/* Manual dark toggle (for future theme-toggle.js support) */
[data-theme="dark"] {

    :root {
        --aotk-color-surface:       #0c0f13;
        --aotk-color-surface-alt:   #161b22;
        --aotk-color-ink:           #f5f6f7;
        --aotk-color-ink-muted:     #d0d3d6;

        --aotk-color-link:          var(--aotk-color-warm);
        --aotk-color-link-hover:    var(--aotk-color-accent-muted);

        --aotk-color-btn-hover-text: var(--aotk-color-surface);
        --aotk-color-nav-hover-text: var(--aotk-color-surface);

        color-scheme: dark;
    }

    h1, h2, h3, h4, h5, h6,
    .wp-block-heading { color: var(--aotk-color-warm); }

}

/* Pullquote light-mode explicit override (base is dark-first for this element) */
@media (prefers-color-scheme: light) {
    .wp-block-pullquote {
        background-color: var(--aotk-color-warm);
        color: var(--aotk-color-ink);
    }
}


/* ── 11. RESPONSIVE — TABLET (min-width: 768px) ────────────────────────── */

@media (min-width: 768px) {

    /* Footer: restore three-column row layout */
    footer .wp-block-group.alignfull,
    .wp-block-site-footer .wp-block-group.alignfull {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0;
    }

    footer .wp-block-site-title,
    footer .wp-block-site-title a {
        text-align: left;
    }

}


/* ── 12. RESPONSIVE — DESKTOP (min-width: 1024px) ──────────────────────── */

@media (min-width: 1024px) {

    /* No overrides needed at this breakpoint.
     * TT5's fluid spacing tokens and the block system's constrained layout
     * handle desktop sizing. Add rules here only when a specific desktop
     * override is required that can't be expressed in the base styles. */

}