/*
 Theme Name:   Robert Mohan Design Theme
 Theme URI:    https://robertmohandesign.com
 Description:  Child theme for the Go theme
 Author:       Rob Mohan
 Author URI:   https://robertmohandesign.com
 Template:     go
 Version:      1.0.0
 Text Domain:  go-child
*/


/* Nav links — match primary color on desktop */
@media only screen and (min-width: 960px) {
    .header__navigation a {
        color: var(--go--color--primary);
    }
}

/* ── Hamburger icon: replace dots SVG with three CSS lines, animate to X ── */

/* Hide the Go theme's close SVG and the dots SVG — we draw everything ourselves */
.nav-toggle-icon--close { display: none; }
.nav-toggle-icon:not(.nav-toggle-icon--close) svg { display: none; }

/* Keep the icon div visible when open (Go theme hides it) */
body.menu-is-open .nav-toggle-icon:not(.nav-toggle-icon--close) {
    display: block;
}

/* Middle bar */
.nav-toggle-icon:not(.nav-toggle-icon--close) {
    display: block;
    position: relative;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    margin: 8px 0;
    transition: background 0.15s ease 0.1s;
}

/* Top and bottom bars */
.nav-toggle-icon:not(.nav-toggle-icon--close)::before,
.nav-toggle-icon:not(.nav-toggle-icon--close)::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.25s ease;
}
.nav-toggle-icon:not(.nav-toggle-icon--close)::before { top: -8px; }
.nav-toggle-icon:not(.nav-toggle-icon--close)::after  { bottom: -8px; }

/* X state: fade middle, rotate top/bottom */
body.menu-is-open .nav-toggle-icon:not(.nav-toggle-icon--close) {
    background: transparent;
    transition: background 0.15s ease;
}
body.menu-is-open .nav-toggle-icon:not(.nav-toggle-icon--close)::before {
    transform: translateY(8px) rotate(45deg);
}
body.menu-is-open .nav-toggle-icon:not(.nav-toggle-icon--close)::after {
    transform: translateY(-8px) rotate(-45deg);
}

/* ── Mobile menu open: blue background + white links ── */
/* Go theme already handles opacity/visibility/position for the offscreen nav.
   We only override the colors the Go theme would otherwise use (white bg, primary-color text). */
@media only screen and (max-width: 959px) {
    body.menu-is-open .header__navigation {
        background-color: var(--go--color--primary);
    }
    body.menu-is-open .header__navigation-inner {
        position: static;
    }
    body.menu-is-open .header__navigation a {
        color: #ffffff;
        font-size: 2.25rem;
        text-align: center;
        padding: 0.75rem 0;
    }
    body.menu-is-open .header__navigation .menu-item {
        text-align: center;
    }
    body.menu-is-open .nav-toggle {
        color: #ffffff;
    }
}

.site-title {
    font-size: var(--go-navigation--font-size);
}

.custom-logo-link {
    display: inline-flex !important; /* Go's .header__titles h1.custom-logo > .custom-logo-link wins on specificity */
    align-items: center;
    width: auto;
}

.custom-logo-link img {
    display: block;
    width: 40px;
    height: auto;
}

.custom-logo-link ~ a .site-title {
    margin-left: 0.5rem;
}

/* Softer blue-black for all headings, complementing the #5c7e95 accent */
h1, h2, h3, h4, h5, h6 {
    color: #2e4a6a;
}

/* Homepage intro animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Photo fades in first */
.home .has-quaternary-background-color .smImg {
    animation: fadeIn 0.9s ease-out both;
}

