/* Inter, self-hosted (SIL Open Font License 1.1 — see /assets/fonts/LICENSE.txt).
   These are the same latin / latin-ext variable subsets Google Fonts serves, so
   rendering is unchanged — they are simply served from our own origin, which
   removes a third-party request per page and lets the admin editor's iframe use
   the real site font (it never received the old <link> in header.php).
   One file covers every weight: the wght axis spans 100-900. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}
/* latin-ext carries the rupee sign (U+20B9) — required, this is an INR app. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Base styles */
:root {
    --primary: #4263EB;
    --primary-dark: #3B5BDB;
    --primary-light: #5C7CFA;
    /* Accent tints — derived from --primary so they follow the active theme
       (replace hardcoded rgba(66,99,235,…)/var(--primary-tint) literals across the app). */
    --primary-ring: color-mix(in srgb, var(--primary) 10%, transparent);
    /* Focused-field cue: recolour the field's own border to the accent + this
       SOFT blurred glow (a halo) — deliberately not a hard second border. */
    --focus-glow: 0 0 5px 0 color-mix(in srgb, var(--primary) 32%, transparent);
    --primary-wash: color-mix(in srgb, var(--primary) 8%, transparent);
    --primary-tint: color-mix(in srgb, var(--primary) 8%, #fff);
    --gray-50: #F8F9FA;
    --gray-100: #F1F3F5;
    --gray-200: #E9ECEF;
    --gray-300: #DEE2E6;
    --gray-400: #CED4DA;
    --gray-500: #ADB5BD;
    --gray-600: #6C757D;
    --gray-700: #495057;
    --gray-800: #343A40;
    --gray-900: #212529;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    /* Height of the sticky site header — sticky rails/rails and anchor jump
       offsets add this so they clear the header instead of hiding under it. */
    --header-h: 74px;

    /* ---- Table system -------------------------------------------------
       One token set behind every table on the public side. Mixed from the
       ACTIVE ACCENT rather than the grey ramp, so a table reads as part of
       the page on the warm-paper themes instead of a cool-grey island.

       Values are lifted from the existing .page-body/.about-section rules
       below, which is the treatment that already works — this only gives
       them a name so the rate tables (and, in time, blog/lookup/currency)
       stop each re-deriving their own.

       --table-surface is a token on purpose: a table needs a surface to
       sit ON. rates.css painted its header with --gray-50, which IS the
       page background (body, below), so the header was invisible and the
       cells had nothing behind them at all. Anything themed differently
       overrides this one value and every table follows.

       --table-head-bg mixes into the SURFACE, not into transparent: a
       transparent tint over the canvas is still the canvas.
       ------------------------------------------------------------------ */
    --table-surface:   #fff;
    --table-border:    color-mix(in srgb, var(--primary) 20%, #d7dce3);
    --table-rule:      color-mix(in srgb, var(--primary) 12%, #e6e8ec);
    --table-rule-soft: color-mix(in srgb, var(--primary) 10%, #edf0f4);
    --table-head-bg:   color-mix(in srgb, var(--primary) 10%, var(--table-surface));
    --table-head-fg:   var(--primary-dark);
    --table-zebra:     color-mix(in srgb, var(--primary)  4%, transparent);
    --table-hover:     color-mix(in srgb, var(--primary)  7%, transparent);

    /* Day-over-day movement. Red/green stays — the convention is universal
       in finance and theming it away would cost comprehension — but as
       tokens, and contrast-checked against BOTH canvases: white and the
       paper themes' #F6F4EF. The previous hardcoded #1a7f47 scraped 4.58:1
       on paper; these clear 4.9 and 5.8. Colour is never the only signal —
       the sign and a title are always printed. */
    --rate-up:   #137a45;
    --rate-down: #B32D1F;
}

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

/* Global responsive-image baseline. Loaded site-wide (style.css is
   unconditional), so no image can ever exceed its container width — a safety
   net that holds even when a per-module stylesheet (e.g. blog.css) is missing
   or stale. Module rules that set an explicit height (e.g. .blog-featured-img
   img { height:100% }) still win via specificity; this only reins in images
   that would otherwise overflow. */
img {
    max-width: 100%;
    height: auto;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    color: var(--gray-800);
    background-color: var(--gray-50);
}

/* Global default link colour: every link follows the active theme accent unless a
   component overrides it (nav = white, footer = grey, buttons, ink card titles,
   breadcrumb, etc. all set their own colour and win by specificity). Colour only —
   text-decoration is left to each component. This is the site-wide safety net so
   links like post meta (category/author) and any other un-styled anchor are themed,
   not the browser-default blue. */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-dark);
}

/* Native form controls (radio/checkbox/range/progress) follow the theme accent
   instead of the browser default blue. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--primary);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Page layout widths (the modular layout system — pages, blog and tool pages all
   tag their wrapper `container layout-<name>`; the `layout` value comes from the
   DB, e.g. tool_content.layout / pages.layout):
     with-sidebar  full 1200px container, 2-col grid + sidebar (default, unchanged)
     full-width    full 1200px container, single column, no sidebar
     narrow        same content measure as with-sidebar, single column, centered
   narrow/full-width switch the sidebar off via CSS, so no template markup changes.
   narrow's max-width equals the with-sidebar main column (1200 − 48 padding − 320
   sidebar − 32 gap = 800px content) plus the container's own 48px padding = 848px,
   so switching a page to "narrow" keeps the exact content width, just drops the
   sidebar and centres what remains. */
.container.layout-narrow {
    max-width: 848px;
}

.container.layout-narrow .content-with-sidebar,
.container.layout-full-width .content-with-sidebar {
    grid-template-columns: 1fr;
}

.container.layout-narrow .sidebar,
.container.layout-full-width .sidebar {
    display: none;
}

/* The with-sidebar layout gets its bottom breathing room from
   .content-with-sidebar { margin: 2rem 0 }. Full-width & narrow have no such
   grid, so give the container itself a bottom margin — otherwise the content
   butts straight against the footer. */
.container.layout-full-width,
.container.layout-narrow {
    margin-bottom: 2.5rem;
}

/* .page-body keeps a readable prose measure (820px) in the default/with-sidebar
   and narrow layouts, but a full-width page should actually fill the container —
   otherwise the capped prose sits left-aligned with a large empty gap. */
.container.layout-full-width .page-body {
    max-width: none;
}

/* Header styles */
.header {
    background: var(--primary);
    color: white;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
    z-index: 1001;
}

/* The logo sits on the coloured header — keep it white on hover instead of
   inheriting the global a:hover accent (which turned it invisible). */
.logo:hover,
.logo:focus {
    color: white;
}

.logo-icon {
    margin-right: 0.5rem;
}

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    /* Match the mega toggle's box model so flat and caret items align, and keep
       every top-level label on one line (no zig-zag when the row gets tight). */
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.nav-menu a:hover {
    background-color: var(--primary-light);
}

/* ---- Mega menu (admin-managed nested nav; see includes/layout.php renderMenu) ----
   A top-level item with children opens a panel on hover/focus (desktop) or tap
   (mobile, toggled by JS). `heading` children become titled columns; plain-link
   children render as one untitled column (a simple dropdown). */
.nav-item-has-mega {
    position: relative;
}

.nav-mega-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.mega-caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.85;
    transition: transform 0.2s ease;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 1.75rem;
    min-width: 240px;
    max-width: min(760px, calc(100vw - 2rem));
    margin-top: 0.5rem;
    padding: 1.25rem 1.5rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.13);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Heading-less dropdown: a narrow single column instead of a wide grid. */
.mega-menu-simple {
    display: block;
    min-width: 220px;
    max-width: 280px;
}

.nav-item-has-mega:hover > .mega-menu,
.nav-item-has-mega:focus-within > .mega-menu,
.nav-item-has-mega.open > .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-item-has-mega:hover > .nav-mega-toggle .mega-caret,
.nav-item-has-mega:focus-within > .nav-mega-toggle .mega-caret,
.nav-item-has-mega.open > .nav-mega-toggle .mega-caret {
    transform: rotate(180deg);
}

.mega-col {
    min-width: 0;
}

.mega-col-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.mega-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu li {
    margin: 0;
}

/* Scoped under .nav-menu to override the white header-nav link colour. */
.nav-menu .mega-menu a {
    display: block;
    color: var(--gray-700);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    white-space: normal;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-menu .mega-menu a:hover {
    background: var(--primary-wash);
    color: var(--primary);
}

/* Nav actions container */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Header search button */
.header-search-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.header-search-btn:hover {
    background-color: var(--primary-light);
}

/* ---- Logged-in user avatar dropdown (includes/layout.php renderUserMenu) ----
   A self-contained click dropdown in .nav-actions; deliberately NOT .mega-menu
   markup (whose ≤1199px rule becomes a static accordion). Right-aligned so the
   panel never runs off the viewport on mobile. */
.user-menu {
    position: relative;
}

.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.user-menu-toggle:hover,
.user-menu.open .user-menu-toggle {
    background: rgba(255, 255, 255, 0.22);
}

.user-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: white;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    flex: 0 0 auto;
}

.user-menu-toggle .mega-caret {
    color: white;
}

.user-menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1001;
    min-width: 240px;
    max-width: calc(100vw - 2rem);
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.13);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.user-menu.open .user-menu-panel,
.user-menu:focus-within .user-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu.open .user-menu-toggle .mega-caret {
    transform: rotate(180deg);
}

