/*
Theme Name:   Clipper Ship Marketing
Theme URI:    https://clippershipmarketing.com
Description:  Genesis child theme for Clipper Ship Marketing, built on Breakthrough Pro by StudioPress. Clean, spacious professional services theme — Quiet Authority palette.
Author:       Clipper Ship Marketing LLC
Author URI:   https://clippershipmarketing.com
Template:     genesis
Version:      1.0.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  clippership-breakthrough
*/
@import url('../breakthrough/style.css');

/* ==========================================================================
   GOOGLE FONTS — Playfair Display (headings) + Inter (body)
   Note: also enqueued via functions.php for performance
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ==========================================================================
   DESIGN TOKENS — CSM brand palette and spacing scale
   ========================================================================== */
:root {
    /* Brand palette */
    --csm-navy:        #2e3192;
    --csm-crimson:     #a61630;
    --csm-gold:        #d8c335;
    --csm-gold-dark:   #b8a420;
    --csm-white:       #ffffff;
    --csm-off-white:   #f7f7f5;
    --csm-light-gray:  #f0f0ed;
    --csm-mid-gray:    #e4e4e0;
    --csm-text:        #1a1a1a;
    --csm-text-muted:  #5a5a5a;
    --csm-border:      #ddddd8;

    /* Typography */
    --csm-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --csm-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing scale */
    --csm-space-xs:   0.5rem;    /*  8px */
    --csm-space-sm:   1rem;      /* 16px */
    --csm-space-md:   1.5rem;    /* 24px */
    --csm-space-lg:   2.5rem;    /* 40px */
    --csm-space-xl:   3.5rem;    /* 56px */
    --csm-space-2xl:  5rem;      /* 80px */
    --csm-space-3xl:  7.5rem;    /* 120px */

    /* Section padding */
    --csm-section-pad: 80px;
}

/* ==========================================================================
   GLOBAL RESETS AND BASE
   ========================================================================== */

/* Override Breakthrough's dark body */
body {
    background-color: var(--csm-white) !important;
    color: var(--csm-text) !important;
    font-family: var(--csm-font-body) !important;
    font-size: 1rem;
    line-height: 1.7;
}

/* Typography: headings */
h1, h2, h3, h4, h5, h6,
.entry-title,
.archive-title,
.site-title {
    font-family: var(--csm-font-heading) !important;
    color: var(--csm-navy) !important;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.125rem; }

/* Body font override */
p, li, td, th, label, input, textarea, select, blockquote {
    font-family: var(--csm-font-body) !important;
}

