/* ============================================================
   Public site shared styles (landing + blog + custom pages)
   Consumes the CSS variables defined in public/partials/_design-tokens
   (:root — brand tokens from settings, nav/footer colors).
   Static rules only: anything needing PHP stays in the layout.
   Visual language follows the Eduvedha brand: navy headings at
   weight 900 with tight tracking, teal pill buttons, soft navy shadows.
   ============================================================ */

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: #fff;
    color: var(--text);
    overflow-x: clip;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--dark);
    font-weight: 800;
    letter-spacing: -0.01em;
}
h1, h2 { font-weight: 900; letter-spacing: -0.025em; }

/* ── Theme utilities (kept from the old inline block) ── */
.text-primary   { color: var(--primary) !important; }
.bg-primary     { background-color: rgba(var(--primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.border-primary { border-color: var(--primary) !important; }

.theme-text-primary { color: var(--primary) !important; }
.theme-bg-primary   { background-color: var(--primary) !important; }
.theme-bg-primary-soft {
    background-color: var(--p-soft) !important;
    color: var(--p-deep) !important;
}
.theme-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--p-deep);
    background-color: var(--p-soft);
}

/* ── Buttons (Eduvedha pills) ── */
.btn-primary {
    background: var(--primary);
    border: none;
    padding: 11px 22px;
    font-weight: 700;
    border-radius: var(--r-btn);
    box-shadow: var(--shadow-btn);
    transition: transform .18s var(--ease-pop), box-shadow .18s, background-color .18s;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary);
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-btn-hover);
}
.btn-outline-primary {
    color: var(--dark);
    background: #fff;
    border: 1.5px solid var(--navy-soft);
    font-weight: 700;
    padding: 9px 22px;
    border-radius: var(--r-btn);
    box-shadow: 0 4px 14px rgba(12, 26, 58, .06);
}
.btn-outline-primary:hover {
    background-color: #fff;
    border-color: var(--primary);
    color: var(--dark);
}
/* Navy pill — Eduvedha's "School Login" button */
.btn-navy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--secondary);
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-weight: 700;
    border-radius: var(--r-btn);
    box-shadow: 0 8px 22px rgba(var(--secondary-rgb), .24);
    transition: transform .18s var(--ease-pop), box-shadow .18s;
}
.btn-navy:hover,
.btn-navy:focus {
    color: #fff;
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(var(--secondary-rgb), .32);
}

/* ── Navbar ── */
.navbar {
    transition: background-color .3s ease, box-shadow .3s ease;
    padding: .85rem 0;
}
.navbar-style-glass {
    background: color-mix(in srgb, var(--nav-bg) 80%, transparent) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.navbar-style-solid { background: var(--nav-bg) !important; }
.navbar-style-transparent { background: transparent !important; }
.navbar-style-transparent.navbar-scrolled { background: var(--nav-bg) !important; }

.navbar-brand {
    font-weight: 900;
    font-size: 1.45rem;
    color: var(--nav-text) !important;
    letter-spacing: -0.02em;
}
.lp-brand-logo { height: 44px; width: auto; object-fit: contain; display: block; }
@media (max-width: 575px) { .lp-brand-logo { height: 34px; } }
/* "Logo Icon + Name". The bundled E emblem sits on a white square with
   ~15% margin: negative margins pull that margin in so the mark matches
   the name, and multiply drops the white on any light header. */
.lp-brand-both .lp-brand-emblem {
    --mark: 56px;
    width: var(--mark);
    height: var(--mark);
    margin: calc(var(--mark) * -.1) 2px calc(var(--mark) * -.1) calc(var(--mark) * -.15);
    mix-blend-mode: multiply;
}
@media (max-width: 575px) { .lp-brand-both .lp-brand-emblem { --mark: 46px; height: var(--mark); } }
/* Slightly smaller where the row is tight (laptops carry three logins;
   very narrow phones carry the toggler) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .lp-brand-both { font-size: 1.3rem; }
    .lp-brand-both .lp-brand-logo { height: 38px; }
    .lp-brand-both .lp-brand-emblem { --mark: 50px; height: var(--mark); }
}
@media (max-width: 399.98px) { .lp-brand-both { font-size: 1.2rem; } }
.nav-link {
    font-weight: 500;
    font-size: .95rem;
    /* Softened link color that works on any nav background (Eduvedha uses slate links, navy on hover) */
    color: color-mix(in srgb, var(--nav-text) 72%, var(--nav-bg)) !important;
    margin: 0 4px;
    transition: color .2s;
}
.nav-link:hover,
.nav-link:focus { color: var(--nav-text) !important; }
.navbar-toggler-icon { background-image: none; }
.navbar-toggler { color: var(--nav-text); font-size: 1.4rem; }
.navbar .dropdown-menu {
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-pop);
    padding: .4rem;
}
.navbar .dropdown-item { border-radius: 10px; font-weight: 500; color: var(--text); }
.navbar .dropdown-item:hover { background: var(--p-soft); color: var(--p-deep); }