.user-menu-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0.75rem;
}

.user-menu-avatar-lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.05rem;
    background: var(--primary);
    color: white;
}

.user-menu-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-menu-name {
    font-weight: 600;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-email {
    font-size: 0.8rem;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-item {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: 0.375rem;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.user-menu-item:hover {
    background: var(--primary-wash);
    color: var(--primary);
}

.user-menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 0.35rem 0;
}

.user-menu-logout {
    color: #dc2626;
}

.user-menu-logout:hover {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

/* Logout is a POST form (CSRF-protected) rather than a link, so its <button>
   has to shed the browser's default button chrome and sit flush in the menu
   exactly as the anchor it replaced did. */
.logout-form {
    margin: 0;
}

.logout-form button {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

/* Mobile menu button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.mobile-menu-btn span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: white;
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Mobile menu active states */
.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Hero section — a contained, soft-tinted banner card (used by section landing
   pages like /calculators). Deliberately NOT a full-bleed band: the global
   breadcrumb strip sits directly above it, so the hero floats as a rounded
   card on the body background, matching the site's cards-on-grey language.
   The homepage keeps its own louder full-bleed .home-hero. */
.hero {
    color: var(--gray-800);
    padding: 0.5rem 0 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Card lives on an inner wrapper so its edges align with the container's
   content-box (i.e. the tool sections + header/footer), not the padding-box —
   otherwise the card bled ~1.5rem wider than the rest of the page. */
.hero-card {
    background: linear-gradient(135deg, var(--primary-tint) 0%, #F8FAFF 60%, #FDFDFF 100%);
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    border-radius: 1rem;
    padding: 3rem 1.5rem 3.25rem;
    box-shadow: var(--shadow-sm);
}

/* Special hero section for homepage only */
.home-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 5rem 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.home-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: -1;
}

.hero h1 {
  font-size: 2.25rem;
  margin-bottom: 0.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}

.home-hero h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    position: relative;
}

.hero p {
    margin-bottom: 2rem;
    font-size: 1.0625rem;
    color: var(--gray-700);
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.home-hero p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2.5rem;
    position: relative;
}

/* Search styles */
.search-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    padding: 0 1.5rem;
}

/* The borderless-input-in-a-blue-pill treatment is the HERO search only —
   scoped to .search-container so it can't leak onto the labelled search
   fields of the rate/lookup pages (which style their own .search-input). */
.search-container .search-wrapper {
    position: relative;
    border-radius: 0.75rem;
    background: white;
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-sm);
}

.search-container .search-input {
    width: 100%;
    padding: 1.25rem 1.5rem;
    font-size: 1.125rem;
    border: none;
    border-radius: 0.625rem;
    background: white;
    transition: all 0.3s ease;
    color: var(--gray-900);
}

.search-container .search-input:focus {
    outline: none;
}

.search-container .search-results {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 1.5rem;
    right: 1.5rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    z-index: 9999;
    display: none;
}

.search-result-item {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--gray-800);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--gray-100);
}

