/* ------------------------------------------------------------
   Public Planet Mobile Overrides
------------------------------------------------------------ */

@media (max-width:768px){

  /* Header */

  .hdr-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:.5rem;

    padding:.75rem;
  }

  .brand{
    width:100%;
  }

  .brand span{
    font-size:1rem;
  }

  .actions{
    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:.35rem;
  }

  #search-toggle{
    display:none !important;
  }

  .mobile-nav-toggle{
    border:1px solid rgba(255,255,255,.14);

    background:rgba(255,255,255,.06);

    color:#e0eaf3;

    border-radius:999px;

    padding:.38rem .7rem;

    font-size:.72rem;

    font-weight:700;

    cursor:pointer;

    white-space:nowrap;

    line-height:1;

    display:flex;

    align-items:center;

    gap:.25rem;

    height:34px;
  }

  .world-clocks{
    display:none;
  }

 /* Navigation Drawer */

 .nav{

   position:fixed;

   top:12px;
   left:12px;

   width:26%;
   min-width:180px;
   max-width:220px;

   height:calc(100dvh - 110px);

   background:rgba(224,234,243,.12);

   backdrop-filter:blur(18px);
   -webkit-backdrop-filter:blur(18px);

   border:1px solid rgba(224,234,243,.18);

   border-radius:24px;

   z-index:9999;

   overflow-y:auto;

   transform:translateX(calc(-100% - 24px));

   opacity:0;

   transition:
     transform .35s cubic-bezier(.22,.61,.36,1),
     opacity .25s ease;

   box-shadow:
     0 0 30px rgba(0,0,0,.35);

   display:block;
 }

 .nav.mobile-nav-open{

   transform:translateX(0);

   opacity:1;
 }

 .nav ul{

    display:flex;

    flex-direction:column;

    gap:0;

    padding:1rem 0 1rem;
  }

 .nav li{

   border-bottom:
     1px solid rgba(255,255,255,.08);
 }

 .nav a{

    display:block;

    padding:.9rem 1.25rem;

    color:#f0f2f8;

 }
   

  /* Dark backdrop */

  .nav::before{
    content:"";

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    pointer-events:none;

    transition:opacity .32s ease;
  }

  .nav.mobile-nav-open::before{
    opacity:1;
  }

  /* Hero */

  .hero-title{
    font-size:1.6rem;
  }

  .hero-tag{
    font-size:.9rem;
  }

  /* Feed */

  #content-inner{
    padding:0 .5rem;
  }

  .story-body{
    padding:.85rem;
  }

  /* Scaled up font sizes for comfortable mobile reading */
  .story-title{
    font-size: 1.15rem;
    line-height: 1.35;
  }

  .story-summary{
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .story-meta{
    gap:.35rem;
  }

  .bias-pill,
  .source-pill{
    font-size:.72rem;
  }

  .pub-date{
    font-size:.72rem;
  }

  /* Quiz */

  .quiz-panel{
    width:100%;
    right:-100%;
  }

  .quiz-panel.open{
    right:0;
  }

  #content-inner.quiz-open{
    padding-right:0;
  }

  /* Rolodex */

  .story-carousel-enabled{
    width:100%;
    margin-left:0;
  }

  .story-carousel-enabled .story-stack-card{
      width:calc(100% - 12px);
    }

    .story-stack-hint{
      display:none;
    }

    /* Footer */

    footer{
      font-size:.82rem;
      padding-left:1rem;
      padding-right:1rem;
    }

  }

  @media (min-width:769px){

    .mobile-nav-toggle{
      display:none;
    }

  }

/* ------------------------------------------------------------
   Mobile Optimization for Weather Ticker (Instant & Smooth)
------------------------------------------------------------ */

/* 1. Prevent Flexbox Text Wrapping & Overflow Breakup */
#weather-ticker-bar {
  flex-wrap: nowrap !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #1b263b !important; /* Solid dark tone for performance */
}

/* 2. Disable heavy CSS mask gradients on mobile (fixes frame drops) */
.weather-ticker-viewport {
  min-width: 0 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.weather-alert-item {
  white-space: nowrap !important;
}

/* 3. Hardware Layering */
.weather-ticker-track {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 4. Start text at screen boundary (100vw) so it appears immediately */
@keyframes weather-marquee {
  0%   { transform: translate3d(100vw, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* 5. Mobile Specific Adjustments & Scaled Down Font */
@media (max-width: 768px) {
  
  /* Compact bar height */
  #weather-ticker-bar {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.72rem !important;
  }

  /* Scaled down, lightweight ticker text */
  .weather-alert-item {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    margin-right: 2rem !important;
  }

  .weather-alert-item strong {
    font-weight: 700 !important;
  }

  /* Prevents iOS Safari auto-zoom on input focus */
  #weather-location-input {
    font-size: 16px !important; 
    width: 80px !important;
    padding: 0.15rem 0.4rem !important;
  }
  
  #weather-location-input:focus {
    width: 100px !important;
  }

  /* Smooth scroll speed starting from screen edge */
  .weather-ticker-track {
    animation: weather-marquee 28s linear infinite !important;
  }

  /* Compact badges & buttons */
  .weather-badge {
    font-size: 0.65rem !important;
    padding: 0.12rem 0.35rem !important;
    margin-right: 0.35rem !important;
  }

  .weather-location-wrap {
    margin-right: 0.35rem !important;
  }

  .weather-ticker-toggle-btn {
    font-size: 0.68rem !important;
    padding: 0.15rem 0.4rem !important;
  }
}