/*
 * Theme Name:  Bison Child
 * Theme URI:   https://bison.com
 * Description: GeneratePress child theme for Bison custom PHP-templated site.
 * Author:      Vijit Doshi
 * Author URI:  https://bison.in
 * Template:    generatepress
 * Version:     1.0.0
 * Text Domain: Bison
 *
 * FILE ROLE: style.css
 * PURPOSE  : WordPress child theme declaration, CSS custom properties (design tokens),
 *            typographic base, layout utilities, and resets.
 *            All component/section-level styles live in assets/css/main.css.
 *            This file is intentionally lean only global tokens and resets here.
 *
 * =========================================================
 * TABLE OF CONTENTS
 * =========================================================
 * 1. DESIGN TOKENS (CSS Custom Properties)
 *    1a. Color Palette
 *    1b. Typography
 *    1c. Spacing Scale
 *    1d. Layout
 *    1e. Borders & Shadows
 *    1f. Transitions
 * 2. FONT IMPORTS
 * 3. CSS RESET / BASE
 * 4. TYPOGRAPHY BASE
 * 5. LAYOUT UTILITIES
 * 6. GENERATEPRESS OVERRIDES (minimal)
 * =========================================================
 */


/* =========================================================
   1. DESIGN TOKENS — CSS Custom Properties
   ========================================================= */

