/* ==========================================================================
   AT Customizer v1.8 — Apple Pattern + Cookie Consent + Legal Footer
   + global main top-alignment (playbook gotcha #3)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TYPOGRAPHY — Inter everywhere, Apple letter-spacing on headings
   -------------------------------------------------------------------------- */

body.at-custom,
body.at-custom p,
body.at-custom li,
body.at-custom .wp-block-post-content {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", sans-serif;
    font-feature-settings: "cv11", "ss01", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    color: #1D1D1F;
}

body.at-custom h1,
body.at-custom h2,
body.at-custom h3,
body.at-custom h4,
body.at-custom .wp-block-heading,
body.at-custom .wp-block-post-title,
body.at-custom .wp-block-query-title {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro", sans-serif;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #1D1D1F;
    line-height: 1.08;
}

body.at-custom h1 { letter-spacing: -0.035em; }

/* --------------------------------------------------------------------------
   2. APPLE PATTERN — Tile system (full-viewport alternating sections)
   -------------------------------------------------------------------------- */

.at-tile,
.at-custom .at-tile {
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12vh 24px;
    text-align: center;
}

.at-tile-light {
    background: #FFFFFF !important;
    color: #1D1D1F !important;
}

.at-tile-light h1,
.at-tile-light h2,
.at-tile-light p {
    color: #1D1D1F !important;
}

.at-tile-dark {
    background: #000000 !important;
    color: #F5F5F7 !important;
}

.at-tile-dark h1,
.at-tile-dark h2,
.at-tile-dark p {
    color: #F5F5F7 !important;
}

/* Headline sizing inside tiles — fluid scale */
.at-tile h1 {
    font-size: clamp(48px, 8vw, 96px);
    margin: 0 0 24px 0;
    max-width: 14ch;
}

.at-tile h2 {
    font-size: clamp(40px, 7vw, 80px);
    margin: 0 0 24px 0;
    max-width: 14ch;
}