.search-result-item:first-child {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.search-result-item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

.search-result-item:hover {
    background-color: var(--gray-50);
    color: var(--primary);
}

.search-result-title {
    font-weight: 500;
    font-size: 1rem;
}

/* Tools section */
.tools-section {
    padding: 2rem 0 2rem;
    background: var(--gray-50);
    position: relative;
    z-index: 0;
}

.tools-section h2 {
    text-align: center;
    margin-bottom: 0.25rem;
    font-size: 1.75rem;
    color: var(--gray-900);
    font-weight: 700;
    position: relative;
}

.tools-section h2 + p {
    text-align: center;
    color: var(--gray-700);
    font-size: 1rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

/* Jump-to-section chips (home + calculators index). Hidden on desktop where
   the multi-column grid keeps the page short; shown on mobile where 30+
   stacked cards would otherwise mean thousands of pixels of scrolling. */
.section-chips {
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 0 0.25rem;
}

.section-chips a {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    padding: 0.375rem 0.875rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

.tool-card {
    background: white;
    padding: 1.25rem;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
}

.tool-card h3 {
    font-size: 1.25rem;
    color: var(--primary);
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.tool-card p {
    color: var(--gray-700);
    line-height: 1.5;
    font-size: 1rem;
    margin: 0;
}

/* About section — the standard article wrapper for CMS body content on every
   tool page (calculators, currency, lookups, rates). Single source of truth:
   page stylesheets must not re-declare these rules. */
.about-section {
    margin: 3rem 0;
    background: var(--gray-50);
}

/* Article headings: .about-section wraps long-form CMS body content on the
   tool pages, so headings read as article sections — left-aligned, editorial
   scale (centered 2.25rem is a landing-page treatment, not an article one). */
.about-section h2 {
    font-size: 1.75rem;
    margin: 2.5rem 0 1.5rem;
    text-align: left;
    color: var(--gray-900);
    font-weight: 700;
}

.about-section h2:first-child {
    margin-top: 0;
}

.about-section h3 {
    font-size: 1.375rem;
    margin: 2rem 0 1rem;
    text-align: left;
    color: var(--gray-900);
    font-weight: 600;
}

.about-section p {
    color: var(--gray-700);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.about-section ul,
.about-section ol {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
    color: var(--gray-700);
}

.about-section li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Long-form CMS content links (tool "about" sections) follow the theme accent. */
.about-section a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.about-section a:hover { color: var(--primary-dark); }

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 1px solid var(--gray-100);
    height: 100%;
}

.feature:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.feature h4 {
    color: var(--primary);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.feature p {
    color: var(--gray-700);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* FAQ section */
/* FAQ section — standard treatment on every tool page (single source of
   truth; page stylesheets must not re-declare these rules). */
.faq-section {
    margin: 3rem 0;
}

.faq-section h2 {
    text-align: left;
    margin-bottom: 2rem;
    font-size: 1.75rem;
    color: var(--gray-900);
    font-weight: 700;
}

/* FAQ Accordion */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 1.5rem;
    background: white;
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.0625rem;
    line-height: 1.4;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: var(--gray-50);
    color: var(--primary);
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--gray-700);
    transition: all 0.3s ease;
    font-weight: 300;
    line-height: 1;
}

.faq-question[aria-expanded="true"] {
    background: var(--primary);
    color: white;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.faq-question[aria-expanded="true"]::after {
    content: '−';
    color: white;
    transform: rotate(0deg);
}

.faq-answer {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    background: white;
}

.faq-question[aria-expanded="true"] + .faq-answer {
    padding: 1.5rem;
    max-height: 500px;
}

.faq-answer p {
    margin: 0 0 1rem;
    color: var(--gray-700);
    line-height: 1.6;
    font-size: 1rem;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* Editor-authored answers are wrapped in a div by the CMS renderer. */
.faq-answer div {
    color: var(--gray-700);
    line-height: 1.6;
}

.faq-answer ul {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
    color: var(--gray-700);
}

.faq-answer li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.faq-answer li:last-child {
    margin-bottom: 0;
}

/* Footer */
/* Static CMS pages (about / disclaimer / terms / privacy / contact). The body is
   sanitized rich HTML with no styling of its own — give it a readable prose measure
   and rhythm so it doesn't render as a bare browser-default document. */
.page-body {
    max-width: 820px;
    color: var(--gray-800);
    font-size: 1rem;
    line-height: 1.75;
}
.page-body > :first-child { margin-top: 0; }
.page-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 2.25rem 0 0.75rem;
    line-height: 1.3;
}
.page-body h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 1.75rem 0 0.5rem;
}
.page-body p { margin: 0 0 1.1rem; }
.page-body ul,
.page-body ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.page-body li { margin-bottom: 0.5rem; }
.page-body strong { color: var(--gray-900); }
.page-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.page-body a:hover { color: var(--primary-dark); }
.page-body blockquote {
    margin: 1.5rem 0;
    padding: 0.5rem 0 0.5rem 1.25rem;
    border-left: 3px solid var(--primary);
    color: var(--gray-600);
}
/* ------------------------------------------------------------------
   .data-table — the shared public table component.

   Class-based, so a template opts in. The prose rules below stay
   selector-based because CMS-authored tables carry no class; both are
   built from the same --table-* tokens, so they cannot drift the way
   .page-body, .blog-body and rates.css each drifted into their own
   near-identical mixes.

   Adopted by the gold rate tables first. blog.css and the prose rules
   below still carry their own literals and should move onto these
   tokens next — deliberately NOT done in the same change, since they
   currently look correct and a token swap there is a live-content risk.

   border-collapse: separate (not collapse) because collapsed borders
   cannot be clipped by border-radius — the rounded shell needs it.
   ------------------------------------------------------------------ */
.data-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    background: var(--table-surface);
    border: 1px solid var(--table-border);
    border-radius: 10px;
    overflow: hidden;
}

.data-table th,
.data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--table-rule);
}

.data-table th:not(:last-child),
.data-table td:not(:last-child) {
    border-right: 1px solid var(--table-rule-soft);
}

.data-table thead th {
    background: var(--table-head-bg);
    color: var(--table-head-fg);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.data-table tbody tr:nth-child(even) {
    background: var(--table-zebra);
}

.data-table tbody tr:hover {
    background: var(--table-hover);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
    border-bottom: 0;
}

/* A row label is a <th scope="row"> — a header, so it keeps a label's
   weight without the uppercase treatment of the column band. */
.data-table tbody th[scope="row"] {
    font-weight: 500;
    white-space: nowrap;
}

/* Numeric variant. Tabular numerals so digits keep a constant width down the
   column, and no wrapping so a figure never breaks across two lines.

   LEFT aligned, inheriting from the base rule above — deliberately, not by
   omission. Right alignment exists to line figures up on the decimal, but these
   cells carry a trailing change span ("₹14,027 (+42)"), so the right edge would
   align the change text and leave the numbers ragged. It would buy nothing and
   cost a column of headers pointing one way and values the other. */
.data-table--figures td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Prose tables. `.about-section` carries admin-authored tool copy and had NO
   table rules, so a table written in the editor rendered unstyled on the live
   calculator / gold / silver pages — same markup, same author, different
   wrapper. Both wrappers share one declaration now. */
.page-body table,
.about-section table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, #d7dce3);
    border-radius: 10px;
    overflow: hidden;
}
.page-body th,
.page-body td,
.about-section th,
.about-section td { padding: 0.65rem 0.9rem; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, #e6e8ec); }
.page-body thead th,
.about-section thead th { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary-dark); font-weight: 600; }
.page-body tbody tr:last-child td,
.about-section tbody tr:last-child td { border-bottom: none; }
/* On a phone a table of four or five columns is wider than the screen, and
   `overflow: hidden` above only clips the rounded corners — it does nothing
   for the page. As a block the table becomes its own horizontal scroller,
   so it scrolls instead of pushing the whole page sideways. */
@media (max-width: 768px) {
    .page-body table,
    .about-section table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ------------------------------------------------------------------
   Account panel — a two-column shell for the signed-in account pages
   (profile, edit-profile, two-factor): a sticky left nav + right content.
   Mirrors the frontend with-sidebar layout, sidebar on the left.
   ------------------------------------------------------------------ */
.account-layout {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: 2rem;
    margin: 2.5rem auto;
    align-items: start;
}
.account-nav {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}
.account-nav-inner {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.9rem;
    padding: 0.6rem;
    box-shadow: var(--shadow-sm);
}
.account-nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.6rem;
    color: var(--gray-700);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.account-nav-icon { width: 20px; height: 20px; flex-shrink: 0; }
.account-nav-link:hover { background: var(--gray-100); color: var(--gray-900); }
.account-nav-link.is-active {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary-dark);
}
.account-content { min-width: 0; }
.account-page-head { margin-bottom: 1.5rem; }
.account-page-head h1 { margin: 0 0 0.35rem; font-size: 1.9rem; color: var(--gray-900); }
.account-page-head p { margin: 0; color: var(--gray-600); }
.account-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.9rem;
    box-shadow: var(--shadow-sm);
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
}
.account-card h2 { margin: 0 0 1.25rem; font-size: 1.2rem; color: var(--gray-900); }
.account-card h2:not(:first-child) { margin-top: 0.5rem; }
.account-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.4rem 2rem;
    margin: 0;
}
.account-detail dt {
    color: var(--gray-500);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}