/* Links */
a {
    color: var(--csm-navy);
    text-decoration: underline;
    text-decoration-color: rgba(46, 49, 146, 0.3);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
a:hover,
a:focus {
    color: var(--csm-crimson);
    text-decoration-color: var(--csm-crimson);
}

/* ==========================================================================
   SITE HEADER — override Breakthrough dark header
   ========================================================================== */

.site-header {
    background-color: var(--csm-white) !important;
    border-bottom: 1px solid var(--csm-border) !important;
    padding: 1.25rem 0 !important;
}

.site-title a,
.site-title a:hover {
    color: var(--csm-navy) !important;
    font-family: var(--csm-font-heading) !important;
    font-size: 1.5rem;
    text-decoration: none !important;
}

.site-description {
    color: var(--csm-text-muted) !important;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ==========================================================================
   NAVIGATION — override Breakthrough dark nav
   ========================================================================== */

.nav-primary,
.genesis-nav-menu {
    background-color: var(--csm-white) !important;
}

.genesis-nav-menu a,
.genesis-nav-menu > .menu-item > a {
    color: var(--csm-text) !important;
    font-family: var(--csm-font-body) !important;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.75rem 1rem !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a {
    color: var(--csm-navy) !important;
    text-decoration: none !important;
}

/* Nav CTA button */
.genesis-nav-menu .menu-item-cta > a,
.genesis-nav-menu a.nav-cta {
    background-color: var(--csm-navy) !important;
    color: var(--csm-white) !important;
    border-radius: 4px;
    padding: 0.5rem 1.25rem !important;
    font-weight: 600;
}
.genesis-nav-menu .menu-item-cta > a:hover,
.genesis-nav-menu a.nav-cta:hover {
    background-color: var(--csm-crimson) !important;
}

/* Dropdown menus */
.genesis-nav-menu .sub-menu {
    background-color: var(--csm-white) !important;
    border: 1px solid var(--csm-border) !important;
    border-top: 3px solid var(--csm-navy) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
.genesis-nav-menu .sub-menu a {
    color: var(--csm-text) !important;
    padding: 0.625rem 1.25rem !important;
}
.genesis-nav-menu .sub-menu a:hover {
    background-color: var(--csm-off-white) !important;
    color: var(--csm-navy) !important;
}

/* ==========================================================================
   CONTENT AREA — override Breakthrough dark backgrounds
   ========================================================================== */

.content,
.content-sidebar-wrap,
.site-inner,
.wrap {
    background-color: var(--csm-white) !important;
}

.entry-content {
    color: var(--csm-text) !important;
    max-width: 72ch;
}

.entry-content p,
.entry-content li {
    font-size: 1.0625rem;
    line-height: 1.75;
    margin-bottom: 1.25em;
}

/* ==========================================================================
   SIDEBAR — light treatment
   ========================================================================== */

.sidebar {
    background-color: var(--csm-off-white) !important;
    border-left: 1px solid var(--csm-border);
    padding: var(--csm-space-lg) !important;
}

.sidebar .widget-title {
    color: var(--csm-navy) !important;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--csm-space-sm);
    padding-bottom: var(--csm-space-xs);
    border-bottom: 2px solid var(--csm-gold);
}

/* ==========================================================================
   SITE FOOTER — clean dark footer
   ========================================================================== */

.site-footer {
    background-color: var(--csm-navy) !important;
    color: rgba(255,255,255,0.75) !important;
    padding: var(--csm-space-2xl) 0 var(--csm-space-lg) !important;
    font-size: 0.9375rem;
}

.site-footer a {
    color: rgba(255,255,255,0.70) !important;
    text-decoration: none;
}
.site-footer a:hover {
    color: var(--csm-gold) !important;
}

.footer-credits {
    color: rgba(255,255,255,0.45) !important;
    font-size: 0.8125rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: var(--csm-space-md);
    margin-top: var(--csm-space-xl);
}

/* ==========================================================================
   BUTTONS — CSM button system
   ========================================================================== */

.button,
button[type="submit"],
input[type="submit"],
.csm-btn,
.wp-block-button__link {
    display: inline-block;
    font-family: var(--csm-font-body) !important;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.875rem 2rem;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    line-height: 1.2;
}

/* Primary — navy fill */
.csm-btn-primary,
.button,
button[type="submit"],
input[type="submit"] {
    background-color: var(--csm-navy) !important;
    color: var(--csm-white) !important;
    border-color: var(--csm-navy) !important;
}
.csm-btn-primary:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: #232774 !important;
    border-color: #232774 !important;
    color: var(--csm-white) !important;
}

/* Gold — signature CTA */
.csm-btn-gold {
    background-color: var(--csm-gold) !important;
    color: var(--csm-navy) !important;
    border-color: var(--csm-gold) !important;
}
.csm-btn-gold:hover {
    background-color: var(--csm-gold-dark) !important;
    border-color: var(--csm-gold-dark) !important;
    color: var(--csm-navy) !important;
}

/* Outline — navy border, transparent fill */
.csm-btn-outline {
    background-color: transparent !important;
    color: var(--csm-navy) !important;
    border-color: var(--csm-navy) !important;
}
.csm-btn-outline:hover {
    background-color: var(--csm-navy) !important;
    color: var(--csm-white) !important;
}

/* Outline white — for use on dark backgrounds */
.csm-btn-outline-white {
    background-color: transparent !important;
    color: var(--csm-white) !important;
    border-color: rgba(255,255,255,0.6) !important;
}
.csm-btn-outline-white:hover {
    background-color: rgba(255,255,255,0.12) !important;
    border-color: var(--csm-white) !important;
}

/* ==========================================================================
   HOMEPAGE SECTION CLASSES
   Five named sections that match the five widget areas in functions.php
   ========================================================================== */

/* Shared section base */
.csm-hero-section,
.csm-shift-section,
.csm-services-section,
.csm-testimonial-section,
.csm-cta-section {
    padding: var(--csm-section-pad) 0;
    width: 100%;
}

/* --- 1. HERO SECTION — white background, full-width --- */
.csm-hero-section {
    background-color: var(--csm-white);
    padding: 100px 0 90px;
    border-bottom: 1px solid var(--csm-border);
}

.csm-hero-section .widget-area {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--csm-space-lg);
}

.csm-hero-section .csm-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--csm-gold-dark);
    margin-bottom: var(--csm-space-sm);
}

.csm-hero-section h1,
.csm-hero-section h2 {
    font-size: clamp(2.25rem, 5vw, 3.25rem) !important;
    color: var(--csm-navy) !important;
    margin-bottom: var(--csm-space-md);
    max-width: 20ch;
}

.csm-hero-section p {
    font-size: 1.125rem;
    color: var(--csm-text);
    max-width: 62ch;
    line-height: 1.75;
    margin-bottom: var(--csm-space-lg);
}

