/* =========================================================
   RK — Tea Page (hero + alternating spec cards)
   Matches coffee page behavior, tea accent palette
   ========================================================= */

/* Hero (450px desktop / 320px mobile) */
.tea-hero{
  position: relative;
  height: 450px;
  min-height: 300px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(20,30,22,.62), rgba(17,23,19,.74)),
    var(--hero-url, url('https://raw.githubusercontent.com/rknaturalexports-ai/RK-Website-Images/refs/heads/main/Tea%20Banner.png'))
    center / cover no-repeat;
}
@media (max-width: 640px){
  .tea-hero{ height: 320px; }
}
.tea-hero__overlay{
  position:absolute; inset:0;
  background: radial-gradient(1200px 400px at 50% 80%, rgba(0,0,0,.22), transparent 70%);
  pointer-events:none;
}
.tea-hero__inner{
  position: relative;
  width: 100%;
  text-align: center;
  color: #fff;
  padding: 84px 20px 48px;
}
.tea-hero h1{
  margin: 0 0 6px;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.2rem, 4.2vw, 3rem);
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35);
}
.tea-hero p{
  margin: 0 0 14px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(.98rem, 1.8vw, 1.05rem);
  color: #f7f7f7;
  opacity: .98;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* Content canvas */
.tea-wrap { padding: 28px 0 56px; background: #f9fcf8; }
.frame { width: 1210px; max-width: 100%; padding: 20px; margin: 0 auto; box-sizing: border-box; }

/* Spec card */
.spec{
  background: #fff;
  border: 1px solid #e2efe4;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  padding: 18px;
  margin: 0 0 26px;
}

/* Title centered */
.spec__title{
  text-align: center;
  letter-spacing: .06em;
  color: #2f5a3a; /* tea green accent */
  font-family: "Playfair Display", serif;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  margin: 6px 0 14px;
}

/* Alternating grid (equal 1fr / 1fr) */
.spec__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* equal width */
  grid-template-areas: "media body";
  gap: 24px;
  align-items: start;
}
.spec__media{ grid-area: media; }
.spec__body  { grid-area: body;  }

/* flip layout for even specs */
.spec:nth-of-type(even) .spec__grid{
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "body media";
}

/* Media */
.spec__media{
  border: 1px solid #d7e7da;
  border-radius: 12px;
  overflow: hidden;
  background: #f3fbf6;
}
.spec__media img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;   /* uniform height (desktop) */
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* Body */
.spec__intro { margin: 0 0 12px; }
.spec__h4{
  margin: 14px 0 8px;
  color: #2f5a3a;
  font-weight: 700;
  font-family: "Inter", system-ui, sans-serif;
}

/* Tables */
.spec-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  border: 1px solid #dfece3;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 12px;
}
.spec-table thead th{
  text-align: left;
  background: #2f5a3a;
  color: #fff;
  padding: 10px 12px;
  font-weight: 600;
}
.spec-table tbody td{
  padding: 9px 12px;
  border-top: 1px solid #e9f3ed;
  background: #fff;
}
.spec-table tbody tr:nth-child(odd) td{ background: #f7fbf8; }

/* =========================================================
   MOBILE ONLY (<=980px)
   - hamburger on the right
   - slide-in panels
   - dropdown styling matches home/coffee
   - cards/images centered
   - real “X” when open
   ========================================================= */
@media (max-width: 980px){

  /* Hamburger on the right */
  .hamburger{
    position:absolute;
    right:16px;
    left:auto;
    top:20px;
    z-index:70;
    cursor:pointer;
  }
  .hamburger span,
  .hamburger span::before,
  .hamburger span::after{
    content:"";
    display:block;
    width:24px;
    height:2px;
    background:#fff;
    border-radius:2px;
    position:relative;
    transition: transform .2s ease, background-color .2s ease, top .2s ease, opacity .2s ease;
  }
  .hamburger span::before{ position:absolute; top:-7px; left:0; }
  .hamburger span::after { position:absolute; top: 7px; left:0; }

  /* Slide-in panels from right */
  .nav--left,
  .nav--right{
    position:fixed;
    top:var(--header-h);
    right:0;
    left:auto;
    bottom:0;
    width:min(82vw, 360px);
    height:auto;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:16px;
    background:rgba(0,0,0,.92);
    transform:translateX(100%);
    transition:transform .28s ease;
    z-index:65;
  }
  #nav-toggle:checked ~ .nav--left,
  #nav-toggle:checked ~ .nav--right{
    transform:translateX(0);
  }

  /* Dropdown behavior + look */
  .nav--left .nav-item,
  .nav--right .nav-item{ width:100%; }

  .nav-item.dropdown > a{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .nav-item .menu{
    position:static;
    background:transparent;
    border:0;
    border-radius:0;
    padding:6px 0;
    margin-top:6px;
    display:none;          /* closed by default; toggled via JS adding .open */
  }
  .nav-item.open .menu{ display:block; }

  .nav--left .menu a,
  .nav--right .menu a{
    color:#fff;
    padding:10px 12px;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    margin:6px 0;
    font-weight:600;
    text-transform:none;
    letter-spacing:0;
  }

  /* REAL “X” when menu is open */
  #nav-toggle:checked + .hamburger span,
  #nav-toggle:checked + .hamburger span::before,
  #nav-toggle:checked + .hamburger span::after{
    opacity:0;                      /* hide the three bars */
  }
  #nav-toggle:checked + .hamburger{
    width:32px; height:32px; display:grid; place-items:center;
  }
  #nav-toggle:checked + .hamburger::after{
    content:"✕";                    /* the X glyph */
    font-size:22px;
    line-height:1;
    color:#fff;
  }

  /* Neutralize alternating layout on mobile & center everything */
  .spec__grid,
  .spec:nth-of-type(even) .spec__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "body";
  }
  .spec{
    max-width: 640px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .spec__media{
    display:block;
    width:100%;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center;
  }
  .spec__media img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:4 / 3 !important;  /* match desktop ratio */
    object-fit:cover;
    object-position:50% 50%;        /* centered crop */
    border-radius:14px;
  }
}