/* =============================================================================
   Frankfurt Theme — Global Stylesheet
   Loaded on the frontend AND injected into the block editor.
   theme.json handles typography and colour tokens; this file handles layout
   scaffolding, component helpers, and anything theme.json cannot express.
   ============================================================================= */

/* ─── Box Model Reset ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ─── Root / Document ─────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
}

/* ─── Focus Styles (accessible, brand-consistent) ────────────────────────── */
:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ─── Skip Link ───────────────────────────────────────────────────────────── */
.skip-link.screen-reader-text:focus {
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--white);
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0 0 0.375rem 0.375rem;
    text-decoration: none;
    display: inline-block;
}

/* ─── Images & Media ──────────────────────────────────────────────────────── */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

/* ─── Typography Helpers ──────────────────────────────────────────────────── */
p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* ─── Site Header ─────────────────────────────────────────────────────────── */
.site-header {
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.site-header__inner {
    width: 100%;
}

.site-header__brand a {
    text-decoration: none !important;
}

/* Navigation hover/active states */
.site-header__nav .wp-block-navigation-item__content {
    position: relative;
    padding-bottom: 2px;
    text-decoration: none;
}

.site-header__nav .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--wp--preset--color--accent);
    transition: width 0.25s ease;
}

.site-header__nav .wp-block-navigation-item__content:hover::after,
.site-header__nav .current-menu-item .wp-block-navigation-item__content::after {
    width: 100%;
}

/* ─── Header Variant: With CTA ───────────────────────────────────────────── */
.site-header--with-cta {
    border-top: 3px solid var(--wp--preset--color--accent);
}

.site-header--with-cta .site-header__actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--wp--preset--spacing--6);
}

@media (max-width: 768px) {
    .site-header--with-cta .site-header__cta-btn {
        display: none;
    }
}

/* ─── Site Footer ─────────────────────────────────────────────────────────── */
.site-footer a {
    color: var(--wp--preset--color--off-white);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--wp--preset--color--accent);
}

.site-footer__nav .wp-block-navigation__container {
    flex-direction: column;
    gap: 0.5rem;
}

/* ─── Post Cards ──────────────────────────────────────────────────────────── */
.post-card {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
    height: 100%;
}

.post-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.post-card .wp-block-post-featured-image img {
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.post-card:hover .wp-block-post-featured-image img {
    transform: scale(1.04);
}

/* ─── Search Result ───────────────────────────────────────────────────────── */
.search-result:last-child {
    border-bottom: none !important;
}

/* ─── Article / Single Post ───────────────────────────────────────────────── */
.site-main--single .wp-block-post-content > * {
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
}

.site-main--single .wp-block-post-content > .alignwide,
.site-main--single .wp-block-post-content > .alignfull {
    max-width: none;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.wp-element-button,
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none !important;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
    box-shadow: 0 4px 12px rgba(122, 78, 101, 0.35);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    color: var(--wp--preset--color--accent) !important;
    border: 2px solid currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--white) !important;
    box-shadow: none;
}

/* ─── Pagination ──────────────────────────────────────────────────────────── */
.wp-block-query-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wp-block-query-pagination-numbers {
    display: flex;
    gap: 0.25rem;
}

.wp-block-query-pagination-numbers .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--wp--preset--color--dark);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-numbers .page-numbers.current {
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--white);
}

/* ─── Comment Form ────────────────────────────────────────────────────────── */
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--wp--preset--color--light-gray);
    border-radius: 0.375rem;
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--base);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--wp--preset--color--white);
}

.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 1px;
    border-color: var(--wp--preset--color--accent);
    box-shadow: 0 0 0 3px rgba(122, 78, 101, 0.15);
}

/* ─── Utilities ───────────────────────────────────────────────────────────── */
.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;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    left: 6px;
    top: 7px;
    width: auto;
    z-index: 9999;
}

/* ─── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ─── Print Styles ────────────────────────────────────────────────────────── */
@media print {
    .site-header,
    .site-footer,
    .wp-block-navigation,
    .wp-block-post-comments-form {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a {
        text-decoration: underline;
        color: #000;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }
}