/* ==========================================================================
   POLISH (Kristin's review rules, applied 10/7 with Deann's OK)
   1. No white text on gold: navy on the gold cards and gold hover states
   2. Small gold text is a deeper gold so it reads (big gold headings stay bright)
   3. Stat cards: the whole card is the link, not just "View Case Study"
   4. Process steps link somewhere (process.php adds the links)
   ========================================================================== */

/* 1. Navy text on gold */
#visual-storytelling article[style*="gradient"],
#visual-storytelling article[style*="gradient"] h3,
#visual-storytelling article[style*="gradient"] span {
    color: #02225a !important;
}
#visual-storytelling article[style*="gradient"] p,
#visual-storytelling article[style*="gradient"] div {
    color: rgba(2, 34, 90, 0.85) !important;
}
.comelife-card:hover,
.comelife-card:hover h3,
.comelife-card:hover span,
.comelife-card:hover div,
.comelife-card:hover p,
.comelife-card:hover a,
.grid-block:hover,
.grid-block:hover h3,
.grid-block:hover span,
.grid-block:hover div,
.grid-block:hover p {
    color: #02225a !important;
}
.comelife-card:hover hr {
    border-color: rgba(2, 34, 90, 0.2) !important;
}

/* 2. Deeper gold for small text (5:1 on white) */
.site-projects-grid [class*="text-[#c79d3d]"],
.site-case-study-more [class*="text-[#c79d3d]"],
.site-case-study-videos [class*="text-[#c79d3d]"],
.cs-video-large__location {
    color: #8c6a21 !important;
}
.site-projects-grid a[class*="text-[#d4af37]"]:not(:hover),
.site-case-study-more a[class*="text-[#d4af37]"]:not(:hover),
.comelife-card:not(:hover) a[class*="text-[#be9141]"],
a[class*="text-[#d4af37]"][href*="/case-study/"]:not(:hover) {
    color: #8c6a21;
}

/* 3. Whole stat card clickable (stretched link) */
.comelife-card {
    position: relative;
    cursor: pointer;
}
.comelife-card a[href]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* 4. Process steps: the whole step is the link */
.process-step {
    position: relative;
}
.mx-step-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 12px;
}
.mx-step-link:focus-visible {
    outline: 3px solid #be9141;
    outline-offset: 6px;
}

/* 5. What We Create: gold cards sized to their copy, larger type, faint corner icon (they stretched to the heading's height and looked empty) */
#visual-storytelling article {
    position: relative;
    overflow: hidden;
}
#visual-storytelling .vs-wm {
    position: absolute;
    right: -30px;
    bottom: -44px;
    width: 230px;
    height: 230px;
    opacity: 0.16;
    color: #02225a;
    pointer-events: none;
}
#visual-storytelling .vs-wm svg {
    width: 100%;
    height: 100%;
}
@media (min-width: 1024px) {
    #visual-storytelling .container > div > div:last-child {
        align-self: center;
    }
    #visual-storytelling article {
        min-height: 290px;
        padding: 36px;
    }
    #visual-storytelling article h3 {
        font-size: 29px;
        line-height: 1.2;
        margin-top: 28px;
    }
    #visual-storytelling article [class*="text-white/95"] {
        font-size: 17px;
        max-width: none;
    }
    #visual-storytelling article [class*="text-white/95"] p {
        line-height: 1.6;
    }
}

/* 6. Testimonial company logos (Jeremy 10/13 PDF): a tile beside the name; navy tile for white-lettered logos */
.ss-t-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 64px;
    padding: 8px 12px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(2, 34, 90, 0.1);
}
.ss-t-logo--dark {
    background: #02225a;
}
.ss-t-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
@media (max-width: 480px) {
    .ss-t-credit {
        flex-direction: column;
        text-align: center;
    }
    .ss-t-credit > div {
        align-items: center;
    }
}

/* 7. Inner-hero two-level heading (Jeremy 10/13 PDF, Services hero): the smaller supporting line under the H1 */
.site-inner-hero h1 .ih-sub {
    display: block;
    margin-top: 0.4em;
    font-size: 0.42em;
    font-weight: 500;
    line-height: 1.2;
    color: #02225a;
}