/* Heading fades up after photo */
.home .has-quaternary-background-color h2.wp-block-heading {
    animation: fadeUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

/* Supporting text fades up after heading */
.home .has-quaternary-background-color p {
    animation: fadeUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
}

@media (prefers-reduced-motion: reduce) {
    .home .has-quaternary-background-color .smImg,
    .home .has-quaternary-background-color h2.wp-block-heading,
    .home .has-quaternary-background-color p {
        animation: none;
    }
}

/* Case study intro animations */
.parent-pageid-379 .entry-content > .wp-block-columns.alignwide:first-child .wp-block-column:first-child p:first-child {
    animation: fadeUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.parent-pageid-379 .entry-content > .wp-block-columns.alignwide:first-child h2.wp-block-heading {
    animation: fadeUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

.parent-pageid-379 .entry-content > .wp-block-columns.alignwide:first-child .wp-block-column:first-child p:last-of-type {
    animation: fadeUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
}

.parent-pageid-379 .entry-content > .wp-block-columns.alignwide:first-child .wp-block-column:last-child {
    animation: fadeInRight 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

/* First content section — fade in only the heading and paragraph text */
.parent-pageid-379 .entry-content > .wp-block-columns.alignwide + * + .wp-block-coblocks-row h4.wp-block-heading:first-of-type,
.parent-pageid-379 .entry-content > .wp-block-columns.alignwide + .wp-block-coblocks-row h4.wp-block-heading:first-of-type {
    animation: fadeUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
}

.parent-pageid-379 .entry-content > .wp-block-columns.alignwide + * + .wp-block-coblocks-row h4.wp-block-heading:first-of-type + p,
.parent-pageid-379 .entry-content > .wp-block-columns.alignwide + .wp-block-coblocks-row h4.wp-block-heading:first-of-type + p {
    animation: fadeUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.75s both;
}

@media (prefers-reduced-motion: reduce) {
    .parent-pageid-379 .entry-content > .wp-block-columns.alignwide:first-child .wp-block-column:first-child p:first-child,
    .parent-pageid-379 .entry-content > .wp-block-columns.alignwide:first-child h2.wp-block-heading,
    .parent-pageid-379 .entry-content > .wp-block-columns.alignwide:first-child .wp-block-column:first-child p:last-of-type,
    .parent-pageid-379 .entry-content > .wp-block-columns.alignwide:first-child .wp-block-column:last-child,
    .parent-pageid-379 .entry-content > .wp-block-columns.alignwide + * + .wp-block-coblocks-row h4.wp-block-heading:first-of-type,
    .parent-pageid-379 .entry-content > .wp-block-columns.alignwide + .wp-block-coblocks-row h4.wp-block-heading:first-of-type,
    .parent-pageid-379 .entry-content > .wp-block-columns.alignwide + * + .wp-block-coblocks-row h4.wp-block-heading:first-of-type + p,
    .parent-pageid-379 .entry-content > .wp-block-columns.alignwide + .wp-block-coblocks-row h4.wp-block-heading:first-of-type + p {
        animation: none;
    }
}

/* Extra padding on homepage intro section */
.home .has-quaternary-background-color.has-padding {
    padding-top: 3rem;
    padding-bottom: 6rem;
}

/* Embossed effect on hero heading */
.home .has-quaternary-background-color h2.wp-block-heading {
    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.9),
        0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Force everything in the hero to center consistently at all breakpoints */
.home .has-quaternary-background-color .wp-block-column {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home .has-quaternary-background-color h2.wp-block-heading {
    max-width: 1100px;
}

/* Case study intro — left-aligned */
body.page:not(.home) .entry-content > .wp-block-columns:first-of-type .wp-block-column {
    max-width: 48vw;
    margin-left: 0;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* Decorative divider left-aligned in intro */
body.page:not(.home) .entry-content > .wp-block-columns:first-of-type .case-study-divider {
    margin-left: 0;
}

/* Decorative line between title and company name */
.case-study-divider {
    width: 48px;
    height: 2px;
    background-color: #2e4a6a;
    opacity: 0.35;
    border-radius: 2px;
    margin: 0.75rem auto;
}

/* Close the gap between adjacent CoBlocks rows (gray section → gray section) */
body.page:not(.home) .wp-block-coblocks-row + .wp-block-coblocks-row {
    margin-top: 0;
}

/* Collapse wp-block-columns wrapper margin inside CoBlocks content so image margin controls spacing */
body.page:not(.home) .entry-content .wp-block-coblocks-row .wp-block-coblocks-column__inner .wp-block-columns {
    margin-top: 0;
    margin-bottom: 0;
}

/* Consistent spacing between content blocks in case study pages */
body.page:not(.home) .entry-content .wp-block-coblocks-row .wp-block-coblocks-column__inner .wp-block-image {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* Image after image — tighten */
body.page:not(.home) .entry-content .wp-block-coblocks-row .wp-block-coblocks-column__inner .wp-block-image + .wp-block-image {
    margin-top: 1.5rem;
}

/* Headings — generous space above, tight below */
body.page:not(.home) .entry-content .wp-block-coblocks-row .wp-block-coblocks-column__inner h2,
body.page:not(.home) .entry-content .wp-block-coblocks-row .wp-block-coblocks-column__inner h3 {
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
}

/* Paragraph after heading — tight */
body.page:not(.home) .entry-content .wp-block-coblocks-row .wp-block-coblocks-column__inner h2 + p,
body.page:not(.home) .entry-content .wp-block-coblocks-row .wp-block-coblocks-column__inner h3 + p {
    margin-top: 0;
}

/* Normalize all image container widths in case study content */
body.page:not(.home) .entry-content .wp-block-coblocks-row .wp-block-image,
body.page:not(.home) .entry-content .wp-block-coblocks-row .wp-block-image figure {
    width: 100%;
    max-width: 100%;
}
body.page:not(.home) .entry-content .wp-block-coblocks-row .wp-block-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Image treatment — case study pages (inside CoBlocks rows) */
body:not(.home) .entry-content .wp-block-coblocks-row .wp-block-image img {
    background-color: #e8e8e8;
    border-radius: 6px;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
    display: block;
}

/* Image treatment — exploration posts (bare wp:image blocks) */
body.single-post .entry-content .wp-block-image img {
    background-color: #e8e8e8;
    border-radius: 6px;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
    display: block;
}

/* About page — widen Go's default 42rem max-width to match CoBlocks row width */
body.page-id-3185 .entry-content {
    --go--max-width: 780px;
}

/* About page — experience/education cards */
.about-card {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-left: 4px solid #d0d0d0;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.25rem;
}

.about-card--current {
    border-left-color: var(--go--color--primary);
}

/* Contact page — constrain form width */
.page-id-13 .wp-block-coblocks-form {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Beauty shots: full-bleed comparison images ── */
/* Group block must sit outside CoBlocks rows in the editor; add class "beauty-shot" */
.beauty-shot {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: none;
}

.beauty-shot .wp-block-columns {
    max-width: 100%;
    gap: 0;
}

.beauty-shot .wp-block-column {
    padding: 0;
    margin: 0;
}

.beauty-shot .wp-block-image,
.beauty-shot .wp-block-image figure {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.beauty-shot .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 781px) {
    .beauty-shot .wp-block-columns {
        flex-direction: column;
    }
    .beauty-shot .wp-block-column {
        flex-basis: 100%;
        width: 100%;
    }
}

/* Footer tagline */
.footer-tagline {
    display: block;
    opacity: 0.5;
    font-size: 0.75em;
    letter-spacing: 0.04em;
    margin-top: 0.3rem;
}