/* =====================================================================
   ANOP MANDAL — CORE STYLESHEET
   Palette : deep forest green  +  dark white (ivory)  +  gold
   ---------------------------------------------------------------------
   HOW THE COLOUR SYSTEM WORKS (read this before editing colours)

   1. Every colour lives in the :root block below — nothing else in the
      project should hard-code a hex value. Change a token here and the
      whole site follows.

   2. Two kinds of surface exist:
        LIGHT surfaces (page, cards, forms)   -> DARK text
        DARK  surfaces (header, hero, footer,
                        stats band, book cards…) -> DARK-WHITE text
      Dark surfaces are listed once, in the "DARK SURFACE SCOPE" rule
      just after :root. Inside them the tokens --accent-ink, --heading-ink,
      --link-hover and --focus-ring automatically switch to the variants
      that read on green, so a rule such as  `color: var(--accent-ink)`
      is correct on BOTH kinds of surface with no extra overrides.
      A light card that sits INSIDE a dark band (e.g. the article cards
      on the green "Latest Updates" band) is listed in the "LIGHT
      SURFACE SCOPE" rule, which switches the tokens back.

   3. Gold is used two ways, never mixed up:
        gold FILLS / borders / glows   -> --gold-500 / --brand-primary
        gold TEXT on a light surface   -> --gold-deep (via --accent-ink)
        gold TEXT on a dark  surface   -> --gold-400 (via --accent-ink)
        text ON a gold fill            -> --on-gold (deep green)

   Load order (see resources/views/layouts/user.blade.php):
     all.min -> bootstrap -> style.css -> responsive.css -> owl ->
     added-sections.css -> gallery / books / book-reader / blog ->
     global-fixes.css -> preloader.css -> typography.css ->
     premium-theme.css (last: polish + hover text-shine only)

   Bootstrap 5.0.2 is loaded first and hard-codes blue links, blue
   .btn-primary, blue focus rings and a blue pagination. Every one of
   those is neutralised in this file, so no blue can leak into the theme.
   ===================================================================== */