:root {

    /* -------------------------------------------------
       1a. COLOR PALETTE
       Light / white clean minimal theme
       ------------------------------------------------- */

    /* Brand */
    --ls-color-primary:         #1A1A2E; /* Deep navy — primary actions, headings     */
    --ls-color-primary-hover:   #16213E; /* Darkened navy for hover states             */
    --ls-color-accent:          #E63946; /* Vibrant red — CTAs, highlights, accents    */
    --ls-color-accent-hover:    #C1121F; /* Darkened red for hover                     */
    --ls-color-accent-light:    #FFE8EA; /* Tint of accent — badge backgrounds         */

    /* Neutrals */
    --ls-color-white:           #FFFFFF;
    --ls-color-bg:              #FAFAFA; /* Off-white page background                  */
    --ls-color-bg-alt:          #F4F4F6; /* Subtle section alternation                 */
    --ls-color-border:          #E2E2E8; /* Dividers, card borders                     */

    /* Text */
    --ls-color-text-heading:    #1A1A2E; /* Same as primary for strong headings        */
    --ls-color-text-body:       #3D3D4E; /* Slightly softer dark for body copy         */
    --ls-color-text-muted:      #7A7A90; /* Labels, captions, placeholders             */
    --ls-color-text-on-dark:    #FFFFFF; /* Text placed on dark/primary backgrounds    */

    /* Feedback */
    --ls-color-success:         #2D9B5A;
    --ls-color-warning:         #F59E0B;
    --ls-color-error:           #E63946; /* Reuses accent — intentional                */

    /* -------------------------------------------------
       1b. TYPOGRAPHY
       ------------------------------------------------- */

    /* Font families */
    --ls-font-heading:  'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ls-font-body:     'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
    --ls-font-mono:     'Courier New', Courier, monospace;

    /* Font sizes — fluid type scale (clamp: min | preferred | max) */
    --ls-fs-xs:   clamp(0.75rem,  0.7rem  + 0.2vw, 0.875rem);  /* 12–14px  */
    --ls-fs-sm:   clamp(0.875rem, 0.85rem + 0.2vw, 1rem);      /* 14–16px  */
    --ls-fs-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem); /* 16–18px  */
    --ls-fs-md:   clamp(1.125rem, 1rem    + 0.5vw,  1.375rem); /* 18–22px  */
    --ls-fs-lg:   clamp(1.375rem, 1.2rem  + 0.8vw,  1.75rem);  /* 22–28px  */
    --ls-fs-xl:   clamp(1.75rem,  1.5rem  + 1.2vw,  2.25rem);  /* 28–36px  */
    --ls-fs-2xl:  clamp(2.25rem,  1.8rem  + 2vw,    3rem);     /* 36–48px  */
    --ls-fs-3xl:  clamp(2.75rem,  2rem    + 3vw,    4rem);     /* 44–64px  */
    --ls-fs-4xl:  clamp(3rem,     2.2rem  + 4vw,    5rem);     /* 48–80px  */

    /* Font weights */
    --ls-fw-regular:   400;
    --ls-fw-medium:    500;
    --ls-fw-semibold:  600;
    --ls-fw-bold:      700;
    --ls-fw-extrabold: 800;

    /* Line heights */
    --ls-lh-tight:   1.15; /* Large display headings */
    --ls-lh-heading: 1.3;  /* Section headings        */
    --ls-lh-body:    1.7;  /* Body copy               */
    --ls-lh-loose:   1.9;  /* Captions, small text    */

    /* Letter spacing */
    --ls-ls-tight:  -0.02em;
    --ls-ls-normal:  0em;
    --ls-ls-wide:    0.04em;
    --ls-ls-wider:   0.08em;
    --ls-ls-widest:  0.15em; /* Eyebrow / label text    */

    /* -------------------------------------------------
       1c. SPACING SCALE (8px base grid)
       ------------------------------------------------- */
    --ls-space-1:   0.25rem;  /*  4px  */
    --ls-space-2:   0.5rem;   /*  8px  */
    --ls-space-3:   0.75rem;  /* 12px  */
    --ls-space-4:   1rem;     /* 16px  */
    --ls-space-5:   1.25rem;  /* 20px  */
    --ls-space-6:   1.5rem;   /* 24px  */
    --ls-space-8:   2rem;     /* 32px  */
    --ls-space-10:  2.5rem;   /* 40px  */
    --ls-space-12:  3rem;     /* 48px  */
    --ls-space-16:  4rem;     /* 64px  */
    --ls-space-20:  5rem;     /* 80px  */
    --ls-space-24:  6rem;     /* 96px  */
    --ls-space-32:  8rem;     /* 128px */

    /* Section vertical rhythm */
    --ls-section-py: clamp(4rem, 3rem + 4vw, 8rem); /* 64–128px top/bottom padding */

    /* -------------------------------------------------
       1d. LAYOUT
       ------------------------------------------------- */
    --ls-max-width:       1920px; /* Absolute max container          */
    --ls-container-width: 1440px; /* Content container max-width     */
    --ls-gutter:          20%;    /* Side gutter — matches brief     */

    /*
     * NOTE: --ls-gutter = 20% means on a 1440px screen, each side
     * gets ~288px of padding, leaving ~864px for content.
     * On narrower viewports this scales down automatically.
     * Use .ls-container for the standard content wrapper.
     */

    /* Breakpoints (reference only — used in media queries below) */
    /* --ls-bp-sm:  480px  */
    /* --ls-bp-md:  768px  */
    /* --ls-bp-lg:  1024px */
    /* --ls-bp-xl:  1280px */
    /* --ls-bp-2xl: 1536px */

    /* -------------------------------------------------
       1e. BORDERS & SHADOWS
       ------------------------------------------------- */
    --ls-radius-sm:  4px;
    --ls-radius-md:  8px;
    --ls-radius-lg:  16px;
    --ls-radius-xl:  24px;
    --ls-radius-pill: 999px;

    --ls-border:     1px solid var(--ls-color-border);

    --ls-shadow-xs:  0 1px 3px rgba(26, 26, 46, 0.06);
    --ls-shadow-sm:  0 2px 8px rgba(26, 26, 46, 0.08);
    --ls-shadow-md:  0 4px 20px rgba(26, 26, 46, 0.10);
    --ls-shadow-lg:  0 8px 40px rgba(26, 26, 46, 0.12);
    --ls-shadow-xl:  0 16px 64px rgba(26, 26, 46, 0.15);

    /* -------------------------------------------------
       1f. TRANSITIONS
       ------------------------------------------------- */
    --ls-transition-fast:   150ms ease;
    --ls-transition-base:   250ms ease;
    --ls-transition-slow:   400ms ease;
    --ls-transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* =========================================================
   2. FONT IMPORTS
   Nunito Sans loaded via Google Fonts (enqueued in
   inc/styles-scripts.php — not @imported here to avoid
   render-blocking issues).
   Helvetica Neue is a system font — no import needed.
   ========================================================= */

