/*
 * Theme Name:   GeneratePress Child
 * Theme URI:    https://consciouscopy.online
 * Description:  Child theme for Generate Press
 * Author:       Raam Singh
 * Author URI:   https://raamsingh.com
 * Template:     generatepress
 * Version:      1.1.0
 * License:      GNU General Public License v2 or later
 * License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:  generatepress-child
 */

/* ==========================================================================
   1. Root Variables & Global Setup
   ========================================================================== */

:root {
    /* Colors */
    --cc-bg-primary: #06332E;
    --cc-bg-primary-alpha: rgba(6, 51, 46, 0.7);
    --cc-bg-contrast: #104741;
    --cc-text-primary: #FFFFFF;
    --cc-text-faded: rgba(255, 255, 255, 0.7);
    --cc-accent-ochre: #D4A056;
    --cc-accent-alpha: rgba(212, 160, 86, 0.3);
    --cc-cta-hover: #E2B470;

    /* Fonts */
    --cc-font-heading: 'Cormorant Garamond', serif;
    --cc-font-body: 'Source Sans 3', sans-serif;
    --cc-font-stylistic: 'Beau Rivage', cursive;

    /* Spacing (20px scale) */
    --s-10: .5rem;
    --s-20: 1rem;
    --s-30: 1.5rem;
    --s-40: 2rem;
    --s-60: 3rem;
    --s-80: 4rem;
    --s-120: 6rem;

    /* Misc */
    --ls-btn: 0.02em;
    --dur-quick: 160ms;
}

html { font-size: 20px; /* Establishes 1rem = 20px */ }