/* ========================================================= ROOT TOKENS ========================================================= */
:root {
    /* ------------------------------------------------ PALETTE ------------------------------------------------ */
    --green-950: #06190F;
    --green-900: #0A2A1C;
    --green-800: #0F3A28;
    --green-700: #175238;
    --green-600: #1F6B49;

    --ivory-100: #FBF9F2;   /* cards / raised surfaces  */
    --ivory-200: #F4F1E7;   /* page background          */
    --ivory-300: #EAE6D6;   /* alternate section band   */
    --ivory-400: #DDD8C4;   /* strong hairlines         */

    --gold-300: #F0D98A;
    --gold-400: #E6C766;    /* gold text on green       */
    --gold-500: #D4AF37;    /* signature gold (fills)   */
    --gold-600: #B8922A;
    --gold-deep: #7A5B08;   /* gold text on ivory (5.6:1) */

    --on-dark: #F4F0E2;                          /* dark-white text on green   */
    --on-dark-muted: rgba(244, 240, 226, 0.84);
    --on-dark-dim: rgba(244, 240, 226, 0.68);
    --on-gold: #0A2A1C;                          /* text on a gold fill        */

    /* ------------------------------------------------ SEMANTIC (context aware) ------------------------------------------------ */
    --accent-ink: var(--gold-deep);    /* gold text; switches to gold-400 on dark surfaces */
    --heading-ink: var(--green-800);   /* headings;  switches to dark-white on dark surfaces */
    --link-hover: var(--green-700);    /* link hover; switches to gold-300 on dark surfaces  */
    --focus-ring: var(--green-600);    /* keyboard focus; switches to gold-400 on dark    */
    --shine-rgb: 184, 146, 42;         /* glow colour for the hover text-shine effect     */

    /* form + feedback colours (light surfaces) */
    --field-bg: #FFFEF9;
    --placeholder: #66766C;
    --success-ink: #14532D;
    --success-bg: #E6F1E8;
    --success-line: #B7D9BF;
    --danger-ink: #8E1F1F;
    --danger-bg: #FBEBE9;
    --danger-line: #F0C6C2;
    --danger-accent: #B3261E;          /* required-star / invalid border */

    /* ------------------------------------------------ LEGACY TOKEN NAMES ------------------------------------------------
       Kept so every existing rule in every stylesheet keeps working. */
    --brand-primary: var(--gold-500);
    --brand-primary-dark: var(--gold-deep);
    --brand-primary-light: rgba(212, 175, 55, 0.18);

    --color-black: var(--green-900);
    --color-charcoal: var(--green-800);
    --color-gray: #4B5F55;
    --color-white: var(--ivory-100);
    --color-light-gray: var(--ivory-200);

    --text-primary: #10281E;
    --text-secondary: #22392F;
    --text-muted: #4B5F55;
    --text-white: var(--on-dark);
    --text-gold: var(--gold-400);

    --bg-white: var(--ivory-100);
    --bg-light: var(--ivory-200);
    --bg-charcoal: var(--green-800);
    --bg-black: var(--green-900);
    --bg-gold-light: #F0E8CC;          /* soft gold tint (icon discs, callouts) */
    --bg-cover: #F6F2E3;               /* mat behind book covers                */

    --border-color: #D5CFB6;
    --border-light: #E4DFCB;
    --border-dark: var(--green-800);
    --border-gold: var(--gold-500);

    /* ------------------------------------------------ SHADOW / OVERLAY ------------------------------------------------ */
    --shadow-header: 0 6px 24px rgba(6, 25, 15, 0.10);
    --shadow-sidebar: -10px 0 40px rgba(6, 25, 15, 0.35);
    --shadow-button: 0 8px 20px rgba(212, 175, 55, 0.30);
    --shadow-gold: 0 6px 18px rgba(184, 146, 42, 0.20);
    --shadow-card: 0 8px 25px rgba(6, 25, 15, 0.08);
    --shadow-card-hover: 0 18px 38px rgba(6, 25, 15, 0.16);
    --overlay-color: rgba(6, 25, 15, 0.70);

    /* ------------------------------------------------ TYPOGRAPHY ------------------------------------------------
       Fonts are loaded by the <link> in layouts/user.blade.php */
    --font-display: "Playfair Display", "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
    --font-body: "Outfit", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-primary: var(--font-body);
    --font-secondary: var(--font-display);
    --font-size-nav: 15px;
    --font-size-mobile-nav: 16px;
    --font-size-button: 14px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ------------------------------------------------ LAYOUT ------------------------------------------------ */
    --header-height: 118px;
    --header-height-scrolled: 92px;
    --container-width: 1440px;
    --container-padding: 50px;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-round: 50%;

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-sidebar: 0.45s cubic-bezier(0.77, 0, 0.175, 1);

    /* ------------------------------------------------ BOOTSTRAP 5 BRIDGE ------------------------------------------------
       Bootstrap reads these for its own components (pagination, forms…),
       so they follow the brand instead of Bootstrap's default blue. */
    --bs-font-sans-serif: var(--font-body);
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--text-secondary);
    --bs-body-bg: var(--ivory-200);
    --bs-primary: var(--gold-500);
    --bs-link-color: var(--gold-deep);
}

/* ========================================================= DARK SURFACE SCOPE =========================================================
   Every element that has a deep-green background is listed here.
   Text on them is dark-white; gold accents and the focus ring switch to
   the bright variants that stay readable on green. */
.header,
.mobile-sidebar,
.am-hero,
.page-hero,
.am-news-header,
.am-book-content,
.articles-section,
.stats-section,
.contact-social-card,
.blog-sidebar-cta,
.site-footer,
.site-preloader,
.book-reader,
.am-lightbox {
    --accent-ink: var(--gold-400);
    --heading-ink: var(--on-dark);
    --link-hover: var(--gold-300);
    --focus-ring: var(--gold-400);
    --shine-rgb: 246, 218, 130;
    color: var(--on-dark);
}

/* ========================================================= LIGHT SURFACE SCOPE =========================================================
   Light panels that sit INSIDE a dark surface (the article cards on the
   green articles band, the empty-state box, the reader settings drawer)
   switch the tokens back so gold text and headings stay readable. */
