/* ==========================================================
   QPN DESKTOP THEME — CONCEPT 3 COMPANION
   Malayalam authoritative master / desktop only
   v1.1.0 — 2026-09-08
   ----------------------------------------------------------
   Purpose:
   - Match the visual language of the current Concept 3 mobile home.
   - Desktop only (>=1101px); smartphone/tablet CSS remains untouched.
   - Presentation layer only: no links, forms, GPS, WhatsApp, backend,
     content or JavaScript behavior is changed here.
   ========================================================== */

@media (min-width:1101px){
  :root{
    --green:#0f6f4b;
    --deep:#07533c;
    --dark:#043d2f;
    --gold:#d6aa3c;
    --ivory:#f7fbf7;
    --ivory2:#edf7f0;
    --ink:#102b22;
    --muted:#5b7067;
    --line:rgba(15,111,75,.14);
    --white:#fff;
    --shadow:0 18px 46px rgba(13,84,58,.09);
    --qpn-desktop-soft:#eef8f1;
    --qpn-desktop-soft-2:#f9fcfa;
    --qpn-desktop-gold-soft:#f5ecd3;
  }

  html{background:#f7fbf7}
  body{
    background:
      radial-gradient(circle at 11% 7%,rgba(151,207,169,.20),transparent 26%),
      radial-gradient(circle at 91% 13%,rgba(214,170,60,.09),transparent 22%),
      linear-gradient(180deg,#f9fcf9 0,#f6faf7 44%,#f9fcf9 100%);
    color:var(--ink);
  }

  /* ---------- Header ---------- */
  header{
    background:linear-gradient(115deg,#0b5d43 0%,#0f6f4b 54%,#07533c 100%);
    border-bottom:2px solid rgba(214,170,60,.72);
    box-shadow:0 10px 30px rgba(4,61,47,.16);
  }
  header::after{
    content:"";
    position:absolute;
    inset:auto 0 -1px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,224,139,.85),transparent);
    pointer-events:none;
  }
  header nav.wrap{min-height:82px}

  /* v1.1: Header/footer brand alignment lock.
     The earlier Malayalam 5cm header offset is intentionally overridden so
     the header and footer logos start on the same desktop left guide. */
  header nav.wrap,
  footer .wrap.footer-grid,
  footer .wrap.bottom{
    width:min(1280px,calc(100% - 48px))!important;
    max-width:1280px!important;
    margin-inline:auto!important;
  }
  header .header-brand{
    margin-inline-start:0!important;
  }
  header .brand,
  header .full-logo-brand{filter:drop-shadow(0 4px 10px rgba(0,0,0,.08))}
  header .navlinks>a{
    color:#f0d987;
    border-radius:999px;
    padding:9px 10px;
    transition:background-color .18s ease,color .18s ease,transform .18s ease;
  }
  header .navlinks>a:hover,
  header .navlinks>a.active{
    color:#fff;
    background:rgba(255,255,255,.10);
    transform:translateY(-1px);
  }
  header .navlinks>a[href$="/phase-1.html"]{
    color:#f4d777!important;
  }
  header .language-picker{
    border-radius:999px;
    background:rgba(255,255,255,.08);
    box-shadow:inset 0 0 0 1px rgba(214,170,60,.24);
  }

  /* Existing sticky announcement ribbon, when present. */
  .qpn-header-message-ribbon{
    background:linear-gradient(90deg,#064836,#0a5d44 50%,#064836)!important;
    color:#f1d374!important;
    border-bottom-color:rgba(214,170,60,.45)!important;
    box-shadow:0 6px 16px rgba(5,58,44,.08);
  }

  /* ---------- Hero / page hero ---------- */
  .hero,.pagehero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% -5%,rgba(151,207,169,.30),transparent 34%),
      radial-gradient(circle at 8% 64%,rgba(15,111,75,.09),transparent 27%),
      radial-gradient(circle at 94% 38%,rgba(214,170,60,.10),transparent 23%),
      linear-gradient(180deg,#fbfefb,#f4faf6)!important;
    border-bottom:1px solid rgba(15,111,75,.08);
  }
  .hero::before,.pagehero::before,
  .hero::after,.pagehero::after{
    content:"";
    position:absolute;
    z-index:-1;
    top:-210px;
    width:53%;
    height:330px;
    border-radius:50%;
    background:linear-gradient(180deg,rgba(146,204,164,.36),rgba(223,241,228,.18));
    pointer-events:none;
  }
  .hero::before,.pagehero::before{left:-18%;transform:rotate(10deg)}
  .hero::after,.pagehero::after{right:-18%;transform:rotate(-10deg)}
  .hero>.wrap,.pagehero>.wrap{position:relative;z-index:1}

  .eyebrow,.kicker{
    color:#b18424;
    letter-spacing:.13em;
  }
  .hero h1,.pagehero h1,h2{
    color:#074c37;
    text-wrap:balance;
  }
  .hero h1,.pagehero h1{
    text-shadow:0 1px 0 rgba(255,255,255,.7);
  }
  .lead,.copy,.section p,.pagehero p{color:#526d63}

  /* Concept-3 gold center divider underneath major hero headings. */
  .hero h1::after,.pagehero h1::after{
    content:"";
    display:block;
    width:118px;
    height:2px;
    margin:22px 0 0;
    background:linear-gradient(90deg,var(--gold) 0 42%,transparent 42% 49%,var(--gold) 49% 91%,transparent 91%);
    opacity:.88;
  }
  html[dir="rtl"] .hero h1::after,
  html[dir="rtl"] .pagehero h1::after{margin-inline-start:auto}

  /* ---------- Main section rhythm ---------- */
  .section{
    position:relative;
    background:rgba(255,255,255,.56);
    border-top:1px solid rgba(15,111,75,.045);
    border-bottom:1px solid rgba(15,111,75,.045);
  }
  main>.section:nth-of-type(even):not(.darksec){
    background:linear-gradient(180deg,rgba(238,248,241,.72),rgba(249,252,250,.78));
  }
  .section>.wrap{position:relative;z-index:1}

  /* ---------- Cards / panels ---------- */
  .card,
  .district,
  .notice,
  .notice-box,
  .contact-shell,
  .contact-card,
  .emergency-shell,
  .phase-card,
  .phase-fin,
  .phase-metric,
  .journey-step,
  .sponsor-card,
  .status-panel,
  .policy-box{
    border-color:rgba(15,111,75,.12)!important;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,253,250,.98))!important;
    box-shadow:0 14px 34px rgba(13,84,58,.07)!important;
  }
  .card,.district,.journey-step,.phase-card,.sponsor-card{
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  }
  .card:hover,.district:hover,.journey-step:hover,.phase-card:hover,.sponsor-card:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 44px rgba(13,84,58,.11)!important;
    border-color:rgba(214,170,60,.34)!important;
  }
  .card h3,.district strong,.journey-step h3,.sponsor-label,
  .notice-box h2,.notice-box h3,.contact-shell h2,.contact-shell h3{
    color:#07513b!important;
  }
  .card i,.sponsor-amount,.phase-card .step-no,.journey-step .step-no{color:#b7861e}

  /* Dark feature cards follow the Concept-3 footer green. */
  .opcard,
  .darksec{
    background:
      radial-gradient(circle at 86% 14%,rgba(214,170,60,.10),transparent 22%),
      linear-gradient(145deg,#0b694a,#064735)!important;
  }
  .opcard{
    border:1px solid rgba(214,170,60,.18);
    box-shadow:0 28px 64px rgba(5,67,49,.19);
  }
  .opcard .top,.opcard .motto,.darksec .kicker{color:#e1bd5d}

  .signal{
    background:linear-gradient(90deg,#064735,#07543e 50%,#064735);
    border-top:2px solid rgba(214,170,60,.55);
    border-bottom:1px solid rgba(255,255,255,.07);
  }

  /* ---------- Buttons ---------- */
  .btn,.qpn-btn{
    min-height:50px;
    border-radius:999px!important;
    transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  }
  .btn.primary,.primary,.qpn-btn.primary{
    background:linear-gradient(180deg,#13885a,#0d6f4d)!important;
    border-color:#0d6f4d!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(14,111,77,.17);
  }
  .btn.primary:hover,.primary:hover,.qpn-btn.primary:hover{
    background:linear-gradient(180deg,#0f7b52,#095f43)!important;
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(14,111,77,.22);
  }
  /* v1.1: Keep secondary/action buttons readable and consistent with Concept 3. */
  .btn.secondary,.secondary,.qpn-btn.secondary{
    background:linear-gradient(180deg,#13885a,#0d6f4d)!important;
    border-color:#0d6f4d!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    box-shadow:0 8px 18px rgba(14,111,77,.17);
  }
  .btn.secondary:hover,.secondary:hover,.qpn-btn.secondary:hover{
    background:linear-gradient(180deg,#0f7b52,#095f43)!important;
    border-color:#095f43!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(14,111,77,.22);
  }
  .btn:disabled,.qpn-btn:disabled,
  .btn.secondary:disabled,.btn.primary:disabled{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    opacity:.62;
  }

  /* ---------- Forms ---------- */
  input,select,textarea{
    background:#fff!important;
    border-color:rgba(15,111,75,.18)!important;
    color:#15352a;
    box-shadow:0 2px 0 rgba(15,111,75,.015);
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
  }
  input:hover,select:hover,textarea:hover{border-color:rgba(15,111,75,.30)!important}
  input:focus,select:focus,textarea:focus{
    border-color:#16825a!important;
    box-shadow:0 0 0 4px rgba(15,111,75,.09)!important;
    background:#fff!important;
  }
  label{color:#0a543e}
  .form-grid,.emergency-grid{row-gap:18px}

  /* ---------- Tables / notices ---------- */
  table{
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
    border:1px solid rgba(15,111,75,.10);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 28px rgba(13,84,58,.05);
  }
  table th{
    background:#eef8f2;
    color:#07513b;
  }
  table th,table td{border-color:rgba(15,111,75,.09)!important}

  /* ---------- Footer ---------- */
  footer{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% -45%,rgba(214,170,60,.11),transparent 34%),
      linear-gradient(180deg,#086047 0%,#064735 42%,#04392c 100%)!important;
    border-top:4px solid #d6aa3c;
    box-shadow:0 -14px 36px rgba(5,67,49,.10);
  }
  footer::before{
    content:"";
    position:absolute;
    top:-112px;
    left:50%;
    width:440px;
    height:180px;
    transform:translateX(-50%);
    border-radius:50%;
    border:1px solid rgba(214,170,60,.16);
    pointer-events:none;
  }
  footer>.wrap{position:relative;z-index:1}
  footer .ftitle{color:#e2bd5d}
  footer .flinks a,footer .foot-email a{transition:color .16s ease,transform .16s ease}
  footer .flinks a:hover,footer .foot-email a:hover{
    color:#fff;
    transform:translateX(2px);
  }
  html[dir="rtl"] footer .flinks a:hover,
  html[dir="rtl"] footer .foot-email a:hover{transform:translateX(-2px)}
  footer .bottom{border-top-color:rgba(214,170,60,.16)}

  /* ---------- Accessibility ---------- */
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:3px solid rgba(214,170,60,.50);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion:reduce){
    .card,.district,.journey-step,.phase-card,.sponsor-card,
    .btn,.qpn-btn,header .navlinks>a{transition:none!important}
  }

  /* v1.2: dark-section/readability corrections */
  /* Keep the Concept-3 dark funding cards dark, but restore high-contrast copy. */
  .darksec .fund-item{
    background:rgba(255,255,255,.065)!important;
    border-color:rgba(255,255,255,.14)!important;
  }
  .darksec .fund-item strong{
    color:#e7c45f!important;
    -webkit-text-fill-color:#e7c45f!important;
    opacity:1!important;
  }
  .darksec .fund-item p{
    color:rgba(255,255,255,.90)!important;
    -webkit-text-fill-color:rgba(255,255,255,.90)!important;
    opacity:1!important;
  }

  /* Phase-1 metric cards are light surfaces inside a dark section: use dark copy. */
  body[data-page="phase-1"] .darksec .phase-metric{
    background:linear-gradient(180deg,#ffffff,#f7fbf8)!important;
    border-color:rgba(214,170,60,.24)!important;
    box-shadow:0 12px 28px rgba(2,54,38,.12)!important;
  }
  body[data-page="phase-1"] .darksec .phase-metric strong{
    color:#b18424!important;
    -webkit-text-fill-color:#b18424!important;
    opacity:1!important;
  }
  body[data-page="phase-1"] .darksec .phase-metric span{
    color:#355b52!important;
    -webkit-text-fill-color:#355b52!important;
    opacity:1!important;
  }

  /* Explicitly lock light Phase-1 cards to readable text, regardless of section inheritance. */
  body[data-page="phase-1"] .phase-card,
  body[data-page="phase-1"] .phase-fin{
    background:linear-gradient(180deg,#ffffff,#f9fdfb)!important;
    color:#355b52!important;
    -webkit-text-fill-color:#355b52!important;
  }
  body[data-page="phase-1"] .phase-card h3,
  body[data-page="phase-1"] .phase-fin strong{
    color:#07513b!important;
    -webkit-text-fill-color:#07513b!important;
    opacity:1!important;
  }
  body[data-page="phase-1"] .phase-card p,
  body[data-page="phase-1"] .phase-fin span{
    color:#355b52!important;
    -webkit-text-fill-color:#355b52!important;
    opacity:1!important;
  }

}