.account-detail dd { margin: 0; color: var(--gray-900); font-weight: 500; }
.account-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}
.account-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.4rem;
    border-radius: 0.6rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.account-btn-primary { background: var(--primary); color: white; }
.account-btn-primary:hover { background: var(--primary-dark); }
.account-btn-secondary {
    background: white;
    color: var(--gray-700);
    border-color: var(--gray-200);
}
.account-btn-secondary:hover { background: var(--gray-100); color: var(--gray-900); }

@media (max-width: 860px) {
    /* minmax(0, 1fr), not 1fr: the nav row below is `nowrap`, and a plain
       1fr track cannot shrink under its min-content, so the nav widened the
       whole layout past the screen instead of scrolling inside itself. */
    .account-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
    .account-nav { position: static; min-width: 0; }
    .account-nav-inner { flex-direction: row; overflow-x: auto; }
    .account-nav-link { white-space: nowrap; }
    .account-card { padding: 1.5rem 1.25rem; }

}

/* Themed toast — top-centre, follows the active accent. Replaces native alert(). */
.site-toast-stack {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 2rem);
}
.site-toast {
    pointer-events: auto;
    background: var(--gray-900, #111827);
    color: #fff;
    padding: 0.75rem 1.2rem;
    border-radius: 0.6rem;
    box-shadow: var(--shadow-lg);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    border-left: 4px solid var(--primary);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.site-toast.is-visible { opacity: 1; transform: translateY(0); }
.site-toast-warning { border-left-color: #d97706; }
.site-toast-error { border-left-color: #dc2626; }
.site-toast-success { border-left-color: #16a34a; }

.footer {
    /* Theme-tinted dark canvas + accent top rule, so the footer follows the active
       theme instead of a flat near-black. Fallback for no color-mix support. */
    background: #111827;
    background: color-mix(in srgb, var(--primary) 20%, #101828);
    border-top: 3px solid var(--primary);
    color: white;
    padding: 5rem 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-col h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    color: white;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 1rem;
}

.footer-col a {
    color: var(--gray-100);
    text-decoration: none;
    opacity: 0.8;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.footer-col a:hover {
    opacity: 1;
    color: white;
}

.footer-col-about p {
    color: var(--gray-100);
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.social-links-heading {
    display: block;
    margin-top: 1.5rem;
    color: var(--gray-100);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
}

.social-links a {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-links a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gray-100);
    opacity: 0.8;
    font-size: 0.9rem;
}

/* Responsive footer adjustments */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

}

/* Converter section */

.form-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
}

.form-group {
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.875rem;
}

.form-control {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    /* No fixed height: module stylesheets (calculator/currency/ifsc/pin/
       swift) re-style .form-control with larger padding, and a fixed
       border-box height here clips their content (Chrome honours the height
       on selects; Safari's native select rendering masked it). The compact
       variant's natural height stays ~2.25rem, still matching .exchange-button. */
    background-color: white;
    transition: all 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-glow);
}

.exchange-button {
    background: var(--primary);
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.25rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.875rem;
    /* No fixed height (same reasoning as .form-control above): page
       stylesheets re-style this button with larger padding and a pinned
       border-box height would fight it. */
    min-width: 80px;
}

.exchange-button:hover {
    background: var(--primary-dark);
}


/* Admin-managed sidebar widget link lists (includes/layout.php renderSidebar +
   dynamic providers). Mirrors the tool pages' .tool-link pill so seeded/
   admin widgets look identical on every family — one owner, styled site-wide. */
.sidebar-widget-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Plain widget link lists (e.g. "Popular Tools") follow the theme accent instead
   of the UA default blue. */
.sidebar-widget-links a { color: var(--primary); text-decoration: none; }
.sidebar-widget-links a:hover { color: var(--primary-dark); text-decoration: underline; }

.sidebar-widget-link {
    color: var(--gray-700);
    text-decoration: none;
    padding: 0.875rem 1.25rem;
    border-radius: 0.5rem;
    background: var(--gray-50);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    font-weight: 500;
    border: 1px solid transparent;
}

.sidebar-widget-link:hover {
    background: var(--primary-light);
    color: white;
    transform: translateX(5px);
    border-color: var(--primary);
}

/* ------------------------------------------------------------------
   Tool-page sidebar layout — single source of truth for calculators,
   currency, rate (gold/silver) and code (IFSC/SWIFT/PIN) pages. Page
   stylesheets must NOT re-declare these; they only ever diverged.
   Width-based breakpoints so every device orientation is covered:
     >= 1024px  desktop + tablet landscape  -> 2-col, sticky sidebar
     <= 1024px  tablet portrait + phone landscape -> stacked, sidebar below
     <= 767px   phone portrait/landscape    -> stacked, tighter widget padding
   ------------------------------------------------------------------ */
.content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    margin: 2rem 0;
    /* Let the sidebar cell shrink to its content height so the rail can stick
       and travel within the (taller) main column — without this the cell
       stretches to full row height and container-stickiness has no room. */
    align-items: start;
}

.main-content {
    min-width: 0;
}

/* The rail sticks as ONE unit. Making each .sidebar-widget individually
   sticky pinned every widget to the same top offset, so on scroll the lower
   widgets rode up and overlapped the ones above. Stick the container instead
   (mirrors .blog-hub-rail / .account-nav) — widgets stay static, scroll and
   pin together, and the 2rem gap keeps them cleanly separated. */
.sidebar {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-self: start;
}

.sidebar-widget {
    background: white;
    padding: 1.75rem;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-md);
}

.sidebar-widget h3 {
    margin-bottom: 1.25rem;
    color: var(--gray-900);
    font-size: 1.25rem;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .content-with-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        margin-top: 2rem;
        position: static;
    }

}

@media (max-width: 767px) {
    .sidebar-widget {
        padding: 1.25rem;
    }

}

.pair-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.375rem;
    text-decoration: none;
    color: var(--gray-800);
    font-size: 0.875rem;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    background: white;
}