.article-card,
.book-empty-state,
.reader-settings-panel {
    --accent-ink: var(--gold-deep);
    --heading-ink: var(--green-800);
    --link-hover: var(--green-700);
    --focus-ring: var(--green-600);
    --shine-rgb: 184, 146, 42;
    color: var(--text-primary);
}

/* ========================================================= BASE =========================================================
   Bootstrap 5.0.2 paints every <a> blue (#0d6efd) with a darker blue hover.
   These two rules make links follow the palette everywhere; any component
   that sets its own colour (nav, buttons, cards…) still wins because its
   selector is more specific. */
.site-header *, .mobile-sidebar *, .sidebar-overlay {
    box-sizing: border-box;
}

html {
    scroll-padding-top: 100px;
}

body {
    background-color: var(--ivory-200);
    color: var(--text-secondary);
}

a {
    color: var(--accent-ink);
}

a:hover {
    color: var(--link-hover);
}

/* ========================================================= HEADER =========================================================
   .header is the sticky dark-green bar. (It was previously only .site-header
   that carried `position: sticky`, inside a wrapper exactly as tall as itself,
   which can never stick — so the bar scrolled away. Making the outer wrapper
   the sticky element is what the "Sticky header" JS in custom.js intended.) */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #0A2A1C;                    /* literal fallback for engines without var() */
    background-color: var(--green-900);
    border-bottom: 1px solid rgba(212, 175, 55, 0.34);
    transition: box-shadow var(--transition-normal);
}

/* soft shadow appears once the page has scrolled (class toggled by custom.js) */
.header:has(.site-header.scrolled) {
    box-shadow: 0 10px 30px rgba(6, 25, 15, 0.38);
}

.site-header {
    position: relative;
    width: 100%;
    height: var(--header-height);
    transition: height var(--transition-normal);
}

/* Compact height after scrolling. The bar stays dark green — it is NOT
   switched to white, because nav text is dark-white on green. */
.site-header.scrolled {
    height: 92px;                                  /* fallback */
    height: var(--header-height-scrolled);
}
.latest-news-title {
    color: #F4F0E2 !important;
}

.header-container {
    width: 100%;
    max-width: var(--container-width);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ========================================================= BRAND / LOGO ========================================================= */
.brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.header-logo {
    display: block;
    width: 100px;
    max-height: 96px;
    padding: 10px;
    height: auto;
    object-fit: contain;
    transition: transform var(--transition-normal), filter var(--transition-normal), max-height var(--transition-normal);
}

.brand:hover .header-logo {
    transform: scale(1.03);
    filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.35));
}

/* Desktop only — tablet/mobile widths are set in responsive.css */
@media (min-width: 992px) {
    .site-header:not(.scrolled) .header-logo {
        width: 130px;
        max-height: 119px;
    }
    .site-header.scrolled .header-logo {
        width: 120px;
        max-height: 78px;
    }
}

/* ========================================================= NAVIGATION ========================================================= */
.main-nav {
    display: block;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-item {
    position: relative;
    margin: 0;
    padding: 0;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
    color: var(--on-dark);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    transition: color var(--transition-normal), transform var(--transition-normal);
}

.nav-link:hover {
    color: var(--gold-400);
    transform: translateY(-2px);
}

/* gold underline */
.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 0;
    height: 2px;
    background: var(--gold-500);
    border-radius: 10px;
    transform: translateX(-50%);
    transition: width var(--transition-normal), box-shadow var(--transition-normal);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.55);
}

.nav-link.active {
    color: var(--gold-400);
    font-weight: var(--font-weight-semibold);
}

/* ========================================================= NAV CTA BUTTON (gold) ========================================================= */
.nav-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 55%, var(--gold-600) 100%);
    color: var(--on-gold);
    border: 1px solid rgba(255, 244, 200, 0.35);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), filter var(--transition-normal);
}

/* light sweep */
.nav-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transition: left 0.55s ease;
}

.nav-cta:hover {
    color: var(--on-gold);
    transform: translateY(-2px);
    box-shadow: var(--shadow-button);
    filter: brightness(1.06);
}

.nav-cta:hover::before {
    left: 100%;
}

