/* ────────────────────────────────────────────────────────────
   CUSTOM.CSS — UK Modification site layer
   Extends style.css / utilities.css. Same visual language:
   navy navbar, indigo accent, white cards, sharp-cornered tags.
   ──────────────────────────────────────────────────────────── */

:root{
  --ukm-navy:#1e2257;
  --ukm-navy-deep:#14173e;
  --ukm-indigo:#3d47c9;
  --ukm-indigo-dark:#2b31b5;
  --ukm-bg:#e2e4e9;
  --ukm-red:#e53935;
  --ukm-green:#2e7d32;
  --ukm-amber:#f57f17;
  --ukm-ink:#111;
  --ukm-muted:#666;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:'Roboto',sans-serif; }

/* ── SKIP LINK / FOCUS ──────────────────────────────────── */
.skip-link{ position:absolute; left:-999px; top:0; background:#fff; color:#111; padding:10px 16px; border-radius:0 0 6px 0; z-index:999; }
.skip-link:focus{ left:0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid #3d47c9; outline-offset:2px;
}

/* ── MOBILE NAV TOGGLE ──────────────────────────────────── */
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle svg{ width:22px; height:22px; fill:#fff; }

@media (max-width:880px){
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }
  .navbar{ flex-wrap:wrap; height:auto; min-height:42px; padding:0 16px; }
  .nav-links{ display:none; flex-direction:column; width:100%; height:auto; }
  .nav-links.open{ display:flex; }
  .nav-links li{ height:auto; width:100%; }
  .nav-links a, .nav-links > li > button{ height:auto; padding:12px 4px; width:100%; justify-content:space-between; }
  .sub-menu{ position:static; box-shadow:none; border:none; border-radius:0; background:rgba(255,255,255,.04); display:none; min-width:0; width:100%; }
  .nav-links li.open .sub-menu{ display:block; }
  .nav-links li:hover .sub-menu{ display:none; }
  .nav-links li.open .sub-menu{ display:block; }
  .sub-menu a{ color:#c8cde6; padding:10px 18px; }
  .sub-menu a:hover{ background:rgba(255,255,255,.06); color:#fff; }
  .nav-badges{ width:100%; padding:10px 0; flex-wrap:wrap; }
  .topbar{ padding:0 16px; }
}

/* ── HERO ───────────────────────────────────────────────── */
.hero{
  background:linear-gradient(135deg,var(--ukm-navy) 0%, var(--ukm-navy-deep) 62%, #11132e 100%);
  position:relative; overflow:hidden; border-radius:8px; margin-bottom:20px;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(115deg, transparent 0 62%, rgba(61,71,201,.35) 62% 64%, transparent 64% 100%),
    linear-gradient(115deg, transparent 0 66%, rgba(229,57,53,.5) 66% 67%, transparent 67% 100%);
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr; gap:36px;
  padding:56px 40px; align-items:center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#9ea6e8; margin-bottom:16px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.2); }
.hero-title{ font-size:2.5rem; line-height:1.12; font-weight:700; color:#fff; margin-bottom:16px; letter-spacing:-.01em; }
.hero-title span{ color:#8b93ff; }
.hero-sub{ font-size:1rem; color:#c8cde6; max-width:46ch; line-height:1.6; margin-bottom:28px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-lg{ padding:13px 26px; font-size:.92rem; }
.btn-white{ background:#fff; color:#1e2257; }
.btn-white:hover{ background:#e9eaff; }
.btn-outline-light{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn-outline-light:hover{ background:rgba(255,255,255,.08); }

.hero-panel{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:20px;
  backdrop-filter:blur(6px);
}
.hero-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.hero-panel-head h3{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:#9ea6e8; font-weight:700; }
.status-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.status-row:last-child{ border-bottom:none; }
.status-label{ display:flex; align-items:center; gap:9px; font-size:.84rem; color:#e3e5f5; }
.status-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.status-dot.up{ background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.18); }
.status-dot.busy{ background:#f9a825; box-shadow:0 0 0 3px rgba(249,168,37,.18); }
.status-dot.down{ background:#e53935; box-shadow:0 0 0 3px rgba(229,57,53,.18); }
.status-value{ font-size:.78rem; font-weight:600; color:#9ea6e8; }

@media (max-width:880px){
  .hero-inner{ grid-template-columns:1fr; padding:36px 22px; }
  .hero-title{ font-size:1.9rem; }
}

/* ── SECTION HEADS ──────────────────────────────────────── */
.section{ margin-bottom:20px; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.section-eyebrow{ font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#3d47c9; margin-bottom:4px; display:block; }
.section-title{ font-size:1.3rem; font-weight:700; color:#111; }
.section-sub{ font-size:.86rem; color:#666; margin-top:4px; max-width:62ch; }

/* ── VALUE / FEATURE GRID ───────────────────────────────── */
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.value-card{ background:#fff; border-radius:8px; padding:24px 22px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.value-card .value-icon{ width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#e8eaff; margin-bottom:14px; }
.value-card .value-icon svg{ width:20px; height:20px; fill:#3d47c9; }
.value-card h3{ font-size:.95rem; font-weight:700; color:#111; margin-bottom:6px; }
.value-card p{ font-size:.83rem; color:#666; line-height:1.55; }

@media (max-width:880px){ .value-grid{ grid-template-columns:1fr; } .action-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .action-grid{ grid-template-columns:1fr; } }

/* ── PAYMENT METHODS ────────────────────────────────────── */
.payment-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.payment-card{ background:#fff; border-radius:8px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,.06); border:1px solid #eceef3; }
.payment-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.payment-card-icon{ width:42px; height:42px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.payment-card-icon svg{ width:22px; height:22px; }
.payment-card h3{ font-size:1rem; font-weight:700; color:#111; }
.payment-card p{ font-size:.84rem; color:#666; line-height:1.6; margin-bottom:8px; }
.payment-steps{ list-style:none; counter-reset:step; margin-top:12px; }
.payment-steps li{ counter-increment:step; font-size:.82rem; color:#444; padding:7px 0 7px 30px; position:relative; border-top:1px solid #f0f1f4; }
.payment-steps li:first-child{ border-top:none; }
.payment-steps li::before{ content:counter(step); position:absolute; left:0; top:7px; width:19px; height:19px; border-radius:4px; background:#e8eaff; color:#3d47c9; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
@media (max-width:780px){ .payment-grid{ grid-template-columns:1fr; } }

/* ── LOADING / EMPTY / ERROR STATES (api.js renders these) ── */
.state-block{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:56px 24px; }
.state-block p.state-title{ font-size:.98rem; font-weight:700; color:#111; margin-bottom:6px; }
.state-block p.state-sub{ font-size:.84rem; color:#777; max-width:42ch; line-height:1.55; margin-bottom:18px; }
.spinner{ width:30px; height:30px; border-radius:50%; border:3px solid #e2e4e9; border-top-color:#3d47c9; animation:ukm-spin .7s linear infinite; margin-bottom:16px; }
@keyframes ukm-spin{ to{ transform:rotate(360deg); } }
.state-icon{ width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.state-icon.is-error{ background:#fdecea; }
.state-icon.is-error svg{ width:22px; height:22px; fill:#c62828; }
.state-icon.is-empty{ background:#f1f1f1; }
.state-icon.is-empty svg{ width:22px; height:22px; fill:#888; }
.state-code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; color:#aaa; margin-top:10px; }

/* ── GRIDS FOR API-LOADED CONTENT ───────────────────────── */
.team-grid, .partner-grid, .product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:880px){ .team-grid, .partner-grid, .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .team-grid, .partner-grid, .product-grid{ grid-template-columns:1fr; } }

.team-card{ background:#fff; border-radius:8px; padding:24px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.team-avatar{ width:64px; height:64px; border-radius:50%; background:#e8eaff; color:#3d47c9; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; margin:0 auto 14px; }
.team-card h3{ font-size:.95rem; font-weight:700; color:#111; }
.team-card .role{ font-size:.78rem; color:#3d47c9; font-weight:600; margin:3px 0 10px; }

.partner-card{ background:#fff; border-radius:8px; padding:22px; display:flex; align-items:center; gap:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.partner-mark{ width:48px; height:48px; border-radius:8px; background:#f4f5ff; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; color:#3d47c9; }

.product-card{ background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.product-thumb{ aspect-ratio:16/10; background:#eef0f6; display:flex; align-items:center; justify-content:center; }
.product-body{ padding:16px 18px 18px; flex:1; display:flex; flex-direction:column; }
.product-body h3{ font-size:.92rem; font-weight:700; color:#111; margin:8px 0 4px; }
.product-price{ margin-top:auto; padding-top:12px; font-weight:700; color:#111; }

/* ── DEPARTMENT GRID (staff page, static) ───────────────── */
.dept-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.dept-card{ background:#fff; border-radius:8px; padding:18px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.dept-card .dept-count{ font-size:1.4rem; font-weight:700; color:#111; }
.dept-card .dept-name{ font-size:.78rem; color:#777; margin-top:2px; }
@media (max-width:880px){ .dept-grid{ grid-template-columns:repeat(2,1fr); } }

/* ── ABOUT PAGE ─────────────────────────────────────────── */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start; }
.about-grid p{ font-size:.92rem; color:#444; line-height:1.75; margin-bottom:14px; }
.timeline{ list-style:none; }
.timeline li{ padding:14px 0 14px 22px; border-left:2px solid #e2e4e9; position:relative; }
.timeline li::before{ content:""; position:absolute; left:-6px; top:18px; width:10px; height:10px; border-radius:50%; background:#3d47c9; }
.timeline li:last-child{ border-left-color:transparent; }
.timeline .t-label{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#3d47c9; }
.timeline .t-text{ font-size:.85rem; color:#444; margin-top:3px; }
@media (max-width:880px){ .about-grid{ grid-template-columns:1fr; } }

/* ── LEGAL ──────────────────────────────────────────────── */
.legal-layout{ display:grid; grid-template-columns:230px 1fr; gap:24px; align-items:start; }
.legal-nav{ background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:10px; position:sticky; top:110px; }
.legal-nav button{ display:block; width:100%; text-align:left; background:none; border:none; padding:10px 12px; font-size:.84rem; color:#444; border-radius:5px; cursor:pointer; font-family:'Roboto',sans-serif; }
.legal-nav button:hover{ background:#f4f5ff; color:#3d47c9; }
.legal-nav button.active{ background:#3d47c9; color:#fff; font-weight:600; }
.legal-panel{ display:none; }
.legal-panel.active{ display:block; }
.legal-panel h2{ font-size:1.15rem; font-weight:700; color:#111; margin:22px 0 10px; }
.legal-panel h2:first-child{ margin-top:0; }
.legal-panel p{ font-size:.86rem; color:#444; line-height:1.7; margin-bottom:10px; }
.legal-panel ul{ margin:0 0 12px 20px; }
.legal-panel li{ font-size:.86rem; color:#444; line-height:1.7; margin-bottom:4px; }
.legal-updated{ font-size:.76rem; color:#999; margin-bottom:18px; }
.legal-disclaimer{ background:#fff8e1; border:1px solid #fde9a8; border-radius:6px; padding:14px 16px; font-size:.8rem; color:#7a5b00; line-height:1.6; margin-bottom:22px; }
@media (max-width:780px){ .legal-layout{ grid-template-columns:1fr; } .legal-nav{ position:static; display:flex; flex-wrap:wrap; gap:4px; } .legal-nav button{ width:auto; } }

/* ── CONTACT ────────────────────────────────────────────── */
.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:.8rem; font-weight:600; color:#333; margin-bottom:6px; }
.form-group .form-input, .form-group .form-select, .form-group textarea{ width:100%; }
.form-group textarea{ border:1px solid #ced4da; border-radius:5px; padding:10px 12px; font-size:.88rem; font-family:'Roboto',sans-serif; resize:vertical; outline:none; }
.form-group textarea:focus{ border-color:#4e59d4; box-shadow:0 0 0 3px rgba(78,89,212,.15); }
.contact-info-row{ display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-top:1px solid #eee; }
.contact-info-row:first-child{ border-top:none; }
.contact-info-icon{ width:36px; height:36px; border-radius:7px; background:#e8eaff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-icon svg{ width:17px; height:17px; fill:#3d47c9; }
.form-msg{ font-size:.82rem; padding:10px 14px; border-radius:5px; margin-top:12px; display:none; }
.form-msg.show{ display:block; }
.form-msg.is-error{ background:#fdecea; color:#c62828; }
.form-msg.is-pending{ background:#e3f2fd; color:#1565c0; }
@media (max-width:780px){ .contact-layout{ grid-template-columns:1fr; } }

/* ── CATEGORY HERO (store pages) ────────────────────────── */
.cat-hero{ display:flex; align-items:flex-start; gap:20px; }
.cat-hero-icon{ width:54px; height:54px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#e8eaff; }
.cat-hero-icon svg{ width:26px; height:26px; fill:#3d47c9; }
.cat-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.cat-tabs a{ font-size:.78rem; font-weight:600; padding:7px 14px; border-radius:5px; background:#eef0f6; color:#444; text-decoration:none; }
.cat-tabs a:hover{ background:#e2e4ed; }
.cat-tabs a.active{ background:#3d47c9; color:#fff; }

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer{ background:#181b46; color:#c8cde6; margin-top:40px; }
.footer-grid{ max-width:1200px; margin:0 auto; padding:48px 20px 28px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-col h4{ color:#fff; font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.footer-col p{ font-size:.82rem; line-height:1.65; color:#9aa1cf; }
.footer-col ul{ list-style:none; }
.footer-col li{ margin-bottom:9px; }
.footer-col a{ font-size:.82rem; color:#c8cde6; text-decoration:none; }
.footer-col a:hover{ color:#fff; text-decoration:underline; }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand .logo-img{ width:34px; height:34px; }
.footer-brand span{ color:#fff; font-weight:600; font-size:1rem; }
.footer-socials{ display:flex; gap:10px; margin-top:16px; }
.footer-socials a{ width:34px; height:34px; border-radius:6px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; }
.footer-socials a svg{ width:16px; height:16px; fill:#c8cde6; }
.footer-socials a:hover{ background:rgba(255,255,255,.14); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:18px 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; max-width:1200px; margin:0 auto; }
.footer-bottom p{ font-size:.76rem; color:#7d84b3; }
.footer-bottom-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-bottom-links a{ font-size:.76rem; color:#7d84b3; text-decoration:none; }
.footer-bottom-links a:hover{ color:#fff; }
@media (max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ── MISC ───────────────────────────────────────────────── */
.eyebrow-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.divider{ height:1px; background:#eceef3; margin:28px 0; }
.muted{ color:#777; }
.logo-mark{ width:38px; height:38px; border-radius:6px; background:linear-gradient(135deg,#3d47c9,#1e2257); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.82rem; letter-spacing:.02em; flex-shrink:0; }