.pair-link strong {
    font-weight: 500;
}

.pair-link:hover {
    background: #F6F8FF;
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

/* Update pairs-grid for 4 columns */
.pairs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}

/* Responsive adjustments for pairs-grid */
@media (max-width: 1200px) {
    .pairs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .pairs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 576px) {
    .pairs-grid {
        grid-template-columns: 1fr;
    }

}

/* Progressive "See more" collapse for long code-tool grids (JS-driven, Roadmap
   N4). Overflow cards stay in the DOM for SEO / no-JS — only visually hidden
   while the grid carries .is-collapsed; the reveal button is injected by
   initCollapsibleGrids() in main.js. */
.pairs-grid.is-collapsed .pair-overflow {
    display: none;
}

.see-more-wrap {
    display: flex;
    justify-content: center;
    margin: -0.5rem 0 2rem;
}

.see-more-btn {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    color: var(--primary);
    background: transparent;
    border: 1px solid var(--primary);
    border-radius: 0.5rem;
    padding: 0.65rem 1.5rem;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.see-more-btn:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

/* Responsive styles */

/* Dense navbar: expand the horizontal nav only on real desktops and collapse to
   the hamburger + mega-accordion below ~1200px (the navbar-expand-xl pattern).
   With single-line labels the full logged-in nav can't fit under ~1200px, so
   this keeps it from wrapping or overflowing on tablets / small laptops. */
@media (max-width: 1199px) {
    .mobile-menu-btn {
        display: block;
    }

    .nav-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--primary);
        /* Bottom inset clears the iPhone home indicator, so the last item is
           tappable rather than sitting under the gesture bar. */
        padding: 5rem 2rem calc(2rem + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: flex-start;
        z-index: 1000;
        /* This panel is pinned to all four edges, so it does not scroll with the
           page and needs a scroller of its own. Without it the default
           overflow:visible let content spill out of reach: with one mega panel
           expanded the menu is ~2040px inside an 852px viewport, leaving ~1190px
           unreachable — no amount of dragging moved it.
           overscroll-behavior stops the scroll chaining to the page behind once
           the menu hits its end, which otherwise reads as the menu being stuck. */
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a {
        display: block;
        padding: 1rem;
        font-size: 1.25rem;
        width: 100%;
        text-align: center;
        white-space: normal;
    }

    /* Mega menu becomes an inline accordion inside the full-screen mobile nav:
       tapping the parent (JS toggles .open) expands its panel in place. */
    .nav-item-has-mega {
        width: 100%;
    }

    .nav-mega-toggle {
        justify-content: center;
    }

    .mega-menu {
        position: static;
        display: none;
        grid-template-columns: 1fr;
        gap: 0.25rem;
        min-width: 0;
        max-width: none;
        margin: 0.25rem 0 0.5rem;
        padding: 0.5rem 0.75rem;
        background: rgba(255, 255, 255, 0.08);
        border: none;
        border-radius: 0.5rem;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-item-has-mega.open > .mega-menu {
        display: grid;
    }

    .mega-col-title {
        color: rgba(255, 255, 255, 0.7);
        margin: 0.5rem 0 0.25rem;
    }

    .nav-menu .mega-menu a {
        color: white;
        text-align: left;
        font-size: 1.05rem;
        padding: 0.6rem 0.5rem;
    }

    .nav-menu .mega-menu a:hover {
        background: rgba(255, 255, 255, 0.12);
        color: white;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    .hero {
        padding: 3rem 0;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1.125rem;
    }
    
    .tools-section {
        padding: 2rem 0;
    }

    .tools-section h2 {
        font-size: 1.75rem;
    }

    /* One FULL card per row — the same treatment as desktop, title and
       description both.
       This deliberately replaces an earlier two-column compaction that hid the
       descriptions to keep 30+ tools within a screenful. It saved height but
       left card chrome sized for a title *and* a paragraph holding only a
       title: a one-line name needed 51px while a two-line neighbour set the
       grid row to 76px, and `height: 100%` stretched the short ones to match,
       so every other card had ~25px of visible dead space. It read as content
       that had failed to load.
       Only the column count is overridden now; everything else inherits the
       base .tool-card rules, so the two never drift apart. The page is longer
       as a result — .section-chips at the top is how you skip down it. */
    .tools-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .section-chips {
        display: flex;
    }

    /* Anchored sections land below the sticky-ish top, not under it. */
    .tools-section[id] {
        scroll-margin-top: 1rem;
    }
    
    .about-section {
        margin: 2rem 0;
    }

    .about-section h2 {
        font-size: 1.5rem;
    }

    .about-section h3 {
        font-size: 1.25rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .faq-section {
        margin: 2rem 0;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .pairs-grid {
        grid-template-columns: 1fr;
    }
    
    /* Header search button on mobile */
    .nav-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .header-search-btn {
        margin-right: 0.5rem;
    }

}

/* Update breadcrumbs styles */
.breadcrumbs {
    background: var(--gray-50);
    padding: 0.75rem 0;
    color: var(--gray-700);
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.breadcrumbs a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: var(--primary-dark);
}

.breadcrumbs .separator {
    margin: 0 0.5rem;
    color: var(--gray-700);
}

/* Details page styles */

/* Search Modal Styles */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
}

.search-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.search-modal-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-top: 5rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    z-index: 2001;
}

.search-modal.active .search-modal-content {
    transform: translateY(0);
}

.search-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.search-modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.search-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--gray-700);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.search-modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.search-modal-body {
    padding: 1.5rem;
}

.search-modal-input {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    background: var(--gray-50);
    transition: all 0.2s ease;
}

.search-modal-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-glow);
    background: white;
}