/* ========================================================= MOBILE MENU BUTTON ========================================================= */
.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 8px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(244, 240, 226, 0.06);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.menu-toggle:hover {
    background: var(--brand-primary-light);
    border-color: var(--gold-500);
}

/* Hamburger bars: dark-white on the green header, at every scroll state.
   (literal fallback first — some old Android WebViews ignore var()) */
.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #F4F0E2;
    background: var(--on-dark);
    border-radius: 10px;
    transition: transform var(--transition-normal), opacity var(--transition-normal), background-color var(--transition-normal);
}

.menu-toggle:hover span,
.menu-toggle.active span {
    background: var(--gold-400);
}

/* Hamburger -> X */
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ========================================================= BOOKS DROPDOWN (desktop) ========================================================= */
.nav-dropdown {
    position: relative;
}

.nav-arrow {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    color: currentColor;
    transition: transform var(--transition-normal), color var(--transition-normal);
}

.nav-submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    min-width: 230px;
    padding: 8px;
    margin: 0;
    list-style: none;
    background: var(--green-800);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-top: 3px solid var(--gold-500);
    box-shadow: 0 18px 44px rgba(6, 25, 15, 0.45);
    border-radius: 0 0 10px 10px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
    z-index: 1000;
}

/* little pointer on top */
.nav-submenu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 14px;
    height: 14px;
    background: var(--green-800);
    border-left: 1px solid rgba(212, 175, 55, 0.35);
    border-top: 1px solid var(--gold-500);
    transform: translateX(-50%) rotate(45deg);
}

/* hover-bridge so the menu doesn't close while the pointer crosses the gap */
.nav-submenu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.nav-dropdown:hover .nav-arrow,
.nav-dropdown:focus-within .nav-arrow {
    transform: rotate(180deg);
    color: var(--gold-400);
}

.nav-submenu li {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.nav-submenu li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 14px;
    color: var(--on-dark);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast), padding-left var(--transition-fast);
}

.nav-submenu li a:hover {
    color: var(--gold-400);
    background: rgba(212, 175, 55, 0.14);
    padding-left: 20px;
}

.nav-submenu li a.active {
    color: var(--gold-400);
    background: rgba(212, 175, 55, 0.2);
    font-weight: var(--font-weight-semibold);
}

.nav-submenu li a i {
    font-style: normal;
    color: var(--gold-400);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.nav-submenu li a:hover i,
.nav-submenu li a.active i {
    opacity: 1;
    transform: translateX(0);
}

/* ========================================================= MOBILE SIDEBAR ========================================================= */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: var(--overlay-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    width: min(360px, 88%);
    height: 100vh;
    height: 100dvh;                                /* mobile browsers: exclude the collapsing URL bar */
    display: flex;
    flex-direction: column;
    background: var(--green-900);
    border-left: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: var(--shadow-sidebar);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition-sidebar), visibility var(--transition-sidebar);
}

.mobile-sidebar.active {
    transform: translateX(0);
    visibility: visible;
}

.sidebar-header {
    min-height: 96px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(212, 175, 55, 0.28);
}

.sidebar-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.sidebar-logo {
    display: block;
    width: 120px;
    padding: 10px;
    height: auto;
    max-height: 82px;
    object-fit: contain;
    transition: transform var(--transition-normal), filter var(--transition-normal);
}

.sidebar-brand:hover .sidebar-logo {
    transform: scale(1.02);
    filter: drop-shadow(0 4px 10px rgba(212, 175, 55, 0.35));
}

.sidebar-close {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: var(--radius-round);
    background: rgba(244, 240, 226, 0.06);
    cursor: pointer;
    transition: background-color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

.sidebar-close:hover {
    background: var(--gold-500);
    border-color: var(--gold-500);
    transform: rotate(90deg);
    box-shadow: var(--shadow-button);
}

.sidebar-close span {
    position: absolute;
    width: 19px;
    height: 2px;
    background: var(--on-dark);
    border-radius: 10px;
    transition: background-color var(--transition-normal);
}

.sidebar-close:hover span {
    background: var(--on-gold);
}

.sidebar-close span:first-child { transform: rotate(45deg); }
.sidebar-close span:last-child  { transform: rotate(-45deg); }

.sidebar-nav {
    display: block;
    padding: 24px 20px;
}

.sidebar-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-item {
    margin: 0;
    padding: 0;
}

.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 16px;
    color: var(--on-dark);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: var(--font-size-mobile-nav);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: color var(--transition-normal), background-color var(--transition-normal), padding-left var(--transition-normal), box-shadow var(--transition-normal);
}