body {
    background-color: var(--cc-bg-primary);
    background-image: url('https://consciouscopy.online/wp-content/uploads/2025/09/imgonline-com-ua-TextureSeamless-Q7sbIsrLP2QXey.jpg');
    color: var(--cc-text-primary);
    font-family: var(--cc-font-body);
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ==========================================================================
   2. Typographic Baseline (The Source of Truth)
   ========================================================================== */

/* --- Base Link & Paragraph Styles --- */
a {
    color: var(--cc-text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    text-decoration: underline;
    text-underline-offset:.3em; 
    color: var(--cc-text-faded);
}

body .site-content .entry-content p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: var(--s-30);
    max-width: 75ch;
}

/* --- Heading Hierarchy & Spacing --- */
/* Using high-specificity selectors to override theme/plugin resets */

/* H1: Primary Page Title */
body .site-content .entry-content h1 {
    font-family: var(--cc-font-heading);
    font-weight: 500;
    font-size: 3.55rem; /* ~71px */
    line-height: 1.2;
    letter-spacing: -0.05em;
    margin: var(--s-120) 0 var(--s-40);
}

/* H2: Section Heading */
body .site-content .entry-content h2 {
    font-family: var(--cc-font-heading);
    font-weight: 400;
    font-size: 3rem; /* 60px */
    line-height: 2;
    letter-spacing: -0.015em;
    margin: var(--s-80) 0 var(--s-40);
}

/* H3: Chapter & Subsection Heading */
body .site-content .entry-content h3 {
    font-family: var(--cc-font-heading);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.75rem; /* 35px */
    line-height: 1.25;
    letter-spacing: 0.009em;
    margin: var(--s-60) 0 var(--s-20);
}

/* H4: Tertiary Heading & List Titles */
body .site-content .entry-content h4 {
    font-family: var(--cc-font-heading);
    font-weight: 600;
    font-size: 1.375rem; /* 27.5px */
    line-height: 1.4;
    margin-top: var(--s-40) 0 var(--s-20);
}

/* H5: Sub-component Title (e.g., "Example 1") */
body .site-content .entry-content h5 {
    font-family: var(--cc-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.125rem; /* 25px */
    letter-spacing: 0.05em;
    line-height: 1.3;
    color: var(--cc-text-faded);
    margin-top: var(--s-40) 0 var(--s-20);
}

body .site-content .entry-content h6 {
  font-family: var(--cc-font-heading);
  font-weight: 600;
  font-size: 1.25rem;   /* 22.5px */
  line-height: 1.3;
  margin: var(--s-10) 0 var(--s-20);
}

body p.font-stylistic {
    font-family: var(--cc-font-stylistic);
    font-size: 2.75rem; /* 40px */
    line-height: 1.1;
    color: var(--cc-text-primary);
}

/* --- Other Text Elements --- */
body .site-content .entry-content blockquote {
    border-left: 2px solid var(--cc-accent-ochre);
    padding-left: var(--s-20);
    margin: var(--s-40) 0;
    font-family: var(--cc-font-heading);
    font-size: 1.5rem; /* 30px */
    line-height: 1.4;
    max-width: 55ch;
}

/* Lists */
body .site-content .entry-content ul,
body .site-content .entry-content ol { margin: var(--s-20) 0 var(--s-30); padding-left: 1.25rem; }
body .site-content .entry-content li { margin: .25rem 0; }

/* Quotes */
body .site-content .entry-content blockquote,
body .site-content .entry-content .wp-block-pullquote{
  border-left: 2px solid var(--cc-accent-ochre);
  padding-left: var(--s-20);
  margin: var(--s-40) 0;
  font-family: var(--cc-font-heading);
  font-size: 1.25rem;
  line-height: 1.25;
  max-width: 55ch;
}
body .site-content .entry-content .wp-element-caption,
body .site-content .entry-content figcaption,
body .site-content .entry-content .wp-block-pullquote cite{
  color: var(--cc-text-faded);
  font-size: 1rem;
  line-height: 1.5;
  margin-top: .5rem;
}

/* Headings targeted by in-page links won't sit under the sticky header */
body .site-content .entry-content :is(h1,h2,h3,h4,h5,h6)[id]{ scroll-margin-top: 100px; }

/* ==========================================================================
   3. Site Header
   ========================================================================== */

.header-band {
    background: var(--cc-bg-primary);
    border-bottom: 1px solid var(--cc-accent-ochre);
    padding-block: var(--s-30);
    margin: 0;
}

.header-band .cc-wrap { padding-inline: var(--s-10); }
.header-inner .wp-block-columns { margin: 0; }
.header-inner .wp-block-column { display: flex; align-items: center; }
.header-col--left { justify-content: flex-start; }
.header-col--center { justify-content: center; }
.header-col--right { justify-content: flex-end; }

/* Logo */
.wp-block-site-logo img{ width: 180px; height: auto; }

/* Nav */
.header-band .wp-block-navigation{ --navigation-layout-justify: center; }
.header-band .wp-block-navigation__container{ gap: var(--s-30); }
.header-band .wp-block-navigation a{
  font-family: var(--cc-font-body);
  font-size: 1rem; /* 20px */
  font-weight: 500;
  text-decoration: none;
}
.header-band .wp-block-navigation a:hover,
.header-band .wp-block-navigation a:focus{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.7rem;
  text-decoration-color: rgba(255,255,255,.85);
}

/* Sticky */
.header-band.header-sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 0 rgba(255,255,255,.12);
}

/* ==========================================================================
   4. Core Components & Layouts
   ========================================================================== */

/* --- Layout Containers --- */
.overlay {
    background-color: var(--cc-bg-primary-alpha);
    padding-inline: clamp(var(--s-20), 6vw, var(--s-120));
    padding-block: 0;
}

.content-container {
    max-width: 72rem; /* 1440px */
    margin-inline: auto;
    background-color: var(--cc-bg-primary);
    border-left: 1px solid var(--cc-accent-alpha);
    border-right: 1px solid var(--cc-accent-alpha);
    border-radius: 0;
    padding: var(--s-40) var(--s-80);
}

/* .content-container > :first-child { margin-top: 0; }
.content-container > :last-child { margin-bottom: 0; } */

/* --- CTA Button (Global) --- */
.wp-block-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cc-accent-ochre);
    color: var(--cc-text-primary);
    border: 0;
    border-radius: 10px;
    font-size: 1.15rem;
    letter-spacing: var(--ls-btn);
    font-weight: 600; /* Set final weight on base state */
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
    background: var(--cc-cta-hover);
    color: var(--cc-text-primary);
    text-decoration: none;
    /* subtle “heavier” effect */
    text-shadow: 0 0 0.01em currentColor, 0 0 0.01em currentColor;
    /* If WebKit support is ok in your audience, uncomment this for crisper effect */
    -webkit-text-stroke: 0.3px currentColor;
}