.search-modal-results {
    margin-top: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

.search-modal-result-item {
    display: block;
    padding: 0.875rem 1rem;
    border-radius: 0.375rem;
    color: var(--gray-800);
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.search-modal-result-item:hover {
    background: var(--gray-100);
    color: var(--primary);
}

.search-modal-result-title {
    font-weight: 500;
    font-size: 0.9375rem;
}

.search-modal-no-results {
    padding: 1.5rem;
    text-align: center;
    color: var(--gray-700);
    font-size: 0.9375rem;
}

@media (max-width: 768px) {
    .search-modal-content {
        margin: 4rem 1rem 0;
        max-width: calc(100% - 2rem);
    }

}

/* Related Guides band — bottom of tool pages (blog cross-display, PR interlink).
   Rendered by blog_render_related_strip() in footer.php when a tool page sets
   $tool_related_context; shows the family's published blog guides. */
.tool-related {
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    padding: 3rem 0;
    margin-top: 3rem;
}

.tool-related-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tool-related-head h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.tool-related-all {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
}

.tool-related-all:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.tool-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.tool-related-card {
    display: block;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tool-related-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.tool-related-cat {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary);
}

.tool-related-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gray-900);
}

.tool-related-card p {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--gray-600);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-related-more {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
}

/* ==================================================================
   CORE COMPONENTS
   ------------------------------------------------------------------
   Generic UI shared by every tool family, owned here rather than by
   whichever module happened to declare it first.

   These rules previously lived in rates.css and calculator.css, which
   are module stylesheets: a component was therefore styled only while
   a particular module was enabled and owned the route, and editing it
   for one module silently restyled another. .cms-sidebar was the worst
   case — 17 rules with no core definition at all, so the sidebar was
   styled only on pages owned by gold/silver/ifsc/pin/swift.

   A module may still override any of these for its own pages; what it
   may not do is be the only place they are defined.
   ================================================================== */