/*
 * @import for Google Fonts is intentionally omitted here.
 * Fonts are loaded via wp_enqueue_style() with rel="preconnect"
 * and display=swap for optimal LCP performance.
 * See: inc/styles-scripts.php → ls_enqueue_google_fonts()
 */


/* =========================================================
   3. CSS RESET / BASE
   Light opinionated reset on top of browser defaults.
   ========================================================= */

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

html {
    font-size:             100%; /* 16px base — do not change */
    scroll-behavior:       smooth;
    text-size-adjust:      100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust:    100%;
}

body {
    background-color: var(--ls-color-bg);
    color:            var(--ls-color-text-body);
    font-family:      var(--ls-font-body);
    font-size:        var(--ls-fs-base);
    font-weight:      var(--ls-fw-regular);
    line-height:      var(--ls-lh-body);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
    display:   block;
    max-width: 100%;
    height:    auto;
}

a {
    color:           inherit;
    text-decoration: none;
}

a:focus-visible {
    outline:        2px solid var(--ls-color-accent);
    outline-offset: 3px;
    border-radius:  var(--ls-radius-sm);
}

ul,
ol {
    list-style: none;
}

button,
input,
textarea,
select {
    font:         inherit;
    border:       none;
    background:   transparent;
    appearance:   none;
    -webkit-appearance: none;
}

button {
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing:  0;
}

/* Remove default fieldset styling */
fieldset {
    border:  0;
    margin:  0;
    padding: 0;
}

/* Prevent overflow from long words */
p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap:     break-word;
    word-break:        break-word;
    hyphens:           auto;
}


/* =========================================================
   4. TYPOGRAPHY BASE
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--ls-font-heading);
    font-weight:    var(--ls-fw-bold);
    line-height:    var(--ls-lh-heading);
    letter-spacing: var(--ls-ls-tight);
    color:          var(--ls-color-text-heading);
}

h1 { font-size: var(--ls-fs-4xl); line-height: var(--ls-lh-tight); }
h2 { font-size: var(--ls-fs-3xl); }
h3 { font-size: var(--ls-fs-2xl); }
h4 { font-size: var(--ls-fs-xl);  }
h5 { font-size: var(--ls-fs-lg);  font-weight: var(--ls-fw-semibold); }
h6 { font-size: var(--ls-fs-md);  font-weight: var(--ls-fw-semibold); }

p {
    font-size:   var(--ls-fs-base);
    line-height: var(--ls-lh-body);
    color:       var(--ls-color-text-body);
}

/* Eyebrow label — used above section headings */
.ls-eyebrow {
    display:        inline-block;
    font-family:    var(--ls-font-body);
    font-size:      var(--ls-fs-xs);
    font-weight:    var(--ls-fw-bold);
    letter-spacing: var(--ls-ls-widest);
    text-transform: uppercase;
    color:          var(--ls-color-accent);
}

/* Lead / intro paragraph */
.ls-lead {
    font-size:   var(--ls-fs-md);
    line-height: var(--ls-lh-body);
    color:       var(--ls-color-text-body);
    font-weight: var(--ls-fw-regular);
}

/* Muted / caption text */
.ls-muted {
    font-size: var(--ls-fs-sm);
    color:     var(--ls-color-text-muted);
}

/* Strong inline emphasis */
strong, b {
    font-weight: var(--ls-fw-semibold);
}

em, i {
    font-style: italic;
}

/* Inline code */
code {
    font-family:      var(--ls-font-mono);
    font-size:        0.875em;
    background-color: var(--ls-color-bg-alt);
    padding:          0.1em 0.35em;
    border-radius:    var(--ls-radius-sm);
}

/* Horizontal rule */
hr {
    border:     none;
    border-top: var(--ls-border);
    margin:     var(--ls-space-8) 0;
}