.invitation .secondary-cta {
  padding: var(--s-30) 0;
}

/* Minimal margin/padding helpers actually used */
.mt-120{ margin-top: var(--s-120); }
.pt-60{  padding-top: var(--s-60); }

/* --- Common Page Components --- */
.chapter-header{ margin-top: var(--s-120); padding-top: var(--s-20); border-top:1px solid rgba(255,255,255,.2); }
.element-bg-img1{ background-image: url('https://consciouscopy.online/wp-content/uploads/2025/08/124922bc-greentech-object-01.png'); background-repeat:no-repeat; background-size:60%; }
.element-bg-img2{ background-image: url('https://consciouscopy.online/wp-content/uploads/2025/08/e94d07b9-greentech-object-02.png'); background-repeat:no-repeat; background-position: top right; background-size:45%; }

/* Definition list grid (Group-based pairs) */
.definition-list-grid {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: var(--s-20) var(--s-10);
    align-items: start;
}
.definition-list-grid p { margin: 0 !important; }
.definition-list-grid p:nth-child(odd) { font-weight: 600; text-align: right; }

.fact-sheet {
    background-color: var(--cc-bg-contrast);
    margin: var(--s-30);
    padding: var(--s-30);
    border-radius: var(--s-10);
    height: 100%;
}

.chapter-header {
    margin-top: var(--s-120);
    padding-top: var(--s-40);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.chapter-header h2 { margin-top: 0.5rem; }

.showcase-block {
    margin-top: var(--s-60);
    padding: var(--s-40);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--s-10);
}

.showcase-block h5 {
    /* This is our new H5 style */
    font-family: var(--cc-font-heading);
    font-weight: 700;
    font-size: 1.2rem; /* 24px */
    margin-top: 2.4rem; /* 48px */
    margin-bottom: 1rem; /* 20px */
}

.rationale-block {
    margin: var(--s-60) 0;
    padding: var(--s-40);
    background-color: var(--cc-bg-contrast);
    border:1px solid rgba(255,255,255,.1);
    border-radius: var(--s-10);
}
.rationale-block h4, 
.rationale-block h5 { text-align: center; margin-bottom: var(--s-40); }

.rationale-block h4 {
    margin-top: 0; /* Remove extra top margin on the main title */
    text-align: center;
}

.rationale-block h5 {
    /* Use H3 styling for these sub-headings to give them presence */
    font-family: var(--cc-font-body);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
    text-decoration: underline;
    text-underline-offset: 0.4rem;
    letter-spacing: 0.075em;
    padding-bottom: var(--s-20);
}

/* --- Invitation Block --- */
.invitation {
    background-color: var(--cc-bg-contrast);
    padding: var(--s-60);
    border-radius: var(--s-10);
    text-align: center;
}
.invitation h2 { margin-top: 0; }

/* ==========================================================================
   5. Site Footer
   ========================================================================== */

.footer {
    background: var(--cc-bg-primary);
    border-top: 1px solid var(--cc-accent-ochre);
    padding-block: var(--s-60);
    margin: 0;
    font-size: 0.9rem;
}
.footer > .wp-block-columns {
    max-width: 72rem;
    margin: 0;
    padding-inline: 2rem;
    align-items: start;
    gap: var(--s-40);
}
.footer .wp-block-column { display: block; text-align: center; }
.footer .stack > * + *{ margin-top: var(--s-20); }
.footer h2,.footer h4,.footer h5{ margin:0; }
.footer h2{ font-size:1.5rem; }
.footer h4{ font-size:1.15rem; }