/* --- Tool page header ------------------------------------------- */
.tool-header {
    text-align: left;
    margin: 2rem 0;
}

.tool-header h1 {
    margin-bottom: 0.5rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    /* Headings can carry a single unbreakable word from the DB --
       "Thiruvananthapuram" is ~380px at 2rem, wider than a 360px phone's
       content column, so the heading pushed the whole PAGE sideways.
       Breaking inside a word is a last resort by definition: this only
       applies when the word cannot fit on a line of its own. */
    overflow-wrap: break-word;
}

.tool-header p {
    color: var(--gray-700);
    font-size: 1.125rem;
}

.tool-form {
    background: white;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

/* --- Sidebar link pills ------------------------------------------
   .sidebar-widget-links above mirrors this deliberately; both are the
   same pill, one for admin-managed widgets and one for tool lists. */
.tool-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tool-link {
    color: var(--gray-700);
    text-decoration: none;
    padding: 0.875rem 1.25rem;
    border-radius: 0.5rem;
    background: var(--gray-50);
    transition: all 0.3s ease;
    font-weight: 500;
    border: 1px solid transparent;
}

.tool-link:hover {
    background: var(--primary-light);
    color: white;
    transform: translateX(5px);
    border-color: var(--primary);
}

/* --- CMS sidebar content ----------------------------------------
   Editor-authored HTML rendered into the sidebar by includes/layout.php.
   Core renders it, so core styles it. */
.cms-sidebar h2,
.cms-sidebar h3,
.cms-sidebar h4 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: var(--gray-900);
    font-weight: 600;
}

.cms-sidebar h2:first-child,
.cms-sidebar h3:first-child,
.cms-sidebar h4:first-child {
    margin-top: 0;
}

.cms-sidebar h2 {
    font-size: 1.25rem;
}

.cms-sidebar h3 {
    font-size: 1.125rem;
}

.cms-sidebar h4 {
    font-size: 1rem;
}

.cms-sidebar p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--gray-700);
}

.cms-sidebar ul,
.cms-sidebar ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.cms-sidebar li {
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    line-height: 1.6;
}

.cms-sidebar a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.cms-sidebar a:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.cms-sidebar strong {
    font-weight: 600;
    color: var(--gray-900);
}

.cms-sidebar blockquote {
    border-left: 4px solid var(--primary);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--gray-700);
    font-style: italic;
}