/* gold active indicator */
.sidebar-link::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 3px;
    background: var(--gold-500);
    border-radius: 0 5px 5px 0;
    transform: scaleY(0);
    transition: transform var(--transition-normal);
}

.sidebar-link:hover {
    color: var(--gold-400);
    background: rgba(212, 175, 55, 0.12);
    padding-left: 22px;
    box-shadow: inset 3px 0 0 var(--gold-500);
}

.sidebar-link.active {
    color: var(--gold-400);
    background: rgba(212, 175, 55, 0.16);
    font-weight: var(--font-weight-semibold);
    box-shadow: inset 3px 0 0 var(--gold-500);
}

.sidebar-link.active::before {
    transform: scaleY(1);
}

.sidebar-arrow {
    color: var(--gold-400);
    font-size: 20px;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.sidebar-link:hover .sidebar-arrow,
.sidebar-link.active .sidebar-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ---------------- "Books" accordion (mobile) ---------------- */
.sidebar-dropdown-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: inherit;
    font-size: var(--font-size-mobile-nav);
    font-weight: var(--font-weight-medium);
    text-align: left;
}

/* The chevron must always show: touch screens have no :hover to reveal it. */
.sidebar-dropdown-toggle .sidebar-arrow {
    opacity: 1;
    transform: none;
    font-size: 18px;
    line-height: 1;
    transition: transform var(--transition-normal), color var(--transition-normal);
}

.sidebar-dropdown.active .sidebar-dropdown-toggle .sidebar-arrow {
    transform: rotate(180deg);
    color: var(--gold-400);
}

.sidebar-submenu {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

.sidebar-dropdown.active .sidebar-submenu {
    max-height: 300px;
    padding: 5px 0 8px;
    opacity: 1;
}

.sidebar-submenu li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 15px 11px 35px;
    color: var(--on-dark-muted);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 14px;
    border-left: 2px solid transparent;
    transition: color var(--transition-fast), background-color var(--transition-fast), padding-left var(--transition-fast), border-color var(--transition-fast);
}

.sidebar-submenu li a:hover,
.sidebar-submenu li a.active {
    color: var(--gold-400);
    background: rgba(212, 175, 55, 0.12);
    border-left-color: var(--gold-500);
}

.sidebar-submenu li a:hover {
    padding-left: 42px;
}

.sidebar-submenu li a.active {
    font-weight: var(--font-weight-semibold);
}

.sidebar-submenu li a span:last-child {
    color: var(--gold-400);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.sidebar-submenu li a:hover span:last-child,
.sidebar-submenu li a.active span:last-child {
    opacity: 1;
    transform: translateX(0);
}

/* ---------------- Sidebar footer CTA ---------------- */
.sidebar-footer {
    margin-top: auto;
    padding: 20px 24px 30px;
    border-top: 1px solid rgba(212, 175, 55, 0.28);
}

.sidebar-cta {
    position: relative;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 55%, var(--gold-600) 100%);
    color: var(--on-gold);
    border: 1px solid rgba(255, 244, 200, 0.35);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), filter var(--transition-normal);
}

.sidebar-cta:hover {
    color: var(--on-gold);
    transform: translateY(-2px);
    box-shadow: var(--shadow-button);
    filter: brightness(1.06);
}

/* ========================================================= BODY MENU LOCK ========================================================= */
body.menu-open {
    overflow: hidden;
}

/* ========================================================= BUTTON (gold) =========================================================
   Text on the gold fill is deep green (--on-gold, 7:1+). This block also
   neutralises Bootstrap 5.0.2's own `.btn-primary` (blue fill, blue border,
   blue focus ring) which otherwise bleeds through on the border and on
   :hover / :focus / :active, because the site uses the class on its own. */
