/* ==========================================================================
   Pacific Web — Responsive Rules
   ========================================================================== */

/* Prevent decorative/absolute-positioned elements (hero video, hero-bg-section
   image, price badges, etc.) from ever creating horizontal scroll on phones. */
html, body{ overflow-x:hidden; max-width:100%; }

:root{
  --navbar-h: 72px; /* fallback lang; JS ang nagse-set ng totoong height */
}

/* FIX (Zeys — mobile menu conflict): dating dito rin naka-set ang buong
   mobile nav open/close (".nav-links{display:none}" bare selector, at
   isang buong LUMANG bersyon ng ".nav-links.mobile-open" — top-dropdown,
   white background, z-index:895). Dahil ito ang HULING CSS file na
   na-load ng browser (pagkatapos ng style.css), palagi itong nananalo sa
   cascade laban sa bagong off-canvas panel — kaya kung ano man ang gawin
   sa style.css, ito rin ang lumalabas (o minsan wala talagang lumalabas,
   depende sa stacking context/z-index). Buong mobile-nav ownership ay
   inilipat na ngayon sa style.css lang — WALA na dapat ibang file na
   gagalaw sa ".nav-links", ".nav-toggle", o ".mega-menu" visibility/
   position/display para sa mobile menu. Dito lang pinapayagan ang
   PURELY COSMETIC na overrides (padding/margin/gutter) na hindi
   nakikialam sa show/hide logic — tignan sa ibaba (may markers).

   Ang natirang scroll-lock rule (html.nav-open) ay pinanatili dahil
   pareho lang ito ng ginagawa sa style.css — hindi nag-conflict,
   idempotent lang, at safety net kung saka-sakaling naka-comment out
   isa sa dalawa sa hinaharap. */
html.nav-open, html.nav-open body{
  overflow:hidden;
  height:100%;
}

/* Iniiwasan na ma-overflow yung desktop mega-menu (640px/520px width) sa
   mas maliliit na browser window o tablet bago pa mag-kick in yung mobile
   nav breakpoint (hal. split-screen tablet, maliit na laptop). Cosmetic
   lang ito (max-width cap) — hindi nagbabago ng display/position, kaya
   ligtas na manatili kahit saang breakpoint. */
.mega-menu{ max-width:calc(100vw - 48px); }

/* FIX (logo too close to the edge on mobile): dating .navbar-inner at
   .container ay MAGKAPAREHONG div sa header.php (<div class="container
   navbar-inner">), hindi nested — kaya ang padding:18px 0 shorthand ng
   .navbar-inner (style.css) ay nag-zero-out sa left/right padding ng
   .container. Itong file lang ang nagbibigay ng horizontal breathing
   room sa navbar, pero sobrang liit ang naunang value (4px, bumababa pa
   sa 14px sa pinaka-maliit na breakpoint) — kaya sobrang tabi ng logo.
   Pinalaki at pinare-pareho na ang value (20px) sa lahat ng mobile
   breakpoints dito para hindi na bumababa habang lumiliit ang screen. */
.navbar-inner{
  padding-left: max(env(safe-area-inset-left), 20px);
  padding-right: max(env(safe-area-inset-right), 20px);
}

@media (max-width: 1080px){
  .footer-top{grid-template-columns:1.4fr 1fr 1fr;}
  .footer-col.col-services{order:4;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .stats-bar{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{display:none;}
  .hero-video{display:block;} /* swap the static hero-visual artwork for the video below this width */
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .mega-menu{width:520px;}
  .form-grid{grid-template-columns:1fr;}

  /* hero-bg-section is decorative-only (empty overlay) — shrink it so it
     doesn't eat vertical space once the layout gets tight */
  .hero-bg-section, .hero-bg-overlay{min-height:280px;}
}

/* FIX: dating may buong nav open/close block dito sa 860px (bare
   ".nav-links{display:none}", lumang ".nav-links.mobile-open" dropdown,
   at duplicate ".nav-toggle{display:flex}"). Tinanggal na lahat ng
   mobile-nav SHOW/HIDE logic — nasa style.css na lang ito (900px
   breakpoint, off-canvas panel). Ang natira dito ay purely cosmetic
   gutter/spacing na hindi nakikialam sa visibility, kaya safe na
   manatili sa kanya-kanyang dating breakpoint. */
@media (max-width: 860px){
  .footer-top{grid-template-columns:1fr 1fr;}

  /* Sakto lang ang space ng logo sa mobile — hindi na siya dumidikit sa
     gilid, consistent na sa 20px value sa buong mobile range (dating
     16px dito, mas mababa pa sa base rule sa itaas). Cosmetic lang —
     hindi nagtatakda ng display/position/z-index kaya hindi ito
     nag-conflict sa off-canvas panel ng style.css. */
  .navbar-inner{
    padding-left: 20px;
    padding-right: 20px;
  }
  .brand{ margin-right: 12px; }
}

@media (max-width: 768px){
  /* fully hide the decorative bg-image section on phones — it has no
     content, and the floating right-side image just looks broken here */
  .hero-bg-section{display:none;}

  /* Hero video now covers the ENTIRE first landing viewport on phones,
     instead of just sitting inside the padded hero block. */
  .hero{
    min-height:100svh;
    display:flex;
    align-items:center;
    padding:120px 0 56px;
  }
  .hero-video{
    width:100%;height:100%;
    min-height:100svh;
  }
  /* readability scrim over the video so white hero text stays legible;
     sits above the video/gradient (z-index:0, generated last) but below
     .hero-inner (z-index:2) */
  .hero::after{
    content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg, rgba(10,31,51,.35) 0%, rgba(10,31,51,.75) 100%);
    pointer-events:none;
  }
}

@media (max-width: 680px){
  .section{padding:64px 0;}
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
  .stats-bar{grid-template-columns:1fr 1fr;padding:32px 24px;margin-top:-56px;}
  .stat-item b{font-size:1.6rem;}
  .footer-top{grid-template-columns:1fr;gap:36px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .footer-bottom a{margin-left:0;margin-right:16px;}
  .hero{padding:90px 0 90px;}

  /* FIX: dating 14px dito — mas mababa pa sa 860px breakpoint's 16px,
     kaya lalong dumidikit sa gilid ang logo habang lumiliit ang screen.
     Ngayon 20px, kapareho ng ibang mobile breakpoints. */
  .navbar-inner{
    padding-left: 20px;
    padding-right: 20px;
  }

  .chat-window{right:16px;left:16px;width:auto;bottom:96px;max-height:65vh;}
  .chat-toggle{right:16px;}
  .chat-header{padding:14px 16px;flex-wrap:wrap;row-gap:8px;}
  .chat-lang{margin-left:0;}

  .compare-table{display:block;overflow-x:auto;white-space:nowrap;}
  .form-grid{gap:0;}

  .hero-cta .btn{white-space:normal;}
  .newsletter-form{flex-wrap:wrap;}
  .newsletter-form input{min-width:0;}

  .container{padding:0 18px;}

  /* ==========================================================================
     Center-align content sa mobile view (≤680px)

     FIX: ang generic ".card, [class*='-card']" rule sa ibaba ay
     dating tinatamaan din ang ".nav-links" dahil sa lumang markup —
     ngayon wala na itong epekto sa nav dahil buo na ang .nav-links sa
     off-canvas panel (fixed position, hindi sumasali sa normal na
     centered content flow). Walang ibang binago dito, purely layout
     centering para sa cards/grids/footer — hiwalay sa nav.
     ========================================================================== */
  .hero-inner{justify-items:center;text-align:center;}
  .hero-content, .hero-text, .hero-copy{text-align:center;align-items:center;}
  .hero-cta{justify-content:center;flex-wrap:wrap;}
  .hero-stats{justify-content:center;text-align:center;}
  .section-head{text-align:center;margin-left:auto;margin-right:auto;}

  .grid-2, .grid-3, .grid-4{justify-items:center;}
  .grid-2 > *, .grid-3 > *, .grid-4 > *{text-align:center;}
  .card, [class*="-card"]{
    display:flex;flex-direction:column;align-items:center;text-align:center;
  }

  .stats-bar{text-align:center;justify-items:center;}

  .footer-top{text-align:center;justify-items:center;}
  .footer-col{display:flex;flex-direction:column;align-items:center;}
  .footer-col ul{padding:0;list-style:none;text-align:center;}

  .newsletter-form{justify-content:center;}
  .compare-table{margin-left:auto;margin-right:auto;}
  .form-grid{justify-items:center;text-align:center;}

  /* -------------------------------------------------------------------
     Fiber plan cards — mobile-only carousel (≤680px).
     NOTE: the generic ".card, [class*='-card']" rule above also matches
     .plan-card and was forcing align-items:center on a flex column,
     which shrank the card to fit its content and squashed/centered the
     feature list — that's what was "breaking" the plan cards on phones.
     The rules below restore full-width cards and turn the row into a
     horizontal, swipeable, scroll-snap carousel instead of a stack.
     ------------------------------------------------------------------- */
  .plan-card{
    align-items:stretch;
    width:100%;
  }
  .plan-card .plan-features{
    width:100%;
    text-align:left;
  }

  .plans-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:18px;
    margin:0 -18px;
    padding:4px 18px 22px;
    scrollbar-width:none;
  }
  .plans-grid::-webkit-scrollbar{display:none;}
  .plans-grid .plan-card{
    scroll-snap-align:center;
    flex:0 0 84%;
  }

  .plans-carousel-nav{
    display:flex;justify-content:center;gap:14px;margin-top:2px;
  }
  .plans-carousel-nav button{
    width:40px;height:40px;border-radius:50%;border:1px solid var(--pw-gray-200);
    background:#fff;color:var(--pw-navy);display:flex;align-items:center;justify-content:center;
    font-size:1rem;box-shadow:var(--shadow-card);
  }
  .plans-carousel-nav button:active{transform:translateY(1px);}

  .plans-carousel-dots{
    display:flex;justify-content:center;gap:8px;margin-top:14px;
  }
  .plans-carousel-dots button{
    width:8px;height:8px;border-radius:50%;border:none;background:var(--pw-gray-200);padding:0;
  }
  .plans-carousel-dots button.active{
    background:var(--pw-green-500);width:20px;border-radius:999px;transition:width .25s ease,background .25s ease;
  }
}