/* ── Header logins: Job Portal · Vendor Portal · ERP ──
   One accent per audience so the three read apart at a glance. */
.lp-login-jobs   { --lp-acc: var(--p-deep);    --lp-acc-soft: var(--p-soft); }
.lp-login-vendor { --lp-acc: #b45309;          --lp-acc-soft: rgba(217, 119, 6, .13); }
.lp-login-erp    { --lp-acc: var(--secondary); --lp-acc-soft: rgba(var(--secondary-rgb), .09); }

/* xl and up: pills in the nav row, ERP (navy) last, then the CTA */
.lp-login-group { gap: 8px; align-items: center; }
.lp-login-group:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 26px;
    margin-left: 6px;
    background: var(--border);
}
.lp-login-pill { font-size: .9rem; }
.lp-login-pill.btn-navy { padding: 10.5px 18px; }
.lp-login-ghost {
    --bs-btn-color: var(--dark);
    --bs-btn-bg: #fff;
    --bs-btn-border-width: 1.5px;
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--dark);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--lp-acc);
    --bs-btn-active-color: var(--dark);
    --bs-btn-active-bg: var(--lp-acc-soft);
    --bs-btn-active-border-color: var(--lp-acc);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-weight: 700;
    border-radius: var(--r-btn);
    box-shadow: 0 4px 14px rgba(12, 26, 58, .06);
    transition: transform .18s var(--ease-pop), border-color .18s, box-shadow .18s;
}
.lp-login-ghost i { color: var(--lp-acc); }
.lp-login-ghost:hover,
.lp-login-ghost:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(12, 26, 58, .1);
}
/* Pill labels: "Job Portal / Vendor Portal" on wide screens, "Jobs / Vendors"
   at 1200–1399px (most laptops) with tighter spacing, so brand + menu +
   three portals + CTA stay on one row */
.lp-pill-short { display: none; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .lp-pill-full { display: none; }
    .lp-pill-short { display: inline; }
    .navbar .nav-link { margin: 0; }
    .lp-login-group { gap: 6px; }
    .lp-login-ghost { padding: 8px 13px; }
    .lp-login-pill.btn-navy { padding: 9.5px 15px; }
}
.lp-login-pill.dropdown-toggle::after { margin-left: 0; opacity: .7; }
.lp-login-ghost[aria-expanded="true"] { border-color: var(--lp-acc); background: var(--lp-acc-soft); }

/* Portal menu: Login / Register / Post a vacancy */
.navbar .lp-portal-menu { min-width: 272px; padding: .45rem; }
.lp-portal-menu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .4rem .55rem .65rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid var(--border);
}
.lp-portal-menu-head strong { display: block; font-weight: 800; font-size: .92rem; line-height: 1.2; color: var(--dark); }
.lp-portal-menu-head small { display: block; font-size: .75rem; color: var(--muted); }
.lp-portal-menu .dropdown-header {
    padding: .5rem .6rem .2rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}
.navbar .lp-portal-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: .55rem .6rem;
    white-space: normal;
}
.lp-portal-item > i { width: 18px; margin-top: 3px; text-align: center; color: var(--lp-acc); }
.lp-portal-item-label { display: block; font-weight: 700; line-height: 1.25; color: var(--dark); }
.lp-portal-item small { display: block; font-size: .75rem; line-height: 1.3; color: var(--muted); }
.navbar .lp-portal-item:hover,
.navbar .lp-portal-item:focus { background: var(--lp-acc-soft); }
/* Bootstrap positions navbar dropdowns with CSS only (data-bs-popper="static"),
   so keep the right-most menus on screen ourselves. */