.btn-primary,
.btn-primary:link,
.btn-primary:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    color: var(--on-gold);
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 55%, var(--gold-600) 100%);
    border: 1px solid rgba(122, 91, 8, 0.38);          /* keeps the edge visible on ivory */
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-button);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), filter var(--transition-normal);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: var(--on-gold);
    background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-400) 55%, var(--gold-500) 100%);
    border-color: rgba(122, 91, 8, 0.55);
    box-shadow: 0 12px 26px rgba(212, 175, 55, 0.42);
    transform: translateY(-2px);
}

.btn-primary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.btn-primary:disabled,
.btn-primary.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-arrow {
    font-size: 14px;
    line-height: 1;
}

/* ========================================================= BOOKS + LATEST NEWS SECTION ========================================================= */
.am-news-section {
    padding: 70px 0 50px;
    background: var(--ivory-200);
}

/* ========================================================= BOOK CARD ========================================================= */
.am-book-card {
    display: block;
    height: 100%;
    overflow: hidden;
    background: var(--ivory-100);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-gold);
    text-decoration: none;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.am-book-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--gold-500);
}

/* ========================================================= BOOK IMAGE ========================================================= */
.am-book-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 310px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-cover);
}

.am-book-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition-normal);
}

.am-book-card:hover .am-book-image img {
    transform: scale(1.04);
}

/* ========================================================= BOOK CONTENT (dark bar under the cover) ========================================================= */
.am-book-content {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 135px;
    padding: 22px 26px;
    border-top: 3px solid var(--gold-500);
}

.am-book-card-hindi .am-book-content {
    background: linear-gradient(135deg, var(--green-700) 0%, var(--green-800) 100%);
}

.am-book-card-english .am-book-content {
    background: linear-gradient(135deg, var(--green-800) 0%, var(--green-950) 100%);
}

/* ========================================================= BOOK ICON ========================================================= */
.am-book-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 17px;
    border-radius: var(--radius-round);
    background: rgba(212, 175, 55, 0.16);
    border: 1px solid rgba(230, 199, 102, 0.55);
    color: var(--gold-400);
    font-size: 25px;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.am-book-card:hover .am-book-icon {
    background: rgba(212, 175, 55, 0.28);
    transform: scale(1.04);
}

/* ========================================================= BOOK INFORMATION ========================================================= */
.am-book-info {
    min-width: 0;
    padding-right: 55px;
}

.am-book-info h3 {
    margin: 0 0 6px;
    color: var(--on-dark);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

.am-book-info p {
    margin: 0;
    color: var(--on-dark-muted);
    font-family: var(--font-primary);
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
}

/* ========================================================= BOOK ARROW ========================================================= */
.am-round-arrow {
    position: absolute;
    top: 50%;
    right: 25px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-round);
    background: var(--gold-500);
    color: var(--on-gold);
    font-size: 18px;
    transform: translateY(-50%);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.am-book-card:hover .am-round-arrow {
    background: var(--gold-400);
    transform: translateY(-50%) translateX(4px);
}

/* ========================================================= LATEST NEWS CARD ========================================================= */
.am-latest-news {
    height: 100%;
    overflow: hidden;
    background: var(--ivory-100);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-gold);
}

/* ========================================================= LATEST NEWS HEADER ========================================================= */
.am-news-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 106px;
    padding: 20px 25px;
    background: linear-gradient(135deg, var(--green-700) 0%, var(--green-800) 100%);
    border-bottom: 3px solid var(--gold-500);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Curved bottom (same colour as the card body it melts into) */
.am-news-header::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -17px;
    height: 34px;
    content: "";
    background: var(--ivory-100);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* ========================================================= NEWS TITLE ========================================================= */
.am-news-title-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
}

.am-news-header-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-400);
    font-size: 27px;
}