/* =========================================================
   5. LAYOUT UTILITIES
   ========================================================= */

/* -------------------------------------------------------
   .ls-container
   Standard content wrapper with 20% side gutter.
   On very narrow viewports (< 600px) gutter reduces to
   a fixed 20px (1.25rem) so content doesn't get crushed.
   ------------------------------------------------------- */
.ls-container {
    width:     100%;
    max-width: var(--ls-max-width);
    margin:    0 auto;
    padding-left:  var(--ls-gutter);
    padding-right: var(--ls-gutter);
}

@media (max-width: 1024px) {
    .ls-container {
        padding-left:  8%;
        padding-right: 8%;
    }
}

@media (max-width: 600px) {
    .ls-container {
        padding-left:  1.25rem;
        padding-right: 1.25rem;
    }
}

/* -------------------------------------------------------
   .ls-section
   Standard section vertical rhythm.
   ------------------------------------------------------- */
.ls-section {
    padding-top:    var(--ls-section-py);
    padding-bottom: var(--ls-section-py);
}

/* Alternate section background */
.ls-section--alt {
    background-color: var(--ls-color-bg-alt);
}

/* Dark section (navy background, light text) */
.ls-section--dark {
    background-color: var(--ls-color-primary);
    color:            var(--ls-color-text-on-dark);
}

.ls-section--dark h1,
.ls-section--dark h2,
.ls-section--dark h3,
.ls-section--dark h4,
.ls-section--dark h5,
.ls-section--dark h6 {
    color: var(--ls-color-text-on-dark);
}

/* -------------------------------------------------------
   Section heading block (eyebrow + title + subtitle)
   Reused across almost every section.
   ------------------------------------------------------- */
.ls-section-header {
    margin-bottom: var(--ls-space-12);
}

.ls-section-header--center {
    text-align: center;
}

.ls-section-header .ls-eyebrow {
    margin-bottom: var(--ls-space-3);
}

.ls-section-header__title {
    margin-bottom: var(--ls-space-4);
}

.ls-section-header__subtitle {
    font-size: var(--ls-fs-md);
    color:     var(--ls-color-text-muted);
    max-width: 640px;
}

.ls-section-header--center .ls-section-header__subtitle {
    margin-left:  auto;
    margin-right: auto;
}

/* -------------------------------------------------------
   Grid helpers
   ------------------------------------------------------- */
.ls-grid {
    display: grid;
    gap:     var(--ls-space-8);
}

.ls-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ls-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ls-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .ls-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .ls-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .ls-grid--2,
    .ls-grid--3,
    .ls-grid--4 { grid-template-columns: 1fr; }
}

/* Flex row helper */
.ls-flex {
    display:     flex;
    align-items: center;
}

.ls-flex--between {
    justify-content: space-between;
}

.ls-flex--center {
    justify-content: center;
}

.ls-flex--gap-4  { gap: var(--ls-space-4); }
.ls-flex--gap-6  { gap: var(--ls-space-6); }
.ls-flex--gap-8  { gap: var(--ls-space-8); }

/* -------------------------------------------------------
   Button system
   ------------------------------------------------------- */

/* Base button */
.ls-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--ls-space-2);
    padding:         0.75em 1.75em;
    font-family:     var(--ls-font-body);
    font-size:       var(--ls-fs-sm);
    font-weight:     var(--ls-fw-semibold);
    letter-spacing:  var(--ls-ls-wide);
    text-transform:  uppercase;
    border-radius:   var(--ls-radius-md);
    border:          2px solid transparent;
    transition:      background-color var(--ls-transition-base),
                     color            var(--ls-transition-base),
                     border-color     var(--ls-transition-base),
                     transform        var(--ls-transition-fast),
                     box-shadow       var(--ls-transition-base);
    cursor:          pointer;
    white-space:     nowrap;
    text-decoration: none;
}

.ls-btn:hover {
    transform: translateY(-1px);
}

.ls-btn:active {
    transform: translateY(0);
}