/* Single visual alignment line across all columns */
.footer .wp-block-columns{ position: relative; }
.footer .wp-block-column{ position: relative; padding-top: var(--s-40); }
.footer{ --footer-sep-offset: 100px; }
.footer .wp-block-column::after{
  content:""; position:absolute; left:0; right:0; top: var(--footer-sep-offset);
  border-top:1px solid rgba(255,255,255,.18);
}
/* Hide individual hr to avoid double lines */
.footer .wp-block-separator{ display:none; }

/* Footer nav (vertical) */
.footer .wp-block-navigation__container{ flex-direction:column; align-items:center; gap: var(--s-10); }
.footer .wp-block-navigation a{
  font-size:1rem; font-weight:500; text-decoration:none;
}
.footer .wp-block-navigation a:hover,
.footer .wp-block-navigation a:focus{
  text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:.3em; text-decoration-color: rgba(255,255,255,.85);
}
.footer .wp-block-button .wp-block-button__link{ border-radius: 10px; }
.footer .wp-block-site-logo img{ width:120px; height:auto; }

/* ==========================================================================
   6. Responsive Styles (Mobile First)
   ========================================================================== */

@media (max-width: 768px) {
    /* --- 6.1: Global Layout & Spacing --- */
    body {
        font-size: 18px; /* Slightly smaller base font for mobile */
    }

    /* FIX: Remove side gutters and borders on mobile for an edge-to-edge feel */
    .content-container {
        padding-inline: 0; /* Remove left/right padding */
        border-left: none;
        border-right: none;
        padding-block: var(--s-40); /* Reduce top/bottom padding */
    }

    /* Mobile nav drawer: stable, dark, no gutter */
    html, body{ overflow-x: hidden; }   /* prevent right-gutter scroll */

    /* --- 6.2: Header & Navigation Fixes --- */

    /* FIX: Remove sticky header functionality on mobile */
    .header-band.header-sticky {
        position: static; /* Un-sticks the header */
        box-shadow: none;
    }

    .header-band .wp-block-site-logo img { width: 140px; }

    /* FIX: Universal mobile menu styling for both header and footer */
    .wp-block-navigation__responsive-container.is-menu-open {
        background: var(--cc-bg-primary); /* Your dark background */
        color: var(--cc-text-primary);
    }

    .wp-block-navigation__responsive-container.is-menu-open a {
        color: var(--cc-text-primary); /* White links */
        font-size: 1.2rem; /* Make tap targets larger */
    }

    /* Style the hamburger and close icons consistently */
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-close {
        color: var(--cc-text-primary);
        border: 1px solid rgba(255, 255, 255, .25);
        padding: .35rem .5rem;
        border-radius: 8px;
    }

    /* FIX: The critical fix for the "white screen" and "side gutter" bug */
    body.is-menu-open {
        overflow-x: hidden;
    }

    /* --- 6.3: Typographic Adjustments --- */

    .entry-content h3{ font-size: 1.5rem; }
    .entry-content h4{ font-size: 1.25rem; }
    .entry-content p{ font-size: 1.125rem; }

    /* FIX: Reduce CTA button text size for mobile */
    .wp-block-button a.wp-block-button__link {
        font-size: 0.9rem !important;
    }

    /* --- 6.4: Component Adjustments --- */

    .definition-list-grid {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .definition-list-grid p:nth-child(odd) {
        text-align: left;
    }

    .footer {
        padding-block: var(--s-30);
    }

    .footer .wp-block-columns{ gap: var(--s-30); }

}

/*
@media (max-width: 768px) {
  .content-container { padding: var(--s-40) var(--s-30); }
  .entry-content h1{ font-size: 2.5rem; }
  .entry-content h2{ font-size: 2rem; }
}
*/

/* ==========================================================================
   7. Animation
   ========================================================================== */

/* Define the animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(1rem); /* Start slightly below the element's position */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply the animation to your H1 */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.2s; /* Optional: Add a delay for a smoother entrance */
}

/* Optional: Target the H1 directly if you don't want a custom class */
/* .entry-title { ... } or .wp-block-heading h1 { ... } depending on the theme */