.am-news-header h2 {
    margin: 0;
    color: var(--on-dark);
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

/* ========================================================= NEWS HEADER ARROW ========================================================= */
.am-news-header-arrow {
    position: relative;
    z-index: 3;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-round);
    background: var(--gold-500);
    color: var(--on-gold);
    font-size: 20px;
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.am-news-header-arrow:hover {
    background: var(--gold-400);
    color: var(--on-gold);
    transform: translateX(4px);
}

/* ========================================================= NEWS LIST ========================================================= */
.am-news-list {
    position: relative;
    z-index: 4;
    padding: 20px 26px 10px;
}

/* ========================================================= NEWS ITEM ========================================================= */
.am-news-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 14px;
    padding: 19px 0;
    text-decoration: none;
}

.am-news-item + .am-news-item {
    border-top: 1px solid var(--border-light);
}

/* ========================================================= NEWS CALENDAR ICON ========================================================= */
.am-news-date-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-round);
    background: var(--bg-gold-light);
    color: var(--gold-deep);
    font-size: 18px;
}

/* ========================================================= NEWS CONTENT ========================================================= */
.am-news-item-content {
    min-width: 0;
}

.am-news-date {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-family: var(--font-primary);
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
}

.am-news-item h3 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.55;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color var(--transition-fast);
}

.am-news-item:hover h3 {
    color: var(--green-600);
}

/* ========================================================= NEWS ARROW ========================================================= */
.am-news-arrow {
    color: var(--gold-deep);
    font-size: 16px;
    transition: transform var(--transition-fast);
}

.am-news-item:hover .am-news-arrow {
    transform: translateX(4px);
}

/* ========================================================= SECTION HEADING (icon + title between gold rules) ========================================================= */
.am-section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 65px;
}

.am-heading-line {
    width: 52px;
    height: 2px;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0), var(--gold-500));
}

.am-heading-line:last-child {
    background: linear-gradient(270deg, rgba(212, 175, 55, 0), var(--gold-500));
}

.am-heading-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-round);
    background: var(--bg-gold-light);
    border: 1px solid rgba(184, 146, 42, 0.45);
    color: var(--accent-ink);
    font-size: 24px;
}

.am-section-heading h2 {
    margin: 0;
    color: var(--heading-ink);
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

/* Optional accent word inside a heading, e.g. <h2>Latest <span>Insights</span></h2> */
.am-section-heading h2 span {
    color: var(--accent-ink);
}

/* ===================================================== ABOUT SECTION ===================================================== */
.about-section {
    position: relative;
    overflow: hidden;
    padding: 80px 0 65px;
    background: var(--ivory-100);
}

/* Decorative corner rings */
.about-section::before,
.about-section::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    opacity: 0.6;
    pointer-events: none;
    background-image: radial-gradient(ellipse at center, transparent 45%, var(--ivory-400) 46%, transparent 48%);
}

.about-section::before {
    top: -50px;
    left: -60px;
    transform: rotate(-20deg);
}

.about-section::after {
    right: -60px;
    bottom: -50px;
    transform: rotate(20deg);
}

/* ===================================================== ABOUT GRID ===================================================== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr 0.75fr;
    align-items: center;
    gap: 45px;
}

/* ===================================================== SECTION LABEL ===================================================== */
.section-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    color: var(--accent-ink);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-label::before {
    content: "";
    width: 38px;
    height: 2px;
    flex-shrink: 0;
    background: var(--gold-500);
}

/* ===================================================== ABOUT CONTENT ===================================================== */
.about-content h2 {
    margin-bottom: 18px;
    color: var(--heading-ink);
    font-family: var(--font-display);
    font-size: clamp(42px, 4vw, 58px);
    font-weight: 700;
    line-height: 1.05;
}

.about-content h2 span {
    display: block;
    color: var(--accent-ink);
    font-size: 32px;
    font-weight: 600;
    line-height: 0.9;
}

.about-description {
    max-width: 520px;
    margin-bottom: 28px;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.6;
}

/* ===================================================== ABOUT IMAGE ===================================================== */
.about-image {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-image::before {
    content: "";
    position: absolute;
    inset: 30px 15px 35px;
    z-index: 0;
    background: radial-gradient(ellipse, var(--bg-gold-light) 0%, rgba(240, 232, 204, 0) 70%);
}

.about-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 570px;
    object-fit: contain;
    filter: drop-shadow(0 15px 20px rgba(6, 25, 15, 0.12));
}

