/*
Theme Name: Cassie Flynn
Theme URI: https://cassieflynn.com
Description: A custom classic PHP theme for Cassie Flynn
Version: 1.0.0
Author: Cassie Flynn
*/

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

:root {
    --color-bg: #121212;
    --color-bg-alt: #181818;
    --color-text: #f2f2f2;
    --color-accent: #50c878;
    --color-button-bg: #333333;
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --max-width: 1260px;
    --spacing-outer: min(4vw, 90px);
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.6;
    letter-spacing: -0.3px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
/* LINKS: only green, never white */
a { color: var(--color-text); text-decoration: none; text-decoration-color: var(--color-accent); text-underline-offset: 0.125em; }
a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }

h1,h2,h3 { color: var(--color-text); font-weight: 600; line-height: 1.1; letter-spacing: -0.3px; }
p { color: var(--color-text); font-size: 18px; line-height: 1.5; letter-spacing: 0; margin-bottom: 1.25rem; }
p:last-child { margin-bottom: 0; }

.container { max-width: var(--max-width); margin: 0 auto; padding-left: var(--spacing-outer); padding-right: var(--spacing-outer); }

/* PREVIEW NAV */
/* ═══ HEADER — more top padding, more space before banner ═══ */
.site-header {
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header .container {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 20px; padding-bottom: 20px;
}
.site-title { font-size: 24px; font-weight: 500; letter-spacing: -0.3px; }
.site-title:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; }
.main-nav { display: flex; align-items: center; }
.nav-links { display: none; list-style: none; gap: 2.5rem; align-items: center; margin: 0; padding: 0; }
.nav-links li a { font-size: 16px; font-weight: 400; letter-spacing: -0.3px; }
.burger-menu {
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; padding: 8px; margin-left: 1rem;
}
.burger-menu svg { fill: var(--color-text); width: 24px; height: 24px; }

/* ═══ OVERLAY — X aligned with burger icon ═══ */
.overlay-menu {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--color-bg); z-index: 4000;
    padding: var(--spacing-outer);
    padding-top: 140px;
    flex-direction: column; justify-content: flex-start;
}
.overlay-menu.is-open { display: flex; }
.overlay-menu .close-btn {
    position: absolute;
    top: 48px;
    right: var(--spacing-outer);
    background: none; border: none; cursor: pointer; padding: 8px;
}
.overlay-menu .close-btn svg { fill: var(--color-text); width: 24px; height: 24px; }
.overlay-menu-links { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.overlay-menu-links li a { font-size: 24px; font-weight: 400; letter-spacing: -0.3px; }
.overlay-menu-links li a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; }

/* ═══ FOOTER ═══ */
.site-footer { padding-top: 30px; padding-bottom: 20px; }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; }
.footer-name { font-size: 1rem; }
.footer-social { display: flex; gap: 30px; align-items: center; }
.footer-social a { font-size: 22px; }
.footer-social a:hover { color: var(--color-accent); text-decoration: none; }

/* ═══ HERO — more space after header ═══ */
.hero-section { padding-top: 30px; }
.hero-section .container { display: flex; flex-direction: column; gap: 15px; }
.hero-text { order: 1; }
.hero-text h1 {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 600; line-height: 1.15; margin-bottom: 10px;
}
.hero-text .social-link {
    display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
}
.hero-text .social-link:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; }
/* Portrait centred on mobile, 90% width */
.hero-image { order: 2; max-width: 90%; margin: 0 auto; }
.hero-image img { border-radius: 8px; width: 100%; }

/* ═══ FEATURED BY ═══ */
.featured-by-section { padding: 30px 0; margin-top: 30px; }
.featured-by-text { text-align: center; text-transform: uppercase; opacity: 0.6; font-size: 16px; width: 100%; margin: 30px 0 10px 0; }
.featured-logos {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; row-gap: 30px; column-gap: 40px; padding-top: 30px;
}
.featured-logos img:hover { opacity: 0.9 !important; }
.logo-cnn { max-width: 80px !important; filter: brightness(0) invert(1); opacity: 0.5; }
.logo-ft { max-width: 40px !important; filter: grayscale(1) contrast(150%); opacity: 0.5; }
.logo-nyt { max-width: 40px !important; filter: brightness(0) invert(1); opacity: 0.5; }
.logo-npr { max-width: 80px !important; filter: grayscale(1) contrast(150%); opacity: 0.5; }
.logo-sxsw { max-width: 40px !important; filter: brightness(0) invert(1); opacity: 0.5; }
.logo-ted { max-width: 80px !important; filter: brightness(0) invert(1); opacity: 0.5; }
.logo-time { max-width: 80px !important; filter: brightness(0) invert(1); opacity: 0.5; }
/* Web Summit — brightness(0) invert(1) to make it white like others */
.logo-ws { max-width: 84px !important; filter: brightness(0) invert(1); opacity: 0.5; }
.logo-wdht { max-width: 128px !important; filter: brightness(0) invert(1); opacity: 0.5; }