.csm-hero-section .csm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--csm-space-sm);
    align-items: center;
}

/* --- 2. VISIBILITY SHIFT SECTION — navy background, gold heading --- */
.csm-shift-section {
    background-color: var(--csm-navy);
    color: rgba(255,255,255,0.85);
}

.csm-shift-section .widget-area {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--csm-space-lg);
}

.csm-shift-section h2,
.csm-shift-section h3 {
    color: var(--csm-gold) !important;
    font-family: var(--csm-font-heading) !important;
    margin-bottom: var(--csm-space-md);
}

.csm-shift-section .csm-label {
    color: var(--csm-gold);
    opacity: 0.85;
}

.csm-shift-section p {
    color: rgba(255,255,255,0.85);
    font-size: 1.0625rem;
    max-width: 68ch;
    line-height: 1.75;
}

/* --- 3. SERVICES SECTION — light gray background --- */
.csm-services-section {
    background-color: var(--csm-light-gray);
}

.csm-services-section .widget-area {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 var(--csm-space-lg);
}

.csm-services-section h2 {
    color: var(--csm-navy) !important;
    margin-bottom: var(--csm-space-sm);
}

.csm-services-section .csm-label {
    color: var(--csm-text-muted);
}

/* Services grid */
.csm-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--csm-space-xl);
    margin-top: var(--csm-space-xl);
}

@media (max-width: 720px) {
    .csm-services-grid {
        grid-template-columns: 1fr;
    }
}

.csm-service-card {
    background-color: var(--csm-white);
    border-top: 4px solid var(--csm-crimson);
    padding: var(--csm-space-xl);
    border-radius: 2px;
}

.csm-service-card.csm-service-secondary {
    border-top-color: var(--csm-navy);
}

.csm-service-card h3 {
    color: var(--csm-navy) !important;
    font-size: 1.5rem;
    margin-bottom: var(--csm-space-sm);
}

.csm-service-card p {
    color: var(--csm-text);
    line-height: 1.75;
}

.csm-service-card .csm-card-action {
    margin-top: var(--csm-space-xl);
}

/* --- 4. TESTIMONIAL SECTION — white background, centered --- */
.csm-testimonial-section {
    background-color: var(--csm-white);
    border-top: 1px solid var(--csm-border);
    border-bottom: 1px solid var(--csm-border);
}

.csm-testimonial-section .widget-area {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 var(--csm-space-lg);
    text-align: center;
}

.csm-testimonial-section .csm-label {
    display: block;
    margin-bottom: var(--csm-space-md);
    color: var(--csm-text-muted);
}

.csm-testimonial-section blockquote,
.csm-testimonial-section .csm-pull-quote {
    font-family: var(--csm-font-heading) !important;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-style: italic;
    color: var(--csm-navy) !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 auto var(--csm-space-md);
    line-height: 1.35;
}

.csm-testimonial-section .csm-testimonial-body {
    color: var(--csm-text-muted);
    font-size: 1.0625rem;
    max-width: 52ch;
    margin: 0 auto var(--csm-space-xl);
}

/* --- 5. CTA SECTION — crimson background --- */
.csm-cta-section {
    background-color: var(--csm-crimson);
    color: rgba(255,255,255,0.95);
}

.csm-cta-section .widget-area {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 var(--csm-space-lg);
    text-align: center;
}

.csm-cta-section h2,
.csm-cta-section h3 {
    color: var(--csm-white) !important;
    font-family: var(--csm-font-heading) !important;
    margin-bottom: var(--csm-space-md);
}

.csm-cta-section p {
    color: rgba(255,255,255,0.90);
    font-size: 1.0625rem;
    margin-bottom: var(--csm-space-lg);
}

.csm-cta-section .csm-email-direct {
    display: block;
    margin-top: var(--csm-space-md);
    font-size: 0.875rem;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
}
.csm-cta-section .csm-email-direct:hover {
    color: var(--csm-gold);
}

/* ==========================================================================
   SHARED UTILITY CLASSES
   ========================================================================== */

/* Section label — small all-caps category label */
.csm-label {
    display: block;
    font-family: var(--csm-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--csm-text-muted);
    margin-bottom: var(--csm-space-xs);
}

/* Inner container */
.csm-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--csm-space-lg);
}

/* Pull quote */
.csm-pull-quote {
    font-family: var(--csm-font-heading) !important;
    font-size: 1.5rem;
    font-style: italic;
    color: var(--csm-navy);
    border-left: 4px solid var(--csm-gold);
    padding-left: var(--csm-space-md);
    margin: var(--csm-space-xl) 0;
    line-height: 1.4;
}