/* Primary button — accent red */
.ls-btn--primary {
    background-color: var(--ls-color-accent);
    color:            var(--ls-color-white);
    border-color:     var(--ls-color-accent);
}

.ls-btn--primary:hover {
    background-color: var(--ls-color-accent-hover);
    border-color:     var(--ls-color-accent-hover);
    box-shadow:       var(--ls-shadow-md);
    color:            var(--ls-color-white);
}

/* Secondary button — navy outline */
.ls-btn--secondary {
    background-color: transparent;
    color:            var(--ls-color-primary);
    border-color:     var(--ls-color-primary);
}

.ls-btn--secondary:hover {
    background-color: var(--ls-color-primary);
    color:            var(--ls-color-white);
    box-shadow:       var(--ls-shadow-md);
}

/* Ghost button — for dark section backgrounds */
.ls-btn--ghost {
    background-color: transparent;
    color:            var(--ls-color-white);
    border-color:     var(--ls-color-white);
}

.ls-btn--ghost:hover {
    background-color: var(--ls-color-white);
    color:            var(--ls-color-primary);
}

/* Button sizes */
.ls-btn--sm {
    padding:    0.5em 1.25em;
    font-size:  var(--ls-fs-xs);
}

.ls-btn--lg {
    padding:    1em 2.25em;
    font-size:  var(--ls-fs-base);
}

/* -------------------------------------------------------
   Visibility helpers
   ------------------------------------------------------- */
.ls-sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
    border:     0;
}

.ls-hide-mobile  { display: block; }
.ls-show-mobile  { display: none;  }

@media (max-width: 768px) {
    .ls-hide-mobile { display: none;  }
    .ls-show-mobile { display: block; }
}

/* -------------------------------------------------------
   Spacing utility classes (margin helpers)
   ------------------------------------------------------- */
.ls-mt-4  { margin-top:    var(--ls-space-4);  }
.ls-mt-8  { margin-top:    var(--ls-space-8);  }
.ls-mt-12 { margin-top:    var(--ls-space-12); }
.ls-mb-4  { margin-bottom: var(--ls-space-4);  }
.ls-mb-8  { margin-bottom: var(--ls-space-8);  }
.ls-mb-12 { margin-bottom: var(--ls-space-12); }


/* =========================================================
   6. GENERATEPRESS PARENT THEME OVERRIDES
   Only override what conflicts with Bison design.
   Prefix with .ls- or body class to keep specificity low.
   ========================================================= */

/* Ensure GP doesn't cap our max-width at 1200px */
.site {
    max-width: 100% !important;
}

/* GP content width override */
.container,
.inside-article,
.inside-right-sidebar,
.inside-left-sidebar {
    max-width: none;
}

/* Neutralise GP body background so ours takes over */
body.custom-background {
    background-color: var(--ls-color-bg);
}

/* GP default link colour override */
a {
    color: var(--ls-color-primary);
    transition: color var(--ls-transition-fast);
}

a:hover {
    color: var(--ls-color-accent);
}

/* Remove GP default entry header bottom margin when using custom templates */
.page-template .entry-header {
    display: none;
}

/* Ensure featured images in GP don't add unwanted margins */
.post-image {
    margin: 0;
}

/* Remove GP's default padding on custom full-width templates */
.ls-page .site-content,
.page-template .site-content,
.home .site-content {
    padding: 0 !important;
}


/* =========================================================
   UNIVERSAL FULL-WIDTH TEMPLATE RESET
   Permanently stops GeneratePress from adding rogue margins
   or padding to any structural wrappers on custom pages.
   ========================================================= */
.page-template .site-header,
.home .site-header,
.page-template .site-content,
.home .site-content,
.page-template .site-main,
.home .site-main,
.page-template .inside-article,
.home .inside-article,
.page-template .entry-content,
.home .entry-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

/* Fix WP Admin Bar pushing 100vh elements off-screen */
html[style*="margin-top"] {
    overflow-x: hidden;
}


/*
 * END OF style.css
 * =====================================================
 * Do not add component or section styles here.
 * All component styles go in: assets/css/main.css
 * =====================================================
 */