/* ═══ ABOUT PREVIEW ═══ */
.about-preview-section {
    background-color: var(--color-bg-alt);
    margin-bottom: 50px; margin-top: 2.5rem; padding: 40px 20px;
}
.about-preview-text {
    font-size: 18px; line-height: 1.5; font-weight: 400;
    text-align: center; max-width: 800px; margin: 0 auto; padding: 0 20px;
}
.about-preview-text strong { font-weight: 600; }
.read-more-btn {
    display: block; color: var(--color-text); background: var(--color-button-bg);
    font-family: var(--font-primary); width: fit-content; margin: 30px auto 0;
    padding: 10px 20px; border-radius: 8px; font-weight: 500;
    text-align: center; white-space: nowrap; font-size: 17px;
}
.read-more-btn:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* ═══ FEATURE CARDS — 20px gap mobile, 40px desktop ═══ */
.feature-cards-section .container { display: flex; flex-direction: column; gap: 20px; }
.feature-card {
    background-color: var(--color-bg-alt); border-radius: 8px;
    overflow: hidden; max-width: 100%; margin: 0 auto;
    width: 100%;
}
.feature-card-inner { display: flex; flex-direction: column; }
.feature-card-text { padding: 2em; order: 1; }
.feature-card-text h2 { font-size: 24px; font-weight: 600; margin-bottom: 15px; }
.feature-card-text h2 a { color: var(--color-text); text-decoration: none; }
.feature-card-text h2 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.feature-card-text p { font-size: 18px; line-height: 1.5; letter-spacing: 0; }
.feature-card-image { order: 2; }
.feature-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══ CONTACT PREVIEW ═══ */
.contact-preview-section { text-align: center; padding: 60px 20px; }
.contact-preview-section h2 { font-size: 24px; font-weight: 600; margin-bottom: 15px; }
.contact-preview-section p { font-size: 18px; }
.contact-preview-section a { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* ═══ INNER PAGES — images NOT squashed (height auto, no stretch) ═══ */
.page-content-section { padding-top: 20px; }
.page-title { font-size: 24px; font-weight: 600; letter-spacing: -0.3px; margin-bottom: 20px; }
.page-layout { display: flex; flex-direction: column; gap: 10px; }
.page-text p { font-size: 18px; line-height: 1.5; letter-spacing: 0; margin-bottom: 1.25rem; }
.page-text a { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.page-featured-image { order: -1; }
.page-featured-image img { border-radius: 8px; width: 100%; height: auto; object-fit: contain; }

/* ═══ CONTACT PAGE — ~50% width on desktop matching screenshot ═══ */
.contact-page-content { max-width: 100%; }
.contact-intro p { font-size: 18px; line-height: 1.5; margin-bottom: 0; }
.contact-intro a { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.mock-form { max-width: 400px; margin-top: 30px; }
.mock-form label { display: block; font-size: 18px; font-weight: 400; font-family: var(--font-primary); margin-top: 20px; }
.mock-form label:first-child { margin-top: 0; }
.mock-form label .req { color: #e53935; }
.mock-form input { width: 100%; max-width: 400px; padding: 10px; font-size: 20px; margin-top: 10px; border: 1px solid #ccc; background: #fff; color: #333; font-family: var(--font-primary); }
.mock-form textarea { width: 100%; max-width: 650px; padding: 10px; font-size: 20px; margin-top: 10px; border: 1px solid #ccc; background: #fff; color: #333; font-family: var(--font-primary); min-height: 150px; resize: vertical; }
.mock-form .submit-btn {
    color: var(--color-text); background: var(--color-button-bg); border: none;
    padding: 10px 20px; border-radius: 8px; font-weight: 500; font-size: 16px;
    font-family: var(--font-primary); cursor: pointer; margin-top: 15px;
}

/* ═══ TABLET 782px+ ═══ */
@media (min-width: 782px) {
    .hero-section .container { flex-direction: row; align-items: center; }
    .hero-text { order: 1; flex: 1; }
    .hero-text h1 { font-size: 52px; margin-bottom: 20px; }
    .hero-text .social-link { font-size: 20px; }
    .hero-image { order: 2; flex: 1; max-width: 100%; margin: 0; }

    .logo-cnn { max-width: 100px !important; }
    .logo-ft { max-width: 50px !important; }
    .logo-nyt { max-width: 50px !important; }
    .logo-npr { max-width: 100px !important; }
    .logo-sxsw { max-width: 50px !important; }
    .logo-ted { max-width: 100px !important; }
    .logo-time { max-width: 100px !important; }
    .logo-ws { max-width: 105px !important; }
    .logo-wdht { max-width: 160px !important; }

    .page-title { font-size: 28px; }
    .page-layout { flex-direction: row; gap: 40px; }
    .page-text { order: 1; flex: 1; }
    .page-featured-image { order: 2; flex: 1; }
    /* Images: natural aspect ratio, align top */
    .page-featured-image img { height: auto; object-fit: contain; align-self: flex-start; }

    .feature-card-text h2 { font-size: 28px; }
    .contact-preview-section h2 { font-size: 28px; }

    /* Contact page ~50% width */
    .contact-page-content { max-width: 50%; }
}

/* ═══ DESKTOP 992px+ ═══ */
@media (min-width: 992px) {
    .nav-links { display: flex; }
    .burger-menu svg { width: 30px; height: 30px; }
    .overlay-menu .close-btn svg { width: 30px; height: 30px; }
    .overlay-menu-links li a { font-size: 32px; }
    .overlay-menu { padding-top: 150px; }

    .hero-section { padding-top: 40px; }

    .about-preview-text { font-size: 28px; line-height: 1.4; padding: 0; }
    .featured-logos { max-width: 65%; margin: 0 auto; column-gap: 60px; row-gap: 30px; padding-top: 40px; }
    .featured-by-text { margin: 30px 0 0 0; }

    .feature-cards-section .container { gap: 40px; }
    .feature-card { max-width: 100%; }
    .feature-card-inner { flex-direction: row; }
    .feature-card-text { flex: 1; padding: 2.5em; }
    .feature-card-image { flex: 1; }
    .feature-card .feature-card-image { order: 1; }
    .feature-card .feature-card-text { order: 2; }
    .feature-card.reverse .feature-card-text { order: 1; }
    .feature-card.reverse .feature-card-image { order: 2; }

    .page-layout { gap: 60px; align-items: flex-start; }
    .page-featured-image img { margin-top: 20px; }
    .page-title { font-size: 32px; margin-bottom: 30px; }
    .read-more-btn { font-size: 18px; }
    .footer-social a:hover { color: var(--color-text); }
}

@media (min-width: 1200px) {
    .nav-links li a { font-size: 18px; }
    .feature-card { max-width: 90%; }
    .page-layout { max-width: var(--max-width); gap: 60px; }
}
@media (min-width: 1440px) { .feature-card { max-width: 75%; } }
@media (min-width: 1600px) { .feature-card { max-width: 65%; } }

div.wpforms-container-full .wpforms-form .wpforms-field-label { color: #f2f2f2 !important; font-weight: 400 !important; font-family: 'Inter', sans-serif !important; font-size: 18px !important; }
div.wpforms-container-full .wpforms-form input[type="text"], div.wpforms-container-full .wpforms-form input[type="email"] { padding: 10px; font-size: 20px; margin-top: 10px; width: 100%; max-width: 400px; box-sizing: border-box; }
div.wpforms-container-full .wpforms-form textarea { padding: 10px; font-size: 20px; margin-top: 10px; width: 100%; max-width: 650px; box-sizing: border-box; }
div.wpforms-container-full .wpforms-form button[type="submit"] { color: #f2f2f2 !important; background: #333 !important; font-family: 'Inter', sans-serif; width: fit-content; padding: 10px 20px; border-radius: 8px; font-weight: 500; margin-top: 10px !important; border: none; cursor: pointer; font-size: 16px; }
div.wpforms-container-full .wpforms-confirmation-container-full { background: none; padding: 0; font-weight: 500; border: 0; color: #f2f2f2; }
div.wpforms-container-full:not(:empty) { margin-left: 0 !important; }
.wp-block-image img { border-radius: 8px; }
.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; }
.single-post-date { text-transform: uppercase; font-size: 1rem; color: rgba(242,242,242,0.6); margin-bottom: 1rem; }
.post-content p { font-size: 18px; line-height: 1.5; margin-bottom: 1.25rem; }
.error-404 { text-align: center; padding: 100px 20px; }
.error-404 h1 { font-size: clamp(2rem, 6vw, 4rem); margin-bottom: 20px; }