/* ===================================================== QUOTE ===================================================== */
.about-quote {
    position: relative;
    padding-left: 25px;
    border-left: 2px solid var(--gold-500);
}

.quote-mark {
    margin-bottom: 18px;
    color: var(--accent-ink);
    font-family: Georgia, serif;
    font-size: 65px;
    line-height: 0.7;
}

.about-quote blockquote {
    color: var(--green-800);
    font-family: var(--font-display);
    font-size: 21px;
    font-style: italic;
    line-height: 1.65;
}

.quote-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.quote-decoration::before,
.quote-decoration::after {
    content: "";
    width: 50px;
    height: 1px;
    background: var(--gold-500);
}

.quote-decoration span {
    color: var(--accent-ink);
    font-size: 25px;
}

/* ===================================================== ARTICLES SECTION (dark green band) ===================================================== */
.articles-section {
    position: relative;
    overflow: hidden;
    padding: 42px 0 75px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.14), transparent 55%),
        var(--green-900);
}

.articles-section::before {
    content: "";
    position: absolute;
    left: -10%;
    bottom: -170px;
    width: 120%;
    height: 320px;
    background: rgba(244, 240, 226, 0.03);
    border-radius: 50% 50% 0 0;
    transform: rotate(-3deg);
    pointer-events: none;
}

/* ===================================================== ARTICLE HEADER ===================================================== */
.articles-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 22px;
}

.articles-title {
    margin-top: 2px;
    color: var(--heading-ink);
    font-family: var(--font-display);
    font-size: clamp(34px, 3.2vw, 45px);
    line-height: 1.1;
}

.articles-title span {
    color: var(--accent-ink);
    font-size: 1.2em;
    font-weight: 600;
}

.articles-description {
    margin-top: 6px;
    color: var(--on-dark-muted);
    font-size: 16px;
}

/* ===================================================== VIEW ALL ===================================================== */
.view-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 10px 17px;
    color: var(--accent-ink);
    border: 1px solid var(--gold-500);
    border-radius: 50px;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.view-all:hover {
    color: var(--on-gold);
    background: var(--gold-500);
    box-shadow: var(--shadow-button);
}

.view-all span {
    font-size: 21px;
    line-height: 1;
}

/* ===================================================== ARTICLE GRID ===================================================== */
.articles-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

/* ===================================================== ARTICLE CARD (magazine style, light card) ===================================================== */
.article-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ivory-100);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.article-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--gold-500);
}

/* ===================================================== ARTICLE IMAGE =====================================================
   Uses aspect-ratio instead of a short fixed px height so the photo's
   subject is never cropped down to a sliver on wide (4-col) grids —
   the box always keeps the same proportions as the image scales. */
.article-image {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ivory-300);
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-card:hover .article-image img {
    transform: scale(1.08);
}

.article-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 25, 15, 0) 55%, rgba(6, 25, 15, 0.4) 100%);
    pointer-events: none;
}

/* Category badge, overlaid on the image top-left — magazine masthead style */
.article-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--gold-500);
    color: var(--on-gold);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 12px rgba(6, 25, 15, 0.28);
}

/* ===================================================== ARTICLE CONTENT ===================================================== */
.article-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 22px 18px;
}

.article-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.date-icon {
    color: var(--accent-ink);
    font-size: 14px;
}

.article-content h3 {
    margin-bottom: 8px;
    font-size: 17px;
    line-height: 1.35;
}

.article-content h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--heading-ink);
    font-weight: var(--font-weight-bold);
    transition: color 0.2s ease;
}

.article-card:hover .article-content h3 a {
    color: var(--green-600);
}

.article-content p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: none;
    margin-bottom: 0;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

/* ===================================================== CARD FOOTER ARROW ===================================================== */
.article-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
}

.article-readtime {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.article-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-ink);
    font-size: 13px;
    font-weight: 700;
}

.article-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-gold-light);
    color: var(--gold-deep);
    font-size: 14px;
    line-height: 1;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.article-card:hover .article-arrow {
    background: var(--gold-500);
    color: var(--on-gold);
    transform: translateX(4px);
}