/* ==========================================================================
   APPA BOK — Custom Styles (Designer Overrides)
   ==========================================================================

   THIS IS YOUR FILE TO EDIT.

   It loads after the main bok.css stylesheet, so anything you put here
   will override the defaults. You never need to touch bok.css.

   The fastest way to change the look of the site is to override the
   CSS custom properties (variables) in the :root block below. Uncomment
   any line and change its value. The change will ripple everywhere that
   variable is used.

   For more targeted changes, scroll down to the section-specific overrides
   and uncomment/edit the examples.

   TIPS:
   • Preview changes using your browser's DevTools (F12 → Elements → Styles)
     before committing them here.
   • Colors can be hex (#2D83FE), rgb(45,131,254), or hsl(215, 99%, 59%).
   • To change fonts, update --font-family and the Google Fonts <link> in
     class-bok-templates.php (or add a @import at the top of this file).
   ========================================================================== */


/* --------------------------------------------------------------------------
   DESIGN TOKENS — Uncomment and change any variable to rebrand site-wide
   -------------------------------------------------------------------------- */

/*
:root {
*/
    /* ── Brand Colors ── */
    /* --blue:         #2D83FE; */
    /* --navy:         #3252A7; */
    /* --orange:       #FD7E01; */
    /* --dark-orange:  #DB5311; */
    /* --charcoal:     #3A3838; */

    /* ── Typography ── */
    /* --font-family:     'Roboto', sans-serif; */
    /* --font-size-body:  16px; */
    /* --line-height:     1.6; */

    /* ── Header ── */
    /* --header-bg:       var(--navy); */
    /* --header-height:   72px; */

    /* ── Hero Section ── */
    /* --hero-gradient:   linear-gradient(135deg, var(--navy) 0%, #1a3680 40%, var(--blue) 100%); */
    /* --hero-title-size: 48px; */

    /* ── Chapter Page ── */
    /* --sidebar-width:       280px; */
    /* --sidebar-bg:          var(--light-gray); */
    /* --content-max-width:   820px; */
    /* --chapter-title-size:  36px; */
    /* --chapter-body-size:   16px; */
    /* --chapter-line-height: 1.8; */

    /* ── Member Gate Card ── */
    /* --gate-bg:          linear-gradient(135deg, #F0F4FF 0%, #FFF7ED 100%); */
    /* --gate-btn-bg:      var(--blue); */
    /* --gate-btn-color:   var(--white); */
    /* --gate-btn-radius:  8px; */

    /* ── Card Styling ── */
    /* --card-radius:     12px; */

    /* ── Footer ── */
    /* --footer-bg:       var(--charcoal); */
/*
}
*/


/* --------------------------------------------------------------------------
   EXAMPLE: Change the header background to a darker navy
   -------------------------------------------------------------------------- */

/*
header.bok-header {
    background: #1B2A5C;
}
*/


/* --------------------------------------------------------------------------
   EXAMPLE: Make the hero section taller with different gradient
   -------------------------------------------------------------------------- */

/*
.hero {
    padding: 120px 48px 100px;
    background: linear-gradient(135deg, #1B2A5C 0%, #2D83FE 100%);
}
*/


/* --------------------------------------------------------------------------
   EXAMPLE: Change the "Sign In to Read" button to orange
   -------------------------------------------------------------------------- */

/*
.bok-member-gate .gate-btn {
    background: var(--orange);
}
*/


/* --------------------------------------------------------------------------
   EXAMPLE: Wider chapter content area
   -------------------------------------------------------------------------- */

/*
.chapter-content {
    max-width: 960px;
    padding: 48px 80px 80px;
}
*/


/* --------------------------------------------------------------------------
   EXAMPLE: Custom link color in chapter body
   -------------------------------------------------------------------------- */

/*
.chapter-body a {
    color: var(--navy);
}
*/


/* --------------------------------------------------------------------------
   EXAMPLE: Rounded images in chapter content
   -------------------------------------------------------------------------- */

/*
.chapter-body img {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
*/


/* --------------------------------------------------------------------------
   YOUR CUSTOMIZATIONS BELOW
   -------------------------------------------------------------------------- */