/* 8. Linked record stats (Services marketing results -> case studies) */
.record-stat--link {
    text-decoration: none;
    border-radius: 16px;
    transition: transform 0.3s, background-color 0.3s;
}
.record-stat--link:hover {
    background-color: rgba(212, 175, 55, 0.08);
    transform: translateY(-2px);
}
.record-stat__more {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #8c6a21;
}

/* Plain pages (Privacy Policy, Terms & Conditions): clear the fixed header, readable column */
body.page-template-default #main {
    max-width: 820px;
    margin: 0 auto;
    padding: 150px 24px 90px;
    color: #1f2937;
    line-height: 1.7;
}
body.page-template-default .entry-title {
    color: #02225a;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    margin: 0 0 20px;
}
body.page-template-default .entry-content h2 {
    color: #02225a;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 2rem 0 .6rem;
}
body.page-template-default .entry-content p { margin: 0 0 1rem; }
body.page-template-default .entry-content ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1rem; }
body.page-template-default .entry-content li { margin-bottom: .4rem; }
body.page-template-default .entry-content a { color: #02225a; text-decoration: underline; }

/* Readable gold on light backgrounds (Jeremy 10/21 pre-launch check). Gold text on white measured
   2.1:1 (#d4af37) and 2.9:1 (#be9141). Small text gets the deep gold already used for links here
   (#8c6a21, about 4.8:1); big heading accents get a slightly deeper gold that clears 3:1 (#b3873a).
   Dark sections keep the bright gold, which already reads well there. */
#about-team h3 {
    color: #8c6a21;
}
:is(#customize-your-tour, #customize-your-tour-2, #customize-your-tour-3, #our-process, #our-story, #about-studio-model) :is(span[class*="text-[#d4af37]"], span[class*="text-[#be9141]"]),
#record-results h2[class*="text-[#d4af37]"],
#record-results h2 span[class*="text-[#d4af37]"],
#after-submit span.font-serif {
    color: #b3873a;
}

/* Footer quote form follows the (now full-length) FAQ list on desktop instead of leaving an empty card */
@media (min-width: 1024px) {
    #contact .grid > .rounded-3xl[class*="max-w-[592px]"] {
        position: sticky;
        top: 110px;
        align-self: start;
    }
}

/* QA 10/22: Services/Contact "Our process" cards are a fixed 230px each, so at
   1024-1279 the row ran ~230px past the screen and the last card was cut off.
   Let the cards share the row (still capped at 230px) and the dashes shrink. */
@media (min-width: 1024px) {
    #our-process .process-steps .process-step {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        max-width: 230px;
    }
    #our-process .process-steps > span[aria-hidden="true"] {
        flex: 0 1 28px;
        min-width: 8px;
        margin-inline: 6px;
    }
    /* Contact "What happens after you submit" has the same fixed-width row (297px). */
    #after-submit .lg\:flex-row > div[class*="rounded-[20px]"] {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        max-width: 297px;
    }
    #after-submit .lg\:flex-row > span[aria-hidden="true"] {
        flex: 0 1 40px;
        min-width: 8px;
        margin-inline: 6px;
    }
    #our-process .process-steps .process-step > div {
        max-width: none;
    }
}

/* QA 10/22: at 320-359px the logo + Menu pill were wider than the screen. */
@media (max-width: 359px) {
    .site-header img,
    .site-header.mx-stuck img { max-width: 128px; }
    .site-header .menu-toggle { gap: 8px; padding-left: 14px; }
    .site-header .menu-toggle > span:first-child { font-size: 16px; }
}

/* QA 10/22: Contact form column could not shrink below the HubSpot frame on
   small phones (page scrolled sideways at 320px). */
#get-in-touch .grid > * { min-width: 0; }
#get-in-touch .hs-form-frame,
#get-in-touch .hs-form-frame iframe { max-width: 100%; }

/* QA 10/22: case study result numbers ("302,000+") were wider than the
   half-width cards on phones. Stack the cards one per row below sm. */
@media (max-width: 639px) {
    [class*="w-[calc(50%-0.75rem)]"][class*="rounded-[20px]"] { width: 100%; }
}

/* QA 10/22: footer wordmark image is 1439px wide; past that it was upscaled
   and soft. Keep it at its real size, centred. */
footer img[src*="footer-wordmark"] {
    max-width: min(100%, 1439px);
    margin-inline: auto;
}