.at-tile p {
    font-size: clamp(19px, 2.2vw, 28px);
    line-height: 1.35;
    max-width: 640px;
    margin: 0 auto 32px auto;
    font-weight: 400;
    letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   3. APPLE PATTERN — Text links with chevron (no buttons)
   -------------------------------------------------------------------------- */

.at-link,
.at-custom .at-link {
    color: #0066CC !important;
    text-decoration: none !important;
    font-weight: 400;
    font-size: clamp(17px, 1.6vw, 21px);
    letter-spacing: -0.01em;
    display: inline-block;
    margin: 0 16px;
    transition: opacity 0.2s;
}

.at-link::after {
    content: " \203A";
    display: inline-block;
    margin-left: 3px;
    transition: transform 0.2s;
}

.at-link:hover {
    text-decoration: none !important;
    opacity: 0.75;
}

.at-link:hover::after {
    transform: translateX(3px);
}

.at-tile-dark .at-link {
    color: #2997FF !important;
}

.at-tile p.at-links {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: inherit;
}

/* --------------------------------------------------------------------------
   4. APPLE PATTERN — Navigation (translucent blur, centered)
   -------------------------------------------------------------------------- */

body.at-custom .wp-block-navigation {
    justify-content: center;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.at-custom .wp-block-navigation a {
    color: #1D1D1F;
    opacity: 0.85;
    transition: opacity 0.2s;
}

body.at-custom .wp-block-navigation a:hover {
    opacity: 1;
    text-decoration: none;
}

/* Header template part — sticky with backdrop blur */
body.at-custom .wp-block-template-part[data-type="wp_template_part"]:first-of-type,
body.at-custom header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* --------------------------------------------------------------------------
   5. SINGLE POST — Apple Newsroom style (narrow measure, clean meta row)
   -------------------------------------------------------------------------- */

body.at-custom.single .wp-block-post-content,
body.at-custom.single .entry-content {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    font-size: 19px;
    line-height: 1.65;
    letter-spacing: -0.01em;
}

body.at-custom.single .wp-block-post-title,
body.at-custom.single h1.entry-title {
    max-width: 900px;
    margin: 0 auto 24px auto;
    font-size: clamp(40px, 5.5vw, 64px);
    text-align: center;
    letter-spacing: -0.03em;
}

body.at-custom.single .wp-block-post-content h2,
body.at-custom.single .entry-content h2 {
    font-size: 32px;
    margin-top: 2em;
    margin-bottom: 0.5em;
    letter-spacing: -0.025em;
}

body.at-custom.single .wp-block-post-content h3,
body.at-custom.single .entry-content h3 {
    font-size: 24px;
    margin-top: 1.75em;
    margin-bottom: 0.5em;
    letter-spacing: -0.02em;
}

body.at-custom.single .wp-block-post-content blockquote,
body.at-custom.single .entry-content blockquote {
    border: none;
    padding: 24px 0;
    margin: 32px 0;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-align: center;
    color: #1D1D1F;
}

body.at-custom.single .wp-block-post-content blockquote p::before,
body.at-custom.single .entry-content blockquote p::before {
    content: "\201C";
}

body.at-custom.single .wp-block-post-content blockquote p::after,
body.at-custom.single .entry-content blockquote p::after {
    content: "\201D";
}

body.at-custom.single .wp-block-post-content a,
body.at-custom.single .entry-content a {
    color: #0066CC;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 102, 204, 0.3);
    transition: border-color 0.2s;
}

body.at-custom.single .wp-block-post-content a:hover,
body.at-custom.single .entry-content a:hover {
    border-bottom-color: #0066CC;
}

/* Meta row — small caps, grey */
body.at-custom.single .wp-block-post-date,
body.at-custom.single .wp-block-post-terms,
body.at-custom.single .wp-block-post-author-name {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6E6E73;
}

/* --------------------------------------------------------------------------
   6. LISTING PAGES — show featured images on home/blog/archive/category/tag
   --------------------------------------------------------------------------
   Revised 2026-04-19 (ticket #111): category & sub-category pillar pages
   (/category/explore/, /think/, /lead/, /strategy-decisions/, etc.) need
   featured images to match the homepage's visual rhythm. The archive
   template (post #489) was updated to emit a 16:9 wp:post-featured-image
   block at the top of each card — this CSS sizes it and matches the
   home/blog treatment.
   -------------------------------------------------------------------------- */

body.at-custom.home .wp-block-post-featured-image,
body.at-custom.blog .wp-block-post-featured-image,
body.at-custom.archive .wp-block-post-featured-image,
body.at-custom.category .wp-block-post-featured-image,
body.at-custom.tag .wp-block-post-featured-image {
    display: block !important;
    margin: 0 auto 1.5rem auto !important;
    max-width: 800px;
}
body.at-custom.home .wp-block-post-featured-image img,
body.at-custom.blog .wp-block-post-featured-image img,
body.at-custom.archive .wp-block-post-featured-image img,
body.at-custom.category .wp-block-post-featured-image img,
body.at-custom.tag .wp-block-post-featured-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
/* Stack each post-card cleanly (home/blog use <li>, archive uses constrained card) */
body.at-custom.home .wp-block-post-template > li,
body.at-custom.blog .wp-block-post-template > li {
    margin: 0 auto 8vh auto !important;
    max-width: 800px;
    list-style: none;
    padding: 0;
}

body.at-custom.archive .wp-block-query-title,
body.at-custom.category .wp-block-query-title,
body.at-custom.tag .wp-block-query-title {
    font-size: clamp(48px, 7vw, 72px);
    text-align: center;
    margin: 15vh auto 16px auto;
    letter-spacing: -0.03em;
}

body.at-custom.archive .wp-block-term-description,
body.at-custom.category .wp-block-term-description {
    max-width: 600px;
    margin: 0 auto 10vh auto;
    text-align: center;
    font-size: 22px;
    line-height: 1.35;
    color: #6E6E73;
    letter-spacing: -0.015em;
}

body.at-custom.archive .wp-block-post-title a,
body.at-custom.category .wp-block-post-title a,
body.at-custom.tag .wp-block-post-title a,
body.at-custom.blog .wp-block-post-title a {
    color: #1D1D1F;
    text-decoration: none;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 600;
    letter-spacing: -0.02em;
    border: none;
    transition: color 0.2s;
}

body.at-custom.archive .wp-block-post-title a:hover,
body.at-custom.category .wp-block-post-title a:hover,
body.at-custom.tag .wp-block-post-title a:hover,
body.at-custom.blog .wp-block-post-title a:hover {
    color: #0066CC;
}

body.at-custom.archive .wp-block-post-excerpt,
body.at-custom.category .wp-block-post-excerpt,
body.at-custom.tag .wp-block-post-excerpt,
body.at-custom.blog .wp-block-post-excerpt {
    font-size: 17px;
    line-height: 1.55;
    color: #6E6E73;
    max-width: 560px;
}

/* --------------------------------------------------------------------------
   7. HOMEPAGE (page-id-4069) — strip nested padding chain for full-bleed tiles
   --------------------------------------------------------------------------
   TT25's page template wraps post content in 3+ layers of
   .has-global-padding .is-layout-constrained groups. alignfull only
   un-nests one level, so deeply nested tiles hit the innermost padding
   and leak white on the right edge. Solution: on the homepage only,
   strip padding/max-width from every wrapper and force tiles to 100%
   of the viewport width.
*/

body.at-custom.page-id-4069 {
    overflow-x: hidden;
}

/* Hide the leaking "Home" page title that TT25's page template outputs */
body.at-custom.page-id-4069 .wp-block-post-title {
    display: none !important;
}

/* Strip padding + max-width + margin from every parent wrapper in the chain */
body.at-custom.page-id-4069 main.wp-block-group,
body.at-custom.page-id-4069 main.wp-block-group > .wp-block-group,
body.at-custom.page-id-4069 main .wp-block-post-content,
body.at-custom.page-id-4069 main .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Force tiles to viewport width with internal horizontal padding only */
body.at-custom.page-id-4069 .at-tile,
body.at-custom .wp-block-group.at-tile.alignfull {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   7b. GLOBAL — <main> top-alignment fix (v1.8, see TT25 playbook gotcha #3)
   --------------------------------------------------------------------------
   TT25 ships with margin-top:70px on <main> and padding-top:~114px on the
   inner .wp-block-group.has-global-padding wrapper. That pushes every
   non-homepage heading 130–200px below the sticky header, wasting the
   fold on archive/single/page surfaces. The homepage fix above already
   zeros this on page-id-4069; this section makes the same guarantee
   site-wide, then re-adds a tuned amount of breathing room below the
   sticky header on single-post and archive surfaces (so meta + title
   aren't pressed against the nav).
*/
body.at-custom main > .wp-block-group.has-global-padding,
body.at-custom main > .wp-block-group,
body.at-custom main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.at-custom .wp-block-post-content,
body.at-custom .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Controlled breathing room — only on surfaces where the first block is
   text (meta/title/archive title). Pages with a full-bleed hero image
   (Home, About) intentionally stay flush so the image extends to the
   sticky header. */
body.at-custom.single main,
body.at-custom.archive main,
body.at-custom.category main,
body.at-custom.tag main,
body.at-custom.author main,
body.at-custom.date main,
body.at-custom.search main {
    padding-top: clamp(48px, 8vh, 96px) !important;
}

/* --------------------------------------------------------------------------
   8. FOOTER — Strip TT25's footer clutter, keep only the legal footer
   --------------------------------------------------------------------------
   Historical note: v1.7 used `display:none` on the inner wp-block-group,
   which left "Enjoy Your Day!" text in the DOM (crawlers + screen readers
   saw it). v1.8 removes the content at template-resolution time via
   filters in at-customizer.php, so this CSS is now defensive-only —
   kept for older TT25 revisions that don't go through the filter path.
*/

body.at-custom footer.wp-block-template-part > *:not(.at-legal-footer) {
    display: none;
}

/* --------------------------------------------------------------------------
   9. COOKIE CONSENT BANNER (from v1.0, font updated)
   -------------------------------------------------------------------------- */

.at-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    background: #1D1D1F;
    color: #F5F5F7;
    padding: 16px 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.at-cookie-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.at-cookie-text {
    flex: 1;
    min-width: 240px;
    margin: 0;
    color: #F5F5F7;
}

.at-cookie-text a {
    color: #2997FF;
    text-decoration: none;
}

.at-cookie-text a:hover {
    text-decoration: underline;
}

.at-cookie-actions {
    display: flex;
    gap: 12px;
}

.at-cookie-btn {
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 980px;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s;
    letter-spacing: -0.01em;
}

.at-cookie-reject {
    background: transparent;
    color: #F5F5F7;
    border: 1px solid rgba(255,255,255,0.3);
}

.at-cookie-reject:hover {
    opacity: 0.8;
}

.at-cookie-accept {
    background: #0066CC;
    color: #FFFFFF;
    border: 1px solid #0066CC;
}

.at-cookie-accept:hover {
    opacity: 0.85;
}

@media (max-width: 600px) {
    .at-cookie-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .at-cookie-actions {
        justify-content: flex-end;
    }
}

/* --------------------------------------------------------------------------
   11b. FEATURED IMAGE on single posts — Apple Newsroom full-bleed style
   --------------------------------------------------------------------------
   The featured image renders between the post title and the body content,
   full viewport width, 16:9 aspect ratio, no border, no shadow. Apple
   Newsroom pattern. Hidden on archive pages and the homepage (see
   section 6). Only shows on singular post/page views.
*/

body.at-custom.single .wp-block-post-featured-image,
body.at-custom.single .wp-block-post-featured-image.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.at-custom.single .wp-block-post-featured-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 75vh;
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: cover;
}

/* Hide the block entirely if there's no featured image set */
body.at-custom.single .wp-block-post-featured-image:empty {
    display: none !important;
}

/* --------------------------------------------------------------------------
   11. FILEBIRD GALLERY — hide caption overlays on all posts
   --------------------------------------------------------------------------
   FileBird Pro renders gallery captions as dark gradient overlays on top
   of each image. They look noisy and compete with the actual photography.
   This hides them site-wide on all posts. The alt text is still present
   in the DOM for accessibility and SEO — only the visual overlay is gone.
*/

ul.filebird-block-filebird-gallery li figure figcaption,
ul.wp-block-filebird-block-filebird-gallery li figure figcaption,
.wp-block-filebird-block-filebird-gallery figure figcaption,
.filebird-block-filebird-gallery figure figcaption {
    display: none !important;
}

/* --------------------------------------------------------------------------
   12. LEGAL FOOTER
   -------------------------------------------------------------------------- */

.at-legal-footer {
    padding: 48px 20px 64px;
    text-align: center;
    background: #FFFFFF;
    border-top: 1px solid #D2D2D7;
    font-family: "Inter", -apple-system, sans-serif;
    font-size: 12px;
    letter-spacing: -0.005em;
}

.at-legal-footer nav {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.at-legal-footer a {
    color: #6E6E73;
    text-decoration: none;
    transition: color 0.2s;
}

.at-legal-footer a:hover {
    color: #0066CC;
    text-decoration: none;
}

.at-legal-footer span {
    color: #D2D2D7;
}

.at-legal-copyright {
    margin: 0;
    color: #86868B;
    font-size: 12px;
}