/* Stats strip */
.csm-stats-strip {
    background-color: var(--csm-navy);
    padding: var(--csm-space-xl) 0;
}

.csm-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--csm-space-lg);
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--csm-space-lg);
    text-align: center;
}

@media (max-width: 600px) {
    .csm-stats-grid {
        grid-template-columns: 1fr;
    }
}

.csm-stats-grid h3 {
    font-family: var(--csm-font-heading) !important;
    font-size: 3rem;
    color: var(--csm-gold) !important;
    margin-bottom: var(--csm-space-xs);
}

.csm-stats-grid p {
    color: rgba(255,255,255,0.80);
    font-size: 0.9375rem;
}

/* Credentials strip */
.csm-credentials-strip {
    background-color: var(--csm-off-white);
    border-top: 1px solid var(--csm-border);
    border-bottom: 1px solid var(--csm-border);
    padding: var(--csm-space-lg) 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--csm-text-muted);
}

/* Inner page hero */
.csm-page-hero {
    background-color: var(--csm-navy);
    color: var(--csm-white);
    padding: var(--csm-space-2xl) 0;
    text-align: center;
}
.csm-page-hero h1 {
    color: var(--csm-white) !important;
    margin-bottom: var(--csm-space-sm);
}
.csm-page-hero p {
    color: rgba(255,255,255,0.80);
    font-size: 1.125rem;
    max-width: 52ch;
    margin: 0 auto;
}

/* Two-column prose layout */
.csm-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--csm-space-2xl);
    align-items: start;
}
@media (max-width: 768px) {
    .csm-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Horizontal rule */
.csm-rule {
    border: none;
    border-top: 1px solid var(--csm-border);
    margin: var(--csm-space-2xl) 0;
}

/* ==========================================================================
   INNER PAGES — content/sidebar layout
   ========================================================================== */

.content-sidebar .content {
    padding: var(--csm-space-2xl) 0;
}

.content-sidebar .sidebar .widget {
    margin-bottom: var(--csm-space-xl);
}

/* Contact page */
.csm-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--csm-space-2xl);
    align-items: start;
}
@media (max-width: 768px) {
    .csm-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Form styles */
.csm-form-group {
    margin-bottom: var(--csm-space-md);
}

.csm-form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--csm-text);
    margin-bottom: var(--csm-space-xs);
}

.csm-form-control,
.csm-form-group input,
.csm-form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--csm-border);
    border-radius: 4px;
    font-family: var(--csm-font-body) !important;
    font-size: 1rem;
    color: var(--csm-text);
    background-color: var(--csm-white);
    transition: border-color 0.2s ease;
}

.csm-form-control:focus,
.csm-form-group input:focus,
.csm-form-group textarea:focus {
    outline: none;
    border-color: var(--csm-navy);
    box-shadow: 0 0 0 3px rgba(46,49,146,0.12);
}

.csm-form-group textarea {
    min-height: 160px;
    resize: vertical;
}

/* ==========================================================================
   BREAKTHROUGH PRO OVERRIDES — target Breakthrough-specific classes
   ========================================================================== */

/* Breakthrough uses .site-container as outer wrapper */
.site-container {
    background-color: var(--csm-white) !important;
}

/* Breakthrough hero/landing area dark overrides */
.front-page-1,
.front-page-2,
.front-page-3 {
    background-color: var(--csm-white) !important;
    color: var(--csm-text) !important;
}

/* Breakthrough uses .entry-header for post/page titles */
.entry-header {
    padding: var(--csm-space-2xl) 0 var(--csm-space-lg);
}
.entry-title {
    font-family: var(--csm-font-heading) !important;
    color: var(--csm-navy) !important;
}

/* Archive header */
.archive-description {
    color: var(--csm-text-muted);
    font-size: 1.0625rem;
}

/* Pagination */
.pagination .active a,
.pagination .active span {
    background-color: var(--csm-navy) !important;
    color: var(--csm-white) !important;
    border-color: var(--csm-navy) !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    :root {
        --csm-section-pad: 60px;
    }
}

@media (max-width: 768px) {
    :root {
        --csm-section-pad: 48px;
    }

    .csm-hero-section h1,
    .csm-hero-section h2 {
        font-size: 2rem !important;
    }

    .csm-hero-section .widget-area,
    .csm-shift-section .widget-area,
    .csm-services-section .widget-area,
    .csm-testimonial-section .widget-area,
    .csm-cta-section .widget-area {
        padding: 0 var(--csm-space-md);
    }
}

@media (max-width: 480px) {
    .csm-hero-section .csm-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .csm-hero-section .csm-hero-actions a {
        width: 100%;
        text-align: center;
    }
}