/* --- Labelled search field ---------------------------------------
   The base (bordered, magnifier) treatment. A multi-family component:
   core's own site search (homepage + calculators hub) emits
   class="search-input", and the metal modules' city pickers
   (rate-component.php) reuse it rather than restyling a second search
   control — so core defines it. It previously existed only in rates.css,
   leaving the control unstyled anywhere that module was not active.

   The hero variant is .search-container .search-input above: higher
   specificity, so it still wins inside the hero and this base is inert
   there. The one deliberate difference is :focus, which the hero rule
   only sets `outline: none` on -- the base now restores a visible focus
   indicator, which WCAG 2.4.7 requires. */
.search-wrapper {
    position: relative;
}

.search-wrapper label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--gray-900);
    font-size: 0.9375rem;
}

.search-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 1rem;
    color: var(--gray-900);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23868e96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 1rem center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input::placeholder {
    color: var(--gray-500);
    opacity: 1;
}

.search-input:hover {
    border-color: var(--gray-500);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--focus-glow);
}

/* --- Link grid: dense variant ------------------------------------
   .pairs-grid above is the four-column default (currency pair pages).
   The lookup and rate tools need a denser three-column grid with roomier
   cards, because their labels are long — bank branch names, post office
   names, city names.

   That variant used to exist as a bare `.pairs-grid` override sitting in
   TWO module stylesheets, which is how five modules ended up sharing one
   file: three of them declared the gold/silver stylesheet solely to
   inherit it. As an explicit modifier the variant belongs to core, both
   forms are defined exactly once, and a module opts in through its own
   markup rather than through another module's file.

   Declared after the base rules (identical specificity, so source order
   decides) and its breakpoints after the base breakpoints, which is what
   keeps the cascade the same as when the override lived downstream. */
.pairs-grid--dense {
    grid-template-columns: repeat(3, 1fr);
}

.pairs-grid--dense .pair-link {
    padding: 0.9375rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
}

@media (max-width: 1200px) {
    .pairs-grid--dense {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 768px) {
    .pairs-grid--dense {
        grid-template-columns: 1fr;
    }

}

/* --- Spacing / type utilities ------------------------------------ */
.mt-4 {
    margin-top: 2rem;
}

.text-sm {
    font-size: 0.875rem;
    color: var(--gray-700);
}

/* Inline notice panel — shared by the rate pages AND several calculators
   (LTV/FOIR/relief advisories), so it is core, not any one module's. */

/* Transient-outage notice — shared by the currency, gold and silver pages.
   Each of those tools publishes nothing rather than a stale or invented figure
   when its provider is unreachable, so this is a normal state, not an error
   page: styled as a calm notice rather than an alarm. */
.currency-notice,
.rate-notice {
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
    border-left: 3px solid var(--primary);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin: 1rem 0 2rem;
    color: var(--gray-800);
    max-width: 42rem;
}
.currency-notice p,
.rate-notice p { margin: 0 0 0.75rem; }
.currency-notice p:last-child,
.rate-notice p:last-child { margin-bottom: 0; }

/* Impersonation banner — sits above all other chrome. Loud on purpose: the
   failure mode is an administrator forgetting whose account they are looking
   at, so this should be impossible to read past. */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 2000;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: center;
    padding: .6rem 1rem;
    background: #7f1d1d;
    color: #fff;
    font-size: .9rem;
    line-height: 1.4;
    text-align: center;
}
.impersonation-banner strong { color: #fff; }
.impersonation-banner form { margin: 0; }
.impersonation-banner button {
    padding: .35rem .85rem;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: .3rem;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}
.impersonation-banner button:hover { background: rgba(255, 255, 255, .15); }

/* ── Compact on small screens (N5) ──────────────────────────────────────────
 *
 * The shared chrome, tightened for phones. Density only — the mobile
 * typography already reads well and is untouched, which is the whole reason
 * this is a separate block rather than an edit to the existing 768px rules.
 *
 * The container inset is the one that compounds: at 1.5rem a side it takes
 * 3rem of a 375px screen before any component has drawn anything, and every
 * card inside then adds its own. Card padding stays visible so a card still
 * looks like one.
 */
@media (max-width: 640px) {
    .container {
        padding: 0 1rem;
    }

    .tool-header {
        margin: 1.25rem 0;
    }

    /* The hub grid: three columns of whitespace on a phone is one column of
       content and two of margin. */
    .tools-section {
        padding: 1.25rem 0;
    }

    .tool-card {
        padding: 1rem;
    }

    .tools-grid {
        gap: 0.75rem;
    }

    /* Prose blocks keep their internal rhythm — only the space AROUND them
       closes up. Cramping paragraphs would be a typography change. */
    .about-section {
        margin: 1.75rem 0;
    }

    .hero-card {
        padding: 2rem 1.25rem 2.25rem;
    }

    .tool-links {
        margin-top: 1.25rem;
    }

    /* Both of these are core's, and both are most visible on a calculator
       page — which is exactly why they are here and not in that module's
       sheet. `.tool-form` is a core design-system class; `.rate-notice` is
       shared by three or more modules. Tightening either from calculator.css
       would leave a gold or currency page roomy while the same rule rendered
       tighter next door. */
    .tool-form {
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }

    /* Notices carry real regulatory copy on the loan pages, so the TEXT stays
       as it is — only the box closes up. */
    .rate-notice {
        padding: 0.9rem 1rem;
        margin: 0.9rem 0 1.25rem;
    }
}