/*
 * swapti — main stylesheet
 * Extracted verbatim from the original inline <style> block.
 * Base utility classes (layout, color, spacing) come from the
 * Tailwind CDN build configured in index.html — this file only
 * holds the custom rules Tailwind's utility classes can't express:
 * fonts, the skip link, glassmorphism, gradients, scroll-reveal
 * animation states, button hover states, selection/focus styling,
 * and the reduced-motion override.
 */
html { scroll-behavior: smooth; }
  body { font-family: 'Plus Jakarta Sans', sans-serif; background:#fff; color:#1F2937; transition:background-color .4s ease, color .4s ease; }
  .font-display { font-family: 'Fraunces', serif; }

  .skip-link{position:absolute;left:-999px;top:auto;background:#D58B0B;color:#fff;padding:.75rem 1.25rem;border-radius:9999px;z-index:100;font-weight:600;}
  .skip-link:focus{left:1rem;top:1rem;}

  .glass{ background:rgba(255,255,255,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,0.6); }
  .text-gradient{ background:linear-gradient(100deg,#F2600C,#C2410C 55%,#9A3412); -webkit-background-clip:text; background-clip:text; color:transparent; }

  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  .reveal-d1{transition-delay:.08s} .reveal-d2{transition-delay:.16s} .reveal-d3{transition-delay:.24s}
  .reveal-d4{transition-delay:.32s} .reveal-d5{transition-delay:.4s} .reveal-d6{transition-delay:.48s}

  .btn-primary{ background:linear-gradient(100deg,#FF8035,#F2600C); box-shadow:0 14px 30px -10px rgba(165,100,9,0.55); }
  .btn-primary:hover{ box-shadow:0 18px 34px -8px rgba(165,100,9,0.65); transform:translateY(-2px); }
  .card-orange{ background:linear-gradient(#FF8035,#F2600C 55%,#C2410C); }
  .btn-outline{ border:1.5px solid #1F293726; }
  .btn-outline:hover{ border-color:#1F293755; transform:translateY(-2px); }
  .btn-outline-dark{ border:1.5px solid rgba(255,255,255,0.25); }
  .btn-outline-dark:hover{ border-color:rgba(255,255,255,0.45); transform:translateY(-2px); }

  ::selection{ background:#F4D994; color:#1F2937; }
  :focus-visible{ outline:2.5px solid #D58B0B; outline-offset:3px; border-radius:6px; }

  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{ background:rgba(31,41,55,0.18); border-radius:9999px; }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(31,41,55,0.32); }

  .plan-toggle-btn{ color:#1F293799; }
  .plan-toggle-btn.is-active{ background:linear-gradient(#FF8035,#F2600C); color:#fff; box-shadow:0 10px 22px -8px rgba(165,100,9,0.55); }
  
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
    .reveal{ opacity:1; transform:none; }
  }

  /* =========================================================
   TODAY'S MEALS - IMAGE AREA
========================================================= */

.today-meal-image {
    width: 100%;
    height: 220px;
    background: #f5f5f5;
    overflow: hidden;
}

.today-meal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================
   WEEKLY MENU POPUP - IMAGE AREA
========================================================= */

.weekly-meal-image {
    width: 100%;
    height: 180px;
    background: #f5f5f5;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.weekly-meal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.weekly-meal-info {
    padding: 18px;
}

/* =========================================================
   SWAPTI — COMING SOON SECTION
========================================================= */

.coming-soon-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background: #fff8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px 70px;
}

.coming-soon-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.coming-soon-logo {
    width: 170px;
    height: auto;
    margin: 0 auto 28px;
    display: block;
}

.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(213, 139, 11, 0.10);
    color: #a56409;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.coming-soon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d58b0b;
    display: inline-block;
}

.coming-soon-title {
    margin: 25px auto 0;
    max-width: 850px;
    font-family: "Fraunces", serif;
    font-size: clamp(42px, 7vw, 82px);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: #211d1a;
}

.coming-soon-title .highlight {
    color: #d58b0b;
    font-style: italic;
}

.coming-soon-description {
    max-width: 650px;
    margin: 25px auto 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: rgba(31, 41, 55, 0.68);
}

.coming-soon-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 32px;
    padding: 17px 30px;
    background: #ffffff;
    border: 1px solid rgba(213, 139, 11, 0.18);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(31, 41, 55, 0.08);
}

.coming-soon-date-label {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(31, 41, 55, 0.45);
}

.coming-soon-date-value {
    font-family: "Fraunces", serif;
    font-size: 24px;
    font-weight: 700;
    color: #211d1a;
}

.coming-soon-foods {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 48px auto 0;
    flex-wrap: wrap;
}

.coming-food {
    width: 105px;
    height: 105px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #ffffff;
    box-shadow: 0 12px 30px rgba(31, 41, 55, 0.14);
}

.coming-food:nth-child(2),
.coming-food:nth-child(4) {
    transform: translateY(-18px);
}

.coming-food:nth-child(3) {
    width: 125px;
    height: 125px;
}

.coming-soon-bottom {
    margin-top: 38px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(31, 41, 55, 0.48);
}

.coming-soon-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.coming-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
}

.coming-shape-1 {
    width: 330px;
    height: 330px;
    top: -140px;
    left: -120px;
    background: rgba(237, 169, 33, 0.13);
}

.coming-shape-2 {
    width: 260px;
    height: 260px;
    right: -100px;
    top: 100px;
    background: rgba(242, 96, 12, 0.10);
}

.coming-shape-3 {
    width: 210px;
    height: 210px;
    left: 8%;
    bottom: -100px;
    background: rgba(213, 139, 11, 0.10);
}

.coming-shape-4 {
    width: 280px;
    height: 280px;
    right: 8%;
    bottom: -150px;
    background: rgba(237, 169, 33, 0.10);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .coming-soon-section {
        min-height: calc(100vh - 72px);
        padding: 105px 20px 55px;
    }

    .coming-soon-logo {
        width: 135px;
        margin-bottom: 22px;
    }

    .coming-soon-badge {
        font-size: 11px;
        padding: 8px 14px;
    }

    .coming-soon-title {
        font-size: clamp(38px, 12vw, 58px);
        line-height: 1.05;
        margin-top: 22px;
    }

    .coming-soon-description {
        font-size: 14px;
        line-height: 1.7;
        margin-top: 20px;
    }

    .coming-soon-date {
        margin-top: 25px;
        padding: 14px 22px;
    }

    .coming-soon-date-value {
        font-size: 20px;
    }

    .coming-soon-foods {
        gap: 10px;
        margin-top: 35px;
    }

    .coming-food {
        width: 68px;
        height: 68px;
        border-width: 3px;
    }

    .coming-food:nth-child(3) {
        width: 82px;
        height: 82px;
    }

    .coming-food:nth-child(2),
    .coming-food:nth-child(4) {
        transform: translateY(-10px);
    }

    .coming-soon-bottom {
        font-size: 11px;
        line-height: 1.5;
        margin-top: 25px;
    }
}