.lp-portal-menu[data-bs-popper] { margin-top: 8px; }
.lp-login-group .dropdown:last-child .lp-portal-menu[data-bs-popper],
.lp-login-cell:last-child .lp-portal-menu[data-bs-popper] { left: auto; right: 0; }
@media (max-width: 767.98px) {
    /* Phones: the menu opens full width under the row of tiles */
    .lp-login-strip { position: relative; }
    .lp-login-cell { position: static; }
    .navbar .lp-login-cell .lp-portal-menu[data-bs-popper] { left: 0; right: 0; min-width: 0; }
}

/* Below xl: a row of three tiles under the brand, always visible */
.lp-login-strip {
    flex-basis: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: .7rem;
}
.lp-login-cell { min-width: 0; }
.lp-login-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 100%;
    padding: 8px 6px;
    font: inherit;
    text-align: center;
    color: var(--dark);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(12, 26, 58, .05);
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, transform .18s var(--ease-pop);
}
.lp-login-tile:hover,
.lp-login-tile:focus-visible,
.lp-login-tile[aria-expanded="true"] {
    color: var(--dark);
    border-color: var(--lp-acc);
    box-shadow: 0 10px 24px rgba(12, 26, 58, .09);
}
.lp-login-tile:focus-visible { outline: 2px solid var(--lp-acc); outline-offset: 2px; }
.lp-login-tile:active,
.lp-login-tile[aria-expanded="true"] { background: var(--lp-acc-soft); }
.lp-login-ico {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .95rem;
    color: var(--lp-acc);
    background: var(--lp-acc-soft);
}
.lp-login-erp .lp-login-ico { color: #fff; background: var(--secondary); }
.lp-login-text { display: flex; flex-direction: column; min-width: 0; }
.lp-login-title { font-weight: 800; font-size: .82rem; line-height: 1.2; }
/* Phones: "Login · Register ▾" on a small second line; the hint is for screen readers only */
.lp-login-action {
    display: block;
    margin-top: 3px;
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--muted);
}
.lp-login-action i { font-size: .55rem; margin-left: 2px; vertical-align: 1px; }
.lp-login-caret { display: none; }
.lp-login-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* Tablets: icon left, portal name with what you can do there underneath */
@media (min-width: 768px) {
    .lp-login-tile {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 14px;
        text-align: left;
    }
    .lp-login-tile .lp-login-ico { width: 40px; height: 40px; font-size: 1.05rem; }
    .lp-login-title { font-size: .92rem; }
    .lp-login-action { display: none; }
    .lp-login-caret { display: block; margin-left: auto; font-size: .7rem; color: var(--muted); }
    .lp-login-hint {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        margin-top: 2px;
        font-size: .76rem;
        line-height: 1.3;
        color: var(--muted);
    }
}

/* ── Footer (Eduvedha navy band) ── */
.footer {
    background: radial-gradient(120% 120% at 85% 0%, color-mix(in srgb, var(--footer-bg), #3a6fd0 18%) 0%, var(--footer-bg) 64%);
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 72px 0 36px;
}
.footer h5, .footer h6 { color: var(--footer-text); font-family: var(--font-head); }
.footer h5 { font-weight: 900; letter-spacing: -0.02em; font-size: 1.3rem; }
.footer h6 { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.footer p, .footer li { color: var(--footer-text); opacity: 0.8; }
.footer li { margin-bottom: .35rem; }
.footer a {
    color: var(--footer-text);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity .2s, color .2s;
}
.footer a:hover { opacity: 1; color: var(--primary); }
.footer .footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: color-mix(in srgb, var(--footer-text) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--footer-text) 16%, transparent);
}
.footer .btn-primary { color: #fff; opacity: 1; }

/* ── Landing section primitives ── */
.lp-section { padding: var(--sect-pad) 0; }
.lp-section-soft { background: var(--bg-wash); }
.lp-section-dark { background: var(--bg-dark); }
.lp-section-dark h1, .lp-section-dark h2, .lp-section-dark h3 { color: #fff; }

.lp-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.lp-head-left { text-align: left; margin-left: 0; }
.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--p-soft);
    color: var(--p-deep);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 15px;
    border-radius: var(--r-pill);
    margin-bottom: .9rem;
}
.lp-title {
    font-family: var(--font-head);
    font-weight: 900;
    color: var(--dark);
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.625rem);
    letter-spacing: -0.025em;
    line-height: 1.08;
}
.lp-title .lp-accent { color: var(--primary); }
.lp-subtitle {
    color: var(--muted);
    font-size: clamp(1rem, .9rem + .35vw, 1.125rem);
    max-width: 640px;
    margin: .9rem auto 0;
}
.lp-head-left .lp-subtitle { margin-left: 0; }

.lp-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-pop);
}

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: var(--r-btn);
    padding: 15px 30px;
    box-shadow: var(--shadow-btn);
    transition: transform .18s var(--ease-pop), box-shadow .18s;
    text-decoration: none;
}
.lp-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-btn-hover);
    color: #fff;
}

.lp-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #fff;
    color: var(--dark);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    border: 1.5px solid var(--navy-soft);
    border-radius: var(--r-btn);
    padding: 14px 30px;
    box-shadow: 0 4px 14px rgba(12, 26, 58, .06);
    transition: transform .18s var(--ease-pop), border-color .18s, box-shadow .18s;
    text-decoration: none;
}
.lp-btn-ghost:hover {
    color: var(--dark);
    border-color: var(--p-border);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 24px rgba(12, 26, 58, .09);
}

.lp-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--p-soft);
    color: var(--p-deep);
    font-size: 1.2rem;
}

/* Tick-in-a-circle list marker (Eduvedha feature/pricing lists) */
.lp-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--p-soft);
    color: var(--primary);
    font-size: .68rem;
}
.lp-tick.is-off { background: #f1f3f7; color: var(--muted); }

/* ── Per-section background override (content.bg, set on the anchor wrapper) ── */
.lp-secbg-white > section { background: #fff !important; background-image: none !important; }
.lp-secbg-soft > section { background: var(--bg-wash) !important; }
.lp-secbg-dark > section { background: var(--bg-dark) !important; }
.lp-secbg-brand > section { background: var(--grad) !important; }
.lp-secbg-dark > section h1, .lp-secbg-dark > section h2, .lp-secbg-dark > section h3,
.lp-secbg-brand > section h1, .lp-secbg-brand > section h2, .lp-secbg-brand > section h3 { color: #fff; }
.lp-secbg-dark .lp-subtitle, .lp-secbg-brand .lp-subtitle { color: #c1cde0; }
.lp-secbg-dark .lp-eyebrow { background: rgba(var(--primary-rgb), .18); color: color-mix(in srgb, var(--primary), white 50%); }
.lp-secbg-brand .lp-eyebrow { background: rgba(255, 255, 255, .16); color: #fff; }
/* Glass cards on the dark band, like Eduvedha's security section */
.lp-secbg-dark .lp-card {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .13);
    box-shadow: none;
}
.lp-secbg-dark .lp-card h5, .lp-secbg-dark .lp-card h6 { color: #fff; }
.lp-secbg-dark .lp-card p { color: #c1cde0; }

/* ── Effects layer (landing-effects.js; toggles in Appearance) ── */
.lp-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--grad);
    z-index: 9999;
    box-shadow: 0 0 10px rgba(var(--primary-rgb), .5);
}
.lp-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s var(--ease-pop); }
.lp-rv.lp-rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .lp-rv { opacity: 1; transform: none; transition: none; }
}

/* ── Misc utilities ── */
.hover-lift { transition: transform 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); }

@media (hover: none) {
    .lp-card:hover, .hover-lift:hover, .btn-primary:hover, .btn-navy:hover, .lp-btn:hover, .lp-btn-ghost:hover, .lp-login-ghost:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lp-card, .hover-lift, .btn-primary, .btn-navy, .lp-btn, .lp-btn-ghost, .lp-login-ghost, .lp-login-tile, .nav-link { transition: none; }
}