/* Responsive Styles (Media Queries) */

/* ===== DESKTOP STYLES (min-width: 992px) ===== */
@media screen and (min-width: 992px) {

  /* Desktop: show desktop nav, hide mobile overlay & button */
  .burger-menu-btn { 
    display: none !important; 
  }
  .burger-menu {
    display: none !important;  /* prevent overlay from existing on desktop */
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Layout Adjustments */
  .mobile-random-btn { display: none !important; }
  .random-btn { display: block; }  /* desktop button visible */
  .main-nav div:nth-child(2) { display: block; } /* random link in main nav */

  .container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }

  .main {
    margin-left: 250px; /* Account for fixed sidebar */
    padding: 20px;
  }

  /* Entry Page Specific Desktop Layout */
  .main-content-layout { flex-direction: row; }

  .image_bio_box {
    width: 280px;
    position: sticky;
    top: 100px;
  }

  .main-image {
    width: 280px;
    height: 280px;
    margin: 0;
  }

  .entry-content {
    flex: 1;
    max-width: calc(100% - 310px);
  }

  /* Sidebar - Desktop Specifics */
  .sidebar { top: 0px; height: 100vh; }

  /* Typography (Desktop specific sizes) */
  h1 { font-size: 3.2rem; }
  h2 { font-size: 2.8rem; }
  h3 { font-size: 2.4rem; }
  h4 { font-size: 2.0rem; }
  h5 { font-size: 1.8rem; }
  h6 { font-size: 1.6rem; }

  .d-lg-block { display: block !important; }
  .d-lg-none { display: none !important; }
}

/* ===== MOBILE & TABLET STYLES (max-width: 991px) ===== */
@media screen and (max-width: 991px) {

  /* Mobile: hide desktop nav, show burger button & overlay */
  .main-nav { display: none !important; }

  .burger-menu-btn{
    --size: 44px;
    --line-w: 22px;
    --line-h: 2px;
    --gap: 6px;
    --ring: 99 102 241;
    width: var(--size);
    height: var(--size);
    position: relative;
    display: inline-block !important;
    cursor: pointer;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, transform .2s ease;
    z-index: 2002; /* above header so it’s always tappable */
  }
  .burger-menu-btn:hover{ background-color: rgba(0,0,0,.06); }
  @media (prefers-color-scheme: dark){
    .burger-menu-btn:hover{ background-color: rgba(255,255,255,.06); }
  }

  .burger-menu-btn::before,
  .burger-menu-btn::after{
    content: "";
    position: absolute;
    left: 50%;
    width: var(--line-w);
    height: var(--line-h);
    background: currentColor;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .burger-menu-btn::before{ top: calc(50% - var(--gap)); }
  .burger-menu-btn::after { top: calc(50% + var(--gap)); }

  .burger-menu-btn{
    background-image: linear-gradient(currentColor,currentColor);
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--line-w) var(--line-h);
    color: rgb(17,24,39);
  }
  @media (prefers-color-scheme: dark){ .burger-menu-btn{ color: rgb(229,231,235); } }

  .burger-menu-btn:focus-visible{
    outline: 2px solid rgb(var(--ring));
    outline-offset: 3px;
  }

  .burger-menu-btn.is-open::before{
    transform: translate(-50%, 0) rotate(45deg);
    top: 50%;
  }
  .burger-menu-btn.is-open::after{
    transform: translate(-50%, 0) rotate(-45deg);
    top: 50%;
  }
  .burger-menu-btn.is-open{
    background-size: 0 var(--line-h);
  }

  /* Mobile overlay (left sheet only — removed conflicting right-side rules) */
  .burger-menu{
    position: fixed; inset: 0;
    z-index: 2000;
    pointer-events: none;         /* off when closed */
    opacity: 0;
    transition: opacity .3s cubic-bezier(.2,.8,.2,1);
  }

  .burger-menu::before{
    content: "";
    position: absolute; inset: 0;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    background: color-mix(in oklab, rgba(60, 97, 76, 0.45) 100%, transparent 0%);
    opacity: 0;
    transition: opacity .3s cubic-bezier(.2,.8,.2,1);
  }

  .burger-menu > ul{
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: min(92vw, 420px);
    margin: 0;
    margin-left: 10px;
    padding: calc(16px + env(safe-area-inset-top, 0)) 24px 24px;
    list-style: none;
    background: color-mix(in oklab, rgba(255,255,255,.65) 100%, transparent 0%);
    box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
    border-radius: 0 0 20px 0;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    translate: -100% 0; /* closed */
    transition: translate .4s cubic-bezier(.2,.8,.2,1);
    display: grid;
    gap: 8px;
    align-content: start;
  }
  @media (prefers-color-scheme: dark){
    .burger-menu > ul{
      background: rgba(24,24,27,.55);
      box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
    }
  }

  .burger-menu ul li{
    opacity: 0;
    translate: 0 8px;
    transition: opacity .35s cubic-bezier(.2,.8,.2,1), translate .35s cubic-bezier(.2,.8,.2,1);
  }
  .burger-menu ul li a{
    display: block;
    padding: 16px 18px;
    border-radius: 14px;
    font-size: clamp(1.1rem, 1.2vw + .8rem, 1.6rem);
    line-height: 1.25;
    text-decoration: none;
    color: inherit;
    background: rgba(130, 241, 173, 0.034);
    outline: 2px solid transparent;
    transition: transform .2s ease, background-color .2s ease, outline-color .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .burger-menu ul li a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); }
  .burger-menu ul li a:focus-visible{ outline: 2px solid rgb(99 102 241); outline-offset: 2px; }

  .burger-menu ul li, .burger-menu li:last-child { border: none; }

  /* Open state (body.menu-open is toggled by your JS) */
  body.menu-open .burger-menu{
    pointer-events: auto;
    opacity: 1;
  }
  body.menu-open .burger-menu::before{ opacity: 1; }
  body.menu-open .burger-menu > ul{ translate: 0 0; }

  body.menu-open .burger-menu ul li{ opacity: 1; translate: 0 0; }
  body.menu-open .burger-menu ul li:nth-child(1){ transition-delay: .05s; }
  body.menu-open .burger-menu ul li:nth-child(2){ transition-delay: .10s; }
  body.menu-open .burger-menu ul li:nth-child(3){ transition-delay: .15s; }
  body.menu-open .burger-menu ul li:nth-child(4){ transition-delay: .20s; }
  body.menu-open{ overflow: hidden; } /* lock scroll */

  @media (prefers-reduced-motion: reduce){
    .burger-menu, .burger-menu::before, .burger-menu > ul,
    .burger-menu ul li, .burger-menu-btn, .burger-menu-btn::before, .burger-menu-btn::after{
      transition: none !important;
    }
  }

  /* Layout Adjustments */
  .mobile-random-btn {
    display: block;
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0));
    z-index: 1500;
  }

  .random-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
    padding: 12px 16px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    font-size: 0.9rem;
  }
  .random-btn:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  }
  .random-btn i { margin-right: 8px; }

  .main-nav div:nth-child(2) { display: none; }

  .container { width: 100%; padding: 0 15px; }
  .main { margin-left: 0; padding: 15px; }

  .content-main { flex-wrap: nowrap; }
  .header { display: none; }

  .sidebar {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    padding: 15px;
  }
  .sidebar h2 { margin-top: 20px; margin-left: 20px; }

  .row { flex-direction: column; width: 100%; margin: 0 auto; }
  .search { width: calc(100% - 40px); margin-left: 20px; }
  .button-class { margin-left: 20px; }
  .entry_list { margin-top: 0px; }

  .quote_of_day {
    width: 100%;
    margin-left: 0;
    border-radius: 10px;
  }
  .quote_of_day strong {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 3rem;
  }
  .quote_of_day p {
    text-align: left;
    margin-left: 10px;
  }
  .quotes-carousel { max-width: 500px; }

  .trends .box { flex: 1 1 calc(75% - 20px); }

  /* Entry Page Specific Mobile Layout */
  .main-content-layout { flex-direction: column; gap: 20px; }

  .image_bio_box {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    order: 2;
  }
  .main-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    margin: 0 auto;
  }
  .bio_box { max-width: 100%; margin: 0 auto; }
  .entry-content { order: 3; width: 100%; }

  .bio_content table { width: 100%; margin: 20px 0; }

  /* Typography (Mobile specific sizes) */
  h1 { font-size: 2.6rem; }
  h2 { font-size: 2.2rem; }
  h3 { font-size: 2.0rem; }
  h4 { font-size: 1.8rem; }
  h5 { font-size: 1.6rem; }
  h6 { font-size: 1.4rem; }

  /* Horizontally scrollable breaking news on mobile */
  .news-grid-snippet {
    display: flex !important;
    overflow-x: auto;
    gap: 16px;
    padding: 10px 15px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .news-article-snippet {
    flex: 0 0 auto;
    min-width: 250px;
    max-width: 300px;
    scroll-snap-align: start;
    scroll-margin-inline: 15px;
  }
  .news-grid-snippet::-webkit-scrollbar { display: none; }
  .news-grid-snippet { scrollbar-width: none; }

  .carousel-wrapper { overflow: visible; }
  .carousel-track {
    flex-wrap: wrap;
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    transform: none !important;
    will-change: auto;
    touch-action: pan-y;
  }
  .carousel-slide-pair { display: contents; }
  .achiever-card { flex: none; max-width: none; width: 100%; }
  .achiever-name { font-size: 0.95rem; }

  .q-nav { display: none; } /* hide arrows on small screens */
}

/* Fine tune arrow positions on very small screens */
@media (max-width: 600px) {
  .q-prev { left: 10px; }
  .q-next { right: 10px; }
}

/* Tiny screens: shrink search card image */
@media (max-width: 480px) {
  .search-card { grid-template-columns: 56px 1fr; }
  .result-thumb { width: 56px; height: 56px; }
}