/* Today's Sweet — tambahan di atas styles.css + theme.css (mockup export).
   Berisi hal yang tidak ada di mockup statis tapi dibutuhkan situs dinamis:
   toggle nav mobile, efek scroll header, animasi reveal, breadcrumb,
   komponen spesifikasi produk, dan skip-link aksesibilitas.
   Pakai token warna/font dari theme.css (--color-*, --font-*). */

/* --- Ikon WhatsApp/Instagram di footer (Contact Us) ---------------------- */
.social-link{display:inline-flex;align-items:center;gap:8px}
.social-icon{width:16px;height:16px;flex:none}

/* --- Aksen <em> di heading pakai font Grand Hotel (cursive) -------------
   Konten dari admin (Page.h1, dsb) ditulis dengan <em> untuk kata aksen
   (lihat label field "boleh pakai <em>"), sesuai desain lama. Desain baru
   pakai font skrip Grand Hotel untuk aksen serupa (class label-2/7/10/dst
   di kartu-kartu statis) — aturan ini menyamakan <em> di semua heading
   supaya konten admin ikut tampil dengan font yang sama tanpa perlu
   menulis ulang kontennya. */
main h1 em, main h2 em, main h3 em{
  font-family:'Grand Hotel',cursive;font-style:normal;font-weight:400;
}

/* --- Aksesibilitas: lewati ke konten ------------------------------------ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--color-accent);color:#fff;padding:.75rem 1.25rem;
  font:600 13px var(--font-body);text-decoration:none;
}
.skip:focus{left:0}

/* --- Perbaikan umum grid: item grid CSS punya min-width:auto bawaan
   browser, jadi teks panjang bisa menembus batas kolom (padding/border
   antar kartu jadi seperti hilang) alih-alih wrap. Berlaku untuk semua
   kartu (produk, kategori, blog, custom-cake occasions) di dalam grid. */
.pcard,.cat,.occ,.blog-item{min-width:0;overflow-wrap:break-word}

/* --- Header: state ter-scroll + toggle nav mobile ------------------------ */
.masthead{transition:border-color .3s ease,background-color .3s ease}
.masthead[data-scrolled="true"]{
  border-bottom:1px solid var(--color-divider);
  background:color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter:blur(8px);
}

/* .media-1 (logo) butuh jadi flex child LANGSUNG dari .bar-1 supaya
   margin-right:auto miliknya mendorong nav+tombol ke kanan; karena logo
   dibungkus <a> supaya bisa diklik, wrapper-nya "dihilangkan" dari flow
   flex lewat display:contents. Ukuran logo juga dinaikkan — 38px dari
   mockup terlalu kecil untuk logo bergambar (bukan sekadar wordmark). */
.brand-link{display:contents}
.media-1{height:56px}

.navtoggle{
  display:none;margin-left:auto;background:none;border:0;padding:.6rem;
  cursor:pointer;color:var(--color-text);
}
.navtoggle svg{width:1.4rem;height:1.4rem}

/* Bungkus tautan nav di dalam wrapper ini; di desktop wrapper "transparan"
   (display:contents) supaya flex .row-1 tetap berlaku langsung ke <a>. */
.mainnav__inner{display:contents}

@media (max-width:900px){
  .navtoggle{display:block}
  .bar-1 > .btn-primary{display:none}
  .mainnav{
    position:fixed;inset:4.75rem 0 auto;margin:0;
    background:var(--color-bg);border-bottom:1px solid var(--color-divider);
    padding:0 20px;
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .35s ease;
    z-index:49;
  }
  .mainnav[data-open="true"]{grid-template-rows:1fr}
  .mainnav > .mainnav__inner{overflow:hidden;display:flex;flex-direction:column;gap:0 !important;padding:1rem 0 2rem}
  .mainnav a{display:block;padding:.9rem 0;border-bottom:1px solid var(--color-divider);font-size:1.05rem}
  .mainnav a:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){.mainnav{transition:none}}

/* --- Bilah Order Now lengket di mobile ----------------------------------- */
.mobilebar{display:none}
@media (max-width:900px){
  .wa{bottom:5.25rem}
  .mobilebar{
    position:fixed;left:0;right:0;bottom:0;z-index:55;
    background:var(--color-bg);border-top:1px solid var(--color-divider);
    padding:.6rem 20px calc(.6rem + env(safe-area-inset-bottom));
    display:block;
  }
  .mobilebar .btn{width:100%;text-align:center}
  body{padding-bottom:5rem}
}

/* --- Tombol WhatsApp mengambang ------------------------------------------ */
.wa{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;
  width:3.5rem;height:3.5rem;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);
  transition:transform .25s ease;
}
.wa:hover{transform:scale(1.06)}
.wa svg{width:1.75rem;height:1.75rem}

/* --- Animasi reveal saat elemen masuk viewport ---------------------------- */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
  [data-reveal].is-in{opacity:1;transform:none}
}

/* --- Breadcrumb ------------------------------------------------------------ */
.crumbs{
  width:1160px;max-width:100%;margin:0 auto;padding:20px 20px 0;
  font:400 11px var(--font-body);letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb, var(--color-text) 55%, transparent);
}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--color-divider)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--color-accent-700)}

/* --- Harga kosong pada kartu produk (belum diisi admin) ------------------ */
.block-16[data-empty="true"]{
  font-family:var(--font-body);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* --- Foto hero UTUH tanpa crop (halaman About, via ImageHelper::pictureFull()).
   .block-37 default (Contact, Custom Cake, dst) sengaja full-bleed crop
   di kotak tinggi tetap — di sini kotaknya dilepas supaya tingginya
   mengikuti rasio asli foto, dan <img>-nya tampil natural (bukan
   position:absolute+object-fit:cover). */
.block-37--auto{overflow:visible;min-height:0}
.hero-full-img{width:100%;height:auto;display:block}

/* --- Kartu daftar blog (dipakai di grid-20 halaman /blog maupun grid-4
   pratinjau blog di homepage) dengan jumlah item dinamis. Mockup
   men-hardcode kelas berbeda per kolom (link-18/19/20 atau link-11/12/13);
   di sini dipakai satu class `.blog-item` + nth-child supaya cocok untuk
   jumlah post berapa pun (termasuk paginasi), di grid manapun. */
.blog-item{
  text-decoration:none;color:inherit;padding:24px 26px 26px;
  border-right:0.5px solid var(--color-divider);
  display:flex;flex-direction:column;gap:10px;
  min-width:0;overflow-wrap:break-word;
}
.blog-item:nth-child(3n){border-right:0}
.blog-item:nth-child(3n+2){background:var(--color-accent-100)}
/* grid-26 ("Artikel lainnya" di detail blog) cuma 2 kolom, bukan 3 —
   override supaya kolom terakhir tidak bergaris & tidak ikut warna selang-seling. */
.grid-26 > .blog-item{background:none}
.grid-26 > .blog-item:last-child{border-right:0}

/* --- Pagination blog (CLinkPager) — tidak ada di mockup statis ---------- */
.pager{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:24px 32px;list-style:none}
.pager li a,.pager li span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.6rem;min-height:2.6rem;padding:0 .75rem;
  border:0.5px solid var(--color-divider);border-radius:var(--radius-md);
  text-decoration:none;font:400 13px var(--font-body);color:var(--color-text);
}
.pager li a:hover{border-color:var(--color-accent);color:var(--color-accent-700)}
.pager .selected span{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.pager .hidden{display:none}

/* --- Konten HTML dari admin (Page.body, Category.intro, dll) ------------ */
/* Lebar sengaja tidak dibatasi di sini — biar ikut wrapper-nya (mis.
   .block-88), yang sudah diatur beda per konteks: 70ch bawaan mockup di
   artikel blog (nyaman dibaca), max-width:none di halaman generik
   (About/dst) supaya kontennya proper memenuhi lebar halaman. */
.prose{font:400 15px/1.7 var(--font-body)}
.prose h2{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:26px;margin:2em 0 .6em}
.prose h3{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:20px;margin:1.6em 0 .5em}
.prose p{margin:0 0 1em}
.prose ul{list-style:none;margin:0 0 1.2em;padding:0}
.prose li{position:relative;padding-left:1.3rem;margin-bottom:.55em}
.prose li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--color-accent)}
.prose a{color:var(--color-accent-700)}
.muted{color:color-mix(in srgb, var(--color-text) 50%, transparent)}

/* --- Spesifikasi produk (dl) — tidak ada padanan di mockup statis -------- */
dl.spec{margin:28px 0 0;border-top:0.5px solid var(--color-divider)}
dl.spec > div{
  display:grid;grid-template-columns:9rem 1fr;gap:16px;
  padding:14px 0;border-bottom:0.5px solid var(--color-divider);
}
dl.spec dt{font:700 12px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-700);margin:0}
dl.spec dd{font:400 15px/1.5 var(--font-body);margin:0}
dl.spec .muted{color:color-mix(in srgb, var(--color-text) 50%, transparent)}