/* ==========================================================
   QPN MOBILE RESPONSIVE THEME — CONCEPT 3 COMPANION
   Malayalam authoritative master / smartphone only
   v1.2.0 — 2026-09-08
   ----------------------------------------------------------
   Purpose:
   - Give all Malayalam inner pages the same visual language as
     the approved Concept 3 mobile home.
   - Smartphone presentation only (<=719px).
   - No links, forms, GPS, WhatsApp, backend or content behavior
     is changed by this stylesheet.
   ========================================================== */

@media (max-width:719px){
  :root{
    --qpn-m-green:#0f6f4b;
    --qpn-m-green-2:#138957;
    --qpn-m-deep:#07513c;
    --qpn-m-dark:#043d2f;
    --qpn-m-gold:#d6aa3c;
    --qpn-m-soft:#edf8f1;
    --qpn-m-soft-2:#f8fcf8;
    --qpn-m-white:#ffffff;
    --qpn-m-ink:#102b22;
    --qpn-m-muted:#526b61;
    --qpn-m-line:rgba(15,111,75,.13);
    --qpn-m-shadow:0 12px 28px rgba(13,84,58,.08);
  }

  html{
    background:#f7fbf7!important;
    overflow-x:hidden;
  }

  body{
    background:
      radial-gradient(circle at 50% 5%,rgba(179,222,190,.24),transparent 22rem),
      linear-gradient(180deg,#f9fcf9 0%,#f6fbf7 100%)!important;
    color:var(--qpn-m-ink)!important;
    overflow-x:hidden;
  }

  .wrap,
  .qpn-container{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    margin-inline:auto!important;
  }

  /* ---------- Compact Concept-3 header ---------- */
  header{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    background:
      radial-gradient(circle at 12% -25%,rgba(255,255,255,.11),transparent 38%),
      linear-gradient(115deg,#0b6548 0%,#0f6f4b 56%,#07513c 100%)!important;
    border-bottom:2px solid rgba(214,170,60,.74)!important;
    box-shadow:0 8px 24px rgba(4,61,47,.15)!important;
  }

  header nav.wrap{
    min-height:72px!important;
    gap:10px!important;
  }

  header .header-brand{
    margin:0!important;
    min-width:0!important;
    max-width:calc(100% - 62px)!important;
  }

  header .header-full-logo{
    width:150px!important;
    max-width:100%!important;
    height:auto!important;
    max-height:50px!important;
    object-fit:contain!important;
    object-position:left center!important;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.10));
  }

  header .mobile{
    margin-left:auto!important;
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(15,111,75,.08)!important;
    border-radius:50%!important;
    background:#fff!important;
    color:var(--qpn-m-deep)!important;
    box-shadow:0 5px 16px rgba(4,72,50,.16)!important;
    font-size:0!important;
    line-height:1!important;
    position:relative!important;
  }

  header .mobile::before{
    content:"☰";
    font-family:Arial,sans-serif;
    font-size:24px;
    font-weight:700;
    line-height:1;
    color:var(--qpn-m-deep);
  }

  header .navlinks{
    top:72px!important;
    max-height:calc(100svh - 72px)!important;
    padding:12px 14px calc(18px + env(safe-area-inset-bottom))!important;
    gap:7px!important;
    background:rgba(250,253,250,.985)!important;
    border-top:1px solid rgba(214,170,60,.30)!important;
    box-shadow:0 18px 36px rgba(5,62,45,.18)!important;
    backdrop-filter:blur(16px);
  }

  header .navlinks>a{
    width:100%!important;
    min-height:46px!important;
    padding:11px 14px!important;
    border:1px solid rgba(15,111,75,.08)!important;
    border-radius:15px!important;
    background:linear-gradient(180deg,#f5fbf7,#edf7f1)!important;
    color:var(--qpn-m-deep)!important;
    display:flex!important;
    align-items:center!important;
    text-align:left!important;
    font-weight:700!important;
  }

  header .navlinks>a.active,
  header .navlinks>a:hover{
    background:linear-gradient(180deg,#15885a,#0e734f)!important;
    color:#fff!important;
    border-color:#0e734f!important;
  }

  header .language-picker{
    width:100%!important;
    margin-top:4px!important;
    padding:7px 9px!important;
    border-radius:15px!important;
    background:#eef8f2!important;
    border:1px solid rgba(15,111,75,.10)!important;
  }

  header .ml-language-select,
  header .language-picker select{
    min-height:44px!important;
    border-radius:12px!important;
    background:#fff!important;
    color:var(--qpn-m-deep)!important;
  }

  /* ---------- Existing announcement ribbon ---------- */
  .qpn-header-message-ribbon{
    top:72px!important;
    min-height:32px!important;
    background:linear-gradient(90deg,#064836,#0a5d44 50%,#064836)!important;
    color:#f2d574!important;
    border-top:0!important;
    border-bottom:1px solid rgba(214,170,60,.42)!important;
    box-shadow:0 4px 12px rgba(5,58,44,.08)!important;
  }

  .qpn-header-message-ribbon-track{
    font-size:.70rem!important;
    font-weight:400!important;
    line-height:1.25!important;
    animation-duration:24s!important;
  }

  /* ---------- Concept-3 inner-page hero ---------- */
  .hero,
  .pagehero{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    padding:42px 0 38px!important;
    background:
      radial-gradient(circle at 50% 4%,rgba(255,255,255,1) 0 24%,transparent 25%),
      radial-gradient(circle at 0 0,rgba(158,207,171,.42),transparent 38%),
      radial-gradient(circle at 100% 0,rgba(158,207,171,.42),transparent 38%),
      linear-gradient(180deg,#f7fcf8,#ffffff 72%)!important;
    border-bottom:1px solid rgba(15,111,75,.08)!important;
  }

  .hero::before,
  .pagehero::before,
  .hero::after,
  .pagehero::after{
    content:"";
    position:absolute;
    z-index:-1;
    top:-96px;
    width:72%;
    height:178px;
    border-radius:50%;
    background:linear-gradient(180deg,rgba(143,198,158,.34),rgba(224,242,229,.08));
    pointer-events:none;
  }
  .hero::before,.pagehero::before{left:-34%;transform:rotate(12deg)}
  .hero::after,.pagehero::after{right:-34%;transform:rotate(-12deg)}

  .hero-grid,
  .split{
    grid-template-columns:1fr!important;
    gap:22px!important;
  }

  .hero .eyebrow,
  .pagehero .eyebrow,
  .kicker{
    color:#a97f1e!important;
    text-transform:none!important;
    letter-spacing:.05em!important;
  }

  html body .hero h1,
  html body .pagehero h1,
  html body .split h2,
  html body .section-title,
  html body h1.page-title,
  html body .hero-title{
    color:#073f30!important;
    font-size:24px!important;
    line-height:1.34!important;
    font-weight:700!important;
    letter-spacing:-.01em!important;
    text-wrap:balance;
  }

  .hero h1,
  .pagehero h1{
    margin:10px 0 15px!important;
  }

  .hero h1::after,
  .pagehero h1::after{
    content:"";
    display:block;
    width:102px;
    height:2px;
    margin:17px 0 0;
    background:linear-gradient(90deg,var(--qpn-m-gold) 0 42%,transparent 42% 50%,var(--qpn-m-gold) 50% 92%,transparent 92%);
  }

  html body .lead,
  html body .copy,
  html body .section p,
  html body .pagehero p{
    color:var(--qpn-m-muted)!important;
    font-size:16px!important;
    line-height:1.72!important;
  }

  /* ---------- Hero operational card ---------- */
  .opcard{
    width:100%!important;
    padding:20px!important;
    border-radius:24px!important;
    background:
      radial-gradient(circle at 90% 8%,rgba(214,170,60,.11),transparent 25%),
      linear-gradient(145deg,#0b694a,#064735)!important;
    border:1px solid rgba(214,170,60,.18)!important;
    box-shadow:0 18px 38px rgba(5,67,49,.18)!important;
    color:#fff!important;
  }
  .opcard .top,
  .opcard .motto{color:#e5bf59!important}
  .opcard .flow{grid-template-columns:36px 1fr!important;gap:12px!important;padding:12px 0!important}
  .opcard .num{width:36px!important;height:36px!important;color:#e5bf59!important}
  .opcard .flow strong{color:#fff!important;font-size:18px!important;line-height:1.35!important}
  .opcard .flow p{color:rgba(255,255,255,.78)!important;font-size:14px!important;line-height:1.58!important}

  /* ---------- Section rhythm ---------- */
  .section,
  .qpn-section{
    padding:44px 0!important;
    background:rgba(255,255,255,.82)!important;
    border-top:1px solid rgba(15,111,75,.045)!important;
    border-bottom:1px solid rgba(15,111,75,.045)!important;
  }

  main>.section:nth-of-type(even):not(.darksec),
  .qpn-section-alt{
    background:linear-gradient(180deg,#f1f9f4,#f8fcf9)!important;
  }

  .section h2,
  .qpn-section h2{
    margin-top:9px!important;
  }

  /* ---------- Dark sections ---------- */
  .section.darksec,
  .darksec{
    background:
      radial-gradient(circle at 90% 8%,rgba(214,170,60,.09),transparent 23%),
      linear-gradient(145deg,#0b694a,#064735)!important;
    color:#fff!important;
  }

  .darksec h1,
  .darksec h2,
  .darksec h3,
  .darksec h4,
  .darksec strong{color:#fff!important}
  .darksec .kicker{color:#e4bc55!important}
  .darksec p,
  .darksec .copy{color:rgba(255,255,255,.82)!important}
  .darksec a:not(.btn):not(.qpn-btn){color:#f0d06d}

  /* Light cards inside dark sections must remain readable. */
  .darksec .ml-card--light,
  .darksec .ml-card,
  .darksec .phase-metric,
  .darksec .phase-card,
  .darksec .phase-fin,
  .darksec .notice-research,
  .darksec .principle{
    background:linear-gradient(180deg,#ffffff,#f8fcf9)!important;
    color:var(--qpn-m-ink)!important;
    border-color:rgba(15,111,75,.12)!important;
    box-shadow:var(--qpn-m-shadow)!important;
  }
  .darksec .ml-card--light h1,
  .darksec .ml-card--light h2,
  .darksec .ml-card--light h3,
  .darksec .ml-card--light strong,
  .darksec .ml-card h1,
  .darksec .ml-card h2,
  .darksec .ml-card h3,
  .darksec .ml-card strong,
  .darksec .phase-metric strong,
  .darksec .phase-card strong,
  .darksec .phase-fin strong,
  .darksec .principle strong{
    color:#07513b!important;
  }
  .darksec .ml-card--light p,
  .darksec .ml-card p,
  .darksec .phase-metric p,
  .darksec .phase-card p,
  .darksec .phase-fin p,
  .darksec .principle,
  .darksec .principle p,
  .darksec .notice-research p{
    color:#526b61!important;
  }

  /* ---------- Cards / panels ---------- */
  .card,
  .ml-card,
  .page-card,
  .principle-card,
  .access-card,
  .status-card,
  .community-card,
  .disclaimer-card,
  .support-card,
  .privacy-card,
  .resource-card,
  .terms-card,
  .transparency-card,
  .vision-card,
  .volunteer-card,
  .contact-card,
  .notice-box,
  .contact-shell,
  .emergency-shell,
  .phase-card,
  .phase-fin,
  .phase-metric,
  .journey-step,
  .sponsor-card,
  .research-card,
  .research-planning-card,
  .method-card,
  .step-card,
  .triage-card,
  .status-box,
  .schedule-panel,
  .sitemap-card,
  .update-card,
  .qpn-card{
    width:100%;
    border:1px solid var(--qpn-m-line)!important;
    border-radius:22px!important;
    background:linear-gradient(180deg,#fff,#f9fcfa)!important;
    box-shadow:var(--qpn-m-shadow)!important;
  }

  .card,
  .ml-card,
  .page-card,
  .principle-card,
  .access-card,
  .status-card,
  .community-card,
  .disclaimer-card,
  .support-card,
  .privacy-card,
  .resource-card,
  .terms-card,
  .transparency-card,
  .vision-card,
  .volunteer-card,
  .contact-card,
  .phase-card,
  .phase-fin,
  .phase-metric,
  .journey-step,
  .sponsor-card,
  .research-card,
  .research-planning-card,
  .method-card,
  .step-card,
  .triage-card,
  .status-box,
  .schedule-panel,
  .sitemap-card,
  .update-card,
  .qpn-card{
    padding:18px!important;
  }

  .card h3,
  .ml-card h3,
  .page-card h3,
  .qpn-card h3,
  .research-card h3,
  .resource-card h3,
  .support-card h3,
  .sitemap-card h3,
  .update-card h3{
    color:#07513b!important;
    font-size:18px!important;
    line-height:1.4!important;
  }

  .card p,
  .ml-card p,
  .page-card p,
  .qpn-card p,
  .research-card p,
  .resource-card p,
  .support-card p,
  .sitemap-card p,
  .update-card p{
    color:#526b61!important;
    font-size:15px!important;
    line-height:1.65!important;
  }

  /* Common grids collapse naturally on phones. */
  .cards,
  .district-grid,
  .form-grid,
  .page-grid,
  .access-grid,
  .status-grid,
  .community-cards,
  .workflow-grid,
  .principle-grid,
  .research-grid,
  .sitemap-grid,
  .qpn-grid-2,
  .phase-card-grid,
  .phase-metric-grid,
  .phase-fin-grid,
  .journey-grid,
  .support-grid,
  .resource-grid,
  .volunteer-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .field.full,
  .emergency-field.full,
  .qpn-hrr-span-2{grid-column:auto!important}

  /* ---------- Forms ---------- */
  form,
  .contact-shell,
  .emergency-shell{
    max-width:100%!important;
  }

  .contact-shell,
  .emergency-shell{
    padding:18px!important;
  }

  label{
    color:#07513b!important;
    font-size:12px!important;
    font-weight:800!important;
  }

  input,
  select,
  textarea{
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    padding:11px 12px!important;
    border:1px solid rgba(15,111,75,.18)!important;
    border-radius:13px!important;
    background:#fff!important;
    color:#15352a!important;
    font-size:16px!important; /* prevents iOS focus zoom */
    box-shadow:none!important;
  }
  textarea{min-height:128px!important}
  input:focus,
  select:focus,
  textarea:focus{
    border-color:#16825a!important;
    box-shadow:0 0 0 4px rgba(15,111,75,.09)!important;
    outline:none!important;
  }

  .emergency-grid,
  .contact-gps-grid,
  .qpn-hrr-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .emergency-field.full,
  .contact-gps-field.full,
  .qpn-hrr-span-2{grid-column:1/-1!important}

  /* ---------- Buttons ---------- */
  .btn,
  .qpn-btn,
  button.btn,
  a.btn{
    min-height:50px!important;
    border-radius:999px!important;
    padding:10px 18px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-weight:700!important;
  }

  .btn.primary,
  .btn.secondary,
  .primary,
  .secondary,
  .qpn-btn.primary,
  .qpn-btn.secondary,
  .contact-request-primary,
  .current-location-btn,
  #getPickupRequestLocation,
  #forwardPickupRequest{
    background:linear-gradient(180deg,#138957,#0e754c)!important;
    border-color:#0e754c!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    box-shadow:0 7px 16px rgba(14,117,76,.18)!important;
  }

  .actions{
    gap:10px!important;
    margin-top:20px!important;
  }
  .actions .btn,
  .pickup-actions .btn,
  .emergency-actions .btn{
    width:100%!important;
  }

  .btn:disabled,
  .qpn-btn:disabled{
    opacity:.60!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }

  /* ---------- Notices / lists / FAQ ---------- */
  .notice,
  .notice-box,
  .emergency-warning,
  .policy-box,
  .status-panel{
    border:1px solid rgba(15,111,75,.12)!important;
    border-radius:17px!important;
    background:#f7fbf8!important;
    color:#425f54!important;
    box-shadow:0 6px 18px rgba(13,84,58,.04)!important;
  }

  .faq-item{
    border:1px solid rgba(15,111,75,.10)!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 8px 20px rgba(13,84,58,.05)!important;
    overflow:hidden;
  }

  /* ---------- Tables ---------- */
  table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    border:1px solid rgba(15,111,75,.10)!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 8px 20px rgba(13,84,58,.05)!important;
  }
  table th{background:#eef8f2!important;color:#07513b!important}
  table th,table td{min-width:120px;border-color:rgba(15,111,75,.08)!important}

  /* ---------- Media ---------- */
  main img:not(.full-brand-logo):not(.qpn-scrolltop-icon){
    max-width:100%!important;
    height:auto!important;
  }
  .qpn-photo,
  figure img{
    border-radius:18px!important;
    box-shadow:0 10px 24px rgba(13,84,58,.07)!important;
  }

  /* ---------- Footer: Concept-3 dark green + gold curve ---------- */
  footer{
    position:relative!important;
    overflow:hidden!important;
    padding:56px 0 calc(24px + env(safe-area-inset-bottom))!important;
    background:
      radial-gradient(circle at 50% -35%,rgba(214,170,60,.12),transparent 28%),
      linear-gradient(180deg,#0d6549,#07513c 48%,#043d2f)!important;
    border-top:4px solid var(--qpn-m-gold)!important;
    box-shadow:0 -12px 30px rgba(5,67,49,.10)!important;
  }

  footer::before{
    content:"";
    position:absolute;
    top:-47px;
    left:50%;
    width:180px;
    height:76px;
    transform:translateX(-50%);
    background:#f7fbf7;
    border-radius:0 0 50% 50%;
    border-bottom:2px solid rgba(214,170,60,.70);
    pointer-events:none;
  }

  footer .wrap.footer-grid{
    width:calc(100% - 28px)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-auto-flow:row!important;
    gap:18px!important;
    margin-inline:auto!important;
  }

  footer .footer-widget{
    grid-column:1!important;
    grid-row:auto!important;
    width:100%!important;
    margin:0!important;
    min-width:0!important;
  }

  footer .footer-brand-widget{
    text-align:center!important;
    padding-bottom:6px;
  }
  footer .footer-logo-brand{
    width:100%!important;
    display:flex!important;
    justify-content:center!important;
  }
  footer .footer-full-logo{
    width:210px!important;
    max-width:80%!important;
    margin-inline:auto!important;
    object-position:center!important;
  }
  footer .footer-brand-widget p{
    max-width:320px!important;
    margin:12px auto!important;
    color:rgba(255,255,255,.72)!important;
    font-size:14px!important;
  }

  footer .flinks{
    padding:14px 16px!important;
    border-radius:17px!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.07)!important;
    gap:7px!important;
  }
  footer .ftitle{color:#e3bd57!important;font-size:11px!important}
  footer .flinks a,
  footer .foot-email a{
    color:rgba(255,255,255,.78)!important;
    font-size:13px!important;
    line-height:1.55!important;
  }
  footer .bottom{
    width:calc(100% - 28px)!important;
    margin:24px auto 0!important;
    padding-top:16px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:8px!important;
    text-align:center!important;
    color:rgba(255,255,255,.48)!important;
    font-size:11px!important;
  }

  /* ---------- Floating controls ---------- */
  .qpn-emergency-float,
  .whatsapp-float,
  .qpn-support-float{
    right:12px!important;
  }
  .scrolltop{right:12px!important}

  /* ---------- Long words / URLs ---------- */
  main,
  .section,
  .card,
  .ml-card,
  .copy,
  .lead,
  .footer-widget{
    overflow-wrap:anywhere;
    word-break:normal;
  }
}


/* ============================================================
   QPN MOBILE DARK-GREEN HEADING READABILITY FIX — v1.1.0
   Applies only to smartphones and only to `.darksec` sections.
   ============================================================ */
@media (max-width:719px){
  html body .section.darksec h1,
  html body .section.darksec h2,
  html body .section.darksec h3,
  html body .section.darksec h4,
  html body .section.darksec h5,
  html body .section.darksec h6,
  html body .darksec h1,
  html body .darksec h2,
  html body .darksec h3,
  html body .darksec h4,
  html body .darksec h5,
  html body .darksec h6,
  html body .section.darksec .section-title,
  html body .section.darksec .hero-title,
  html body .section.darksec .page-title,
  html body .section.darksec .title,
  html body .section.darksec .heading,
  html body .darksec .section-title,
  html body .darksec .hero-title,
  html body .darksec .page-title,
  html body .darksec .title,
  html body .darksec .heading{
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    opacity:1!important;
  }

  html body .section.darksec .kicker,
  html body .darksec .kicker,
  html body .section.darksec .eyebrow,
  html body .darksec .eyebrow{
    color:#e4bc55!important;
    -webkit-text-fill-color:#e4bc55!important;
  }
}


/* ==========================================================
   QPN MOBILE HEADER — ROBUST STICKY/FIXED BEHAVIOUR
   v1.2.0
   ----------------------------------------------------------
   Keeps the Concept-3 header and announcement ribbon visible
   while scrolling on smartphones. Desktop is not affected.
   ========================================================== */
@media (max-width:719px){
  :root{
    --qpn-mobile-header-height:72px;
    --qpn-mobile-ribbon-height:32px;
    --qpn-mobile-fixed-top:
      calc(var(--qpn-mobile-header-height) + var(--qpn-mobile-ribbon-height));
  }

  html{
    scroll-padding-top:calc(var(--qpn-mobile-fixed-top) + 12px)!important;
  }

  body{
    padding-top:var(--qpn-mobile-fixed-top)!important;
  }

  body > header{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:10020!important;
    margin:0!important;
  }

  body > header nav.wrap{
    min-height:var(--qpn-mobile-header-height)!important;
    height:var(--qpn-mobile-header-height)!important;
  }

  body > .qpn-header-message-ribbon{
    position:fixed!important;
    top:var(--qpn-mobile-header-height)!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    min-height:var(--qpn-mobile-ribbon-height)!important;
    height:var(--qpn-mobile-ribbon-height)!important;
    z-index:10010!important;
    margin:0!important;
  }

  body > main{
    position:relative!important;
    z-index:1;
  }

  body > main [id]{
    scroll-margin-top:calc(var(--qpn-mobile-fixed-top) + 12px);
  }
}