/*
Theme Name: Reset Rituals
Theme URI: https://resetrituals.id/
Author: Reset Rituals
Description: Tema WordPress untuk brand home fragrance Reset Rituals — hasil porting frontend modul Laravel "Resetrituals" ke WordPress murni. Kompatibel Elementor: mendaftarkan lokasi Theme Builder untuk header, footer, single, dan archive, serta melepas kunci lebar konten sehingga seluruh halaman bisa dirancang drag-and-drop tanpa menulis kode. Mobile responsive dengan breakpoint 1099/781/720/480px, diuji tanpa overflow horizontal pada 360–1440px. Konten dikelola lewat Page, Post, Menu, dan Customizer bawaan WordPress; seksi berulang disusun dari block pattern berbasis blok core.
Version: 1.0.4
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: resetrituals
Tags: blog, e-commerce, custom-colors, custom-logo, custom-menu, featured-images, block-patterns, translation-ready, full-width-template, threaded-comments
*/

/* =========================================================
   Reset Rituals — shared stylesheet
   Rebuilt from Canva design DAHNWiP6QxA as editable HTML.
   Colours, type and layout approximate the original.
   ========================================================= */

:root {
  --cream:        #f3ecde;   /* page background */
  --cream-deep:   #e9dcc6;   /* sand panels / cards bg */
  --cream-soft:   #f7f2e8;
  --olive:        #6c7050;   /* mission / science panels */
  --olive-dark:   #595c41;
  --brown:        #743f20;   /* product + content cards (sampled from Canva source) */
  --brown-dark:   #5a3018;
  --terracotta:   #b06a45;   /* small accents / buttons */
  --red:          #a63a27;   /* gift set theme */
  --tan-deep:     #dac5b0;   /* preview-card bg (home page teaser cards) */
  --sage:         #aeab95;   /* muted sage buttons on preview cards */
  --sage-dark:    #8c8a78;
  --ink:          #3a2c1e;   /* primary text */
  --ink-soft:     #6a584593; /* muted */
  --muted:        #7b6a55;
  --line:         #d8c9af;
  --maxw:         1180px;

  --serif:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:   "EB Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
}

.noline {
    text-decoration: none;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.why-choose { background: #fff; }

.center { text-align: center; }

.eyebrow {
  font-family: var(--serif);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--muted);
}

.lead { font-size: 1.12rem; color: var(--ink); }

.muted { color: var(--muted); }

/* ---------- top navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243,236,222,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; gap: 18px;
}
.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img { height: 36px; width: auto; display: block; }
.brand {
  font-family: var(--serif);
  font-size: 1.5rem; letter-spacing: .04em;
  line-height: 1; color: var(--ink); text-decoration: none;
}
.brand small { display:block; font-size: .62rem; letter-spacing:.42em; text-transform:uppercase; color: var(--muted); margin-top: 3px; }
.nav__links { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  text-decoration: none; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .95rem; letter-spacing: .03em;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
}
.nav__links a:hover { border-color: var(--terracotta); color: var(--terracotta); }
.nav__links a[aria-current="page"] { font-weight: 600; color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--serif); letter-spacing: .12em; text-transform: uppercase;
  font-size: .82rem; padding: 11px 30px; border-radius: 2px;
  background: var(--brown); color: #f6efe2;
  border: 1px solid var(--brown); transition: background .2s, color .2s;
}
.btn:hover { background: transparent; color: var(--brown); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--olive { background: var(--olive); border-color: var(--olive); }
.btn--olive:hover { color: var(--olive); }
.btn--pill { border-radius: 999px; padding: 12px 36px; }
.btn--pill-sm { padding: 8px 24px; font-size: .72rem; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 78vh; display: flex; align-items: flex-end;
  color: #f4eee2; text-align: center;
  background:
    linear-gradient(180deg, rgba(40,46,30,.10) 0%, rgba(40,46,30,.55) 100%),
    linear-gradient(120deg, #8a9168 0%, #5c6440 45%, #c98a52 100%);
  background-size: cover; background-position: center;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(40,46,30,.10) 0%, rgba(40,46,30,.55) 100%);
  z-index: 1;
}
.hero__inner { width: 100%; padding: 0 24px 6vh; position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 500;
  text-shadow: 0 2px 24px rgba(0,0,0,.35); margin-bottom: .15em;
}
.hero p { font-size: clamp(1rem,2vw,1.3rem); max-width: 620px; margin: 0 auto; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hero .scroll-cue { margin: 26px auto 0; width: 26px; opacity: .8; }

/* Wave decorative divider (between sections) — brand mark, logo_4126.png */
.wave-divider { display: block; width: 260px; height: 142.4px; margin: 0 auto 18px; }

/* Intro section (after hero) */
.intro { padding: 56px 0; }
.intro__body { font-family: "Montserrat", sans-serif; font-size: 19.4px; max-width: 540px; margin: 0 auto; color: var(--ink); }
.intro__cta { margin-top: 22px; }
.intro__cta .eyebrow { font-family: "Montserrat", sans-serif; font-size: 19.2px; }
.intro__line { font-family: "Montserrat", sans-serif; font-style: italic; font-weight: 700; font-size: 19.2px; color: var(--brown-dark); }

/* ---------- image placeholder ---------- */
.ph {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-family: var(--serif);
  letter-spacing: .14em; text-transform: uppercase; font-size: .72rem;
  text-align: center; padding: 10px; min-height: 120px;
}
.ph--tall { aspect-ratio: 3 / 4; }
.ph--square { aspect-ratio: 1 / 1; }
.ph--wide { aspect-ratio: 16 / 9; }

/* real image filling a .ph frame (ignores the frame padding) */
.ph > .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- collection / product cards ---------- */
.grid { display: grid; gap: 30px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card { text-align: center; }
.card h3 { font-size: 1.5rem; margin-top: .7em; margin-bottom: .25em; }
.card p { font-size: .98rem; color: var(--muted); margin: 0; }

.product .ph { aspect-ratio: 1 / 1; }
.product .tag { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--terracotta); }

/* ---------- product show page (collection intro + variant grid) ---------- */
.olive-heading {
  font-family: var(--serif); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  text-align: center;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  color: var(--olive-dark);
  margin: 0 0 40px;
}
.wellness-heading { font-family: "YAFdJhem5V8_1", auto; }
.collection-intro { align-items: center; margin-bottom: 64px; }
.collection-intro__text { font-size: 1.05rem; line-height: 1.75; color: var(--ink); }

.variant-grid .card { text-align: left; }
.variant-grid .card h3 {
  font-family: var(--serif); font-weight: 600; font-style: italic;
  font-size: 1.35rem; margin: .85em 0 .3em;
}
.variant-grid .card p { font-style: italic; }

/* ---------- feature icons (why choose) ---------- */
.why__title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--brown-dark); margin: 0 0 36px;
}
.features { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; margin: 30px 0 36px; }
.feature { text-align: center; max-width: 150px; }
.feature .dot,
.feature .feature__icon {
  width: 78px; height: 78px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--terracotta);
}
.feature .dot { border: 1.5px solid var(--terracotta); }
.feature__icon img { width: 100%; height: 100%; object-fit: contain; }
.feature span {
  display: block;
  font-family: var(--serif);
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--terracotta);
  line-height: 1.5;
}

/* ---------- article cards (home page teaser cards) ---------- */
.article-card { background: var(--tan-deep); border: none; padding-bottom: 26px; display: flex; flex-direction: column; }
.article-card .ph { aspect-ratio: 16/10; border: none; border-radius: 10px; margin: 20px 20px 0; }
.article-card__body { padding: 18px 24px 0; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.article-card h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.15rem; line-height: 1.35;
  margin: 0 0 16px;
  flex: 1;
  width: 100%;
}
.article-card .btn { align-self: center; margin: 0; background: var(--sage); border-color: var(--sage); color: #fff; }
.article-card .btn:hover { background: transparent; color: var(--sage-dark); border-color: var(--sage); }

/* ---------- panels (olive / brown / sand) ---------- */
.panel-olive { background: var(--olive); color: #f1ecdd; }
.panel-olive .eyebrow, .panel-olive .muted { color: #d6d3bf; }
.panel-sand  { background: var(--cream-deep); }
.panel-cream { background: var(--cream-soft); }

/* Brown collection panel (Our Collection) */
.panel-brown {
  background: var(--brown);
  color: #f3e9da;
  padding: 72px 0 84px;
}
.panel-brown__title {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.4rem; letter-spacing: .24em; text-transform: uppercase;
  color: #f6efe2; margin: 0 0 38px;
  padding-left: 4px;
}
.collection-grid { gap: 28px; }
.card--on-brown { color: #f3e9da; }
.card--on-brown .ph { border: none; background: rgba(0,0,0,.08); }
.card--on-brown h3 {
  color: #f6efe2;
  font-family: var(--serif); font-weight: 600;
  font-size: 1.25rem;
  margin-top: 14px; margin-bottom: 6px;
}
.card--on-brown p {
  color: rgba(243,233,218,.85);
  font-style: italic;
  font-size: .92rem; line-height: 1.55;
  max-width: 280px; margin: 0 auto;
}

/* Mission panel: split video left + olive right */
.panel-mission { padding: 0; }
.mission__split {
  display: grid; grid-template-columns: 2fr 3fr;
  align-items: stretch; min-height: 380px;
}
.mission__media { background: #2c2418; }
.mission__media img,
.mission__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mission__body {
  padding: 72px 56px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.mission__text {
  font-family: var(--body); font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55; color: #efe7d4; max-width: 460px;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split--narrow { grid-template-columns: 1.1fr 1fr; }

/* ---------- info cards (brown rounded) ---------- */
.infocard {
  background: var(--brown); color: #f3e9da;
  border-radius: 14px; padding: 26px 30px; margin: 0 auto;
  max-width: 720px; text-align: center;
}
.infocard p { margin: 0; font-size: 1rem; }
.infocard + h3 { margin-top: 34px; }

/* ---------- needs list (science) ---------- */
.needs { max-width: 720px; margin: 22px auto 0; list-style: none; padding: 0; }
.needs li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.22); }
.needs li strong { font-family: var(--serif); font-size: 1.15rem; display:block; }

/* ---------- form ---------- */
.form { max-width: 720px; margin: 32px auto 0; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form .field { display: flex; flex-direction: column; }
.form label {
  display: block; font-family: var(--serif);
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.form input, .form textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: #fbf7ef; border: 1px solid var(--line); border-radius: 2px;
  padding: 14px 16px;
  transition: border-color .2s, box-shadow .2s;
}
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(122,92,66,.12);
}
.form textarea { min-height: 150px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--muted); font-style: italic; opacity: .8; }
.form .field + .field { margin-top: 16px; }
.form .row .field + .field { margin-top: 0; }
.form .error { color: var(--red); font-size: .82rem; margin: 4px 0 0; }

/* ---------- article (long form) ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article .meta { font-size: .82rem; color: var(--muted); letter-spacing: .04em; margin-bottom: 18px; }
.article h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.article p { margin: 0 0 1.1em; }
.article .ph { margin: 26px 0; }
.article h3 { font-size: 1.25rem; margin-top: 1.4em; }

/* ---------- guide article (buying guide, numbered sections) ----------
   Typography verbatim from the Canva source's design JSON: headings and
   body copy share the same brown family (#6f503e, #733f21 on the
   Souvenir Guide title specifically), body/intro text is justified (not
   centered/muted-gray), and section headings run nearly as large as the
   page title. */
.guide-article { max-width: 760px; margin: 0 auto; }
.guide-article h1 { font-size: clamp(1.9rem, 4vw, 2.44rem); color: #733f21; text-align: left; }
.guide-article__intro { text-align: justify; color: #6f503e; max-width: none; margin: 20px 0 32px; line-height: 1.6; font-size: clamp(1.1rem, 2vw, 1.63rem); }
.guide-article h3 { font-size: clamp(1.6rem, 3.5vw, 2.35rem); margin-top: 1.4em; color: #6f503e; text-align: left; }
.guide-article p { margin: 0 0 1.1em; line-height: 1.6; color: #6f503e; text-align: justify; font-size: clamp(1.1rem, 2vw, 1.63rem); }
.guide-article p strong { color: #6f503e; }
.guide-article .ph { margin: 20px 0 26px; }

/* ---------- journal (research/editorial articles) ---------- */
.article h1 { color: var(--brown-dark); }
.journal-citation { margin: 0 0 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.journal-citation__tag,
.journal-citation__author {
  font-weight: 700; color: var(--terracotta);
  margin: 0 0 4px; font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}
.journal-citation__source { font-style: italic; color: var(--muted); margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.5; }

.journal-benefits {
  margin-top: 56px; padding: 56px 0;
  background: var(--olive); color: #f1ecdd;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}
.journal-benefits__icons { display: flex; justify-content: center; gap: 56px; margin-bottom: 40px; flex-wrap: wrap; }
.journal-benefits__icons img { height: 80px; width: auto; }
.journal-benefits__intro {
  display: inline-block;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--brown-dark);
  background: var(--tan-deep);
  border-radius: 999px;
  padding: 14px 32px;
  margin: 0 0 32px;
}
.journal-benefits ul { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; text-align: left; font-size: clamp(1rem, 1.6vw, 1.15rem); }
.journal-benefits li { margin: 0 0 18px; }
.journal-benefits strong { color: #fff; font-weight: 700; }

/* ---------- why us (full-bleed pillar sections) ---------- */
.whyus__panel {
  min-height: 60vh; display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  color: #f4eee2;
}
.whyus__inner { width: 100%; padding: 48px 28px; max-width: 640px; }
.whyus__inner h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); text-shadow: 0 2px 20px rgba(0,0,0,.35); margin-bottom: .3em; }
.whyus__inner p { font-size: 1.05rem; line-height: 1.7; text-shadow: 0 1px 12px rgba(0,0,0,.4); max-width: 560px; }

/* Alternate text side per panel — odd stays left (default), even flips right */
.whyus__panel:nth-child(even) { justify-content: flex-end; }
.whyus__panel:nth-child(even) .whyus__inner { width: auto; margin-left: auto; text-align: right; }
.whyus__panel:nth-child(even) .whyus__inner p { margin-left: auto; }

/* ---------- gift set (tiers + custom order form) ---------- */
.giftset-tiers .card h3 { font-style: normal; }
.giftset-tiers .card p.giftset-tier__size { font-size: .85rem; color: var(--muted); margin: 0; }
.giftset-form { max-width: 640px; margin: 0 auto; }

/* ---------- about story ---------- */
.story__title {
  font-family: var(--serif); font-weight: 600;
  text-align: center; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(2rem, 5vw, 2.9rem);
  color: var(--brown-dark);
  margin: 0 0 48px;
}
.story .split { margin-bottom: 40px; align-items: center; }
.story .prose p { margin: 0 0 1.1em; line-height: 1.7; color: var(--ink); }
.story .prose strong { color: var(--brown-dark); }
.story blockquote {
  font-family: var(--serif); font-size: 1.35rem; color: var(--ink);
  text-align: center; max-width: 760px; margin: 30px auto; line-height: 1.4;
}
.story blockquote strong { color: var(--brown-dark); font-weight: 700; }
.story blockquote em { color: var(--terracotta); font-style: italic; }

/* ---------- footer ---------- */
.footer { background: var(--cream-deep); border-top: 1px solid var(--line); padding: 56px 0 40px; }
.footer__logo {
  display: block; margin: 0 auto 8px;
  width: 220px; height: auto;
}
.footer__tagline { margin: 0 0 40px; font-size: 1rem; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; margin-top: 44px; }
.footer__cols h4 {
  font-family: var(--serif); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  font-size: .78rem; color: var(--muted);
  margin: 0 0 14px;
}
.footer__cols p { margin: .2em 0; font-size: .95rem; }
.footer__cols ul { list-style: none; padding: 0; margin: 0; }
.footer__cols li { margin: .35em 0; }
.footer__cols a {
  text-decoration: none; color: var(--ink);
  font-size: .95rem; letter-spacing: .02em;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.footer__cols a:hover { border-bottom-color: var(--terracotta); }
.footer__social-icons { display: flex; justify-content: center; gap: 14px; }
.footer__social-icons a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--brown); color: var(--brown);
  transition: background .2s, color .2s;
}
.footer__social-icons a:hover { background: var(--brown); color: #f6efe2; }
.footer__social-icons svg { width: 18px; height: 18px; }
.footer__social-label { font-size: .8rem; padding: 0 6px; }

.footer__contact-list { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer__contact-list a {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-size: .92rem;
}
.footer__contact-list a:hover .footer__icon-circle { background: var(--brown); color: #f6efe2; }
.footer__icon-circle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--brown); color: var(--brown);
  transition: background .2s, color .2s;
}
.footer__icon-circle svg { width: 16px; height: 16px; }
.footer__icon-circle img { width: 16px; height: 16px; object-fit: contain; }
/* Self-contained glyphs (Instagram/TikTok/envelope/bag are already a
   recognisable shape on their own) — no extra circular badge, unlike
   WhatsApp/Shopee which use a plain circle as their icon shape. */
.footer__icon-plain {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; color: var(--brown);
}
.footer__icon-plain svg { width: 28px; height: 28px; }
.footer__icon-plain img { width: 28px; height: 28px; object-fit: contain; }
.footer__copy {
  text-align: center; margin-top: 44px;
  padding-top: 24px; border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--muted);
}

/* ---------- mobile nav toggle (hamburger) ---------- */
.nav__toggle {
  display: none;
  border: 1px solid var(--line);
  background: transparent;
  width: 40px; height: 40px;
  border-radius: 4px;
  align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block; width: 18px; height: 2px;
  background: var(--ink); position: relative;
  transition: transform .2s, opacity .2s;
}
.nav__toggle span::before { content: ''; position: absolute; top: -6px; left: 0; }
.nav__toggle span::after  { content: ''; position: absolute; top:  6px; left: 0; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   - 980px  : tablet landscape — grid 3→2
   - 720px  : tablet portrait / large phone — hamburger nav
   - 480px  : phone — tighter padding, smaller hero
   ============================================================ */

@media (max-width: 980px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .section { padding: 60px 0; }
  .features { gap: 40px; }
}

@media (max-width: 720px) {
  /* Tighter container */
  .wrap { padding: 0 20px; }
  .section { padding: 48px 0; }
  .section--tight { padding: 32px 0; }

  /* Wave divider (intro/mission) — desktop size (260x142.4px) is too
     wide for a phone viewport, scale it down proportionally. */
  .wave-divider { width: 160px; height: 87.7px; margin-bottom: 12px; }

  /* Collapsing grids */
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .split, .split--narrow { grid-template-columns: 1fr; gap: 28px; }
  .form .row { grid-template-columns: 1fr; }
  /* Keep Contact/Social/Shop as 3 side-by-side columns even on mobile
     (2 icon rows per column) instead of collapsing to one stacked column. */
  .footer__cols { gap: 12px; }

  /* Panels */
  .panel-brown { padding: 56px 0 64px; }
  .panel-brown__title { font-size: 1.15rem; letter-spacing: .2em; text-align: center; padding-left: 0; }
  .collection-grid .card--on-brown { max-width: 360px; margin: 0 auto; }

  .mission__split { grid-template-columns: 1fr; }
  .mission__media { min-height: 280px; }
  .mission__body { padding: 48px 24px; }

  /* Why choose */
  .why__title { font-size: 1.8rem; }
  .feature__icon { width: 64px; height: 64px; }

  /* Mobile nav: hamburger toggle */
  .nav__toggle { display: inline-flex; }
  .nav__inner { flex-direction: row; align-items: center; padding: 12px 20px; }
  .nav__logo { display: none; }
  .nav.is-open .nav__logo { display: flex; }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--cream);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 14px;
    max-height: 0; overflow: hidden;
    opacity: 0;
    transition: max-height .25s ease, opacity .2s ease;
  }
  .nav.is-open .nav__links {
    max-height: 80vh; overflow-y: auto; opacity: 1;
  }
  .nav__links a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(122,92,66,.1); border-radius: 0; }
  .nav__links a:hover { border-bottom-color: var(--terracotta); }

  /* Hero */
  .hero { min-height: 68vh; }
  .hero__inner { padding: 0 20px 4vh; }
  .hero h1 { font-size: clamp(2rem, 8vw, 3.4rem); }

  /* Article cards */
  .article-card h3 { font-size: 1.1rem; padding: 16px 18px 0; }
  .article-card .btn { margin: 12px 18px 0; }

  /* Features */
  .features { gap: 28px; margin: 22px 0; }
  .feature .dot { width: 50px; height: 50px; }

  /* Footer */
  .footer { padding: 44px 0 32px; }
  .footer__logo { width: 180px; margin-bottom: 24px; }
  .footer__copy { margin-top: 28px; font-size: .75rem; }

  /* 3 columns (Contact/Social/Shop) stay side-by-side even on mobile, so
     each column's own icons stack as 2 rows — labels hide since a column
     is too narrow here to fit text like phone numbers next to the icon. */
  .footer__cols h4 { font-size: .68rem; letter-spacing: .08em; }
  .footer__contact-list { gap: 10px; }
  .footer__icon-circle, .footer__icon-plain { width: 30px; height: 30px; margin: 0 auto; }
  .footer__contact-list a span:last-child { display: none; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .section { padding: 40px 0; }
  .hero { min-height: 60vh; }
  .hero h1 { font-size: clamp(1.8rem, 9vw, 2.8rem); }
  .hero p { font-size: .98rem; }
  .card h3 { font-size: 1.3rem; }
  .btn { padding: 10px 22px; font-size: .76rem; }
  .infocard { padding: 22px 22px; }
  .form input, .form textarea { padding: 12px 14px; font-size: .95rem; }
}

/* =========================================================
   BAGIAN KHUSUS WORDPRESS
   Semua di atas adalah stylesheet modul Laravel apa adanya.
   Di bawah ini tambahan agar markup WordPress (blok core,
   komentar, paginasi, form plugin) tampil sesuai desain.
   ========================================================= */

/* ---------- aksesibilitas ---------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  width: auto; height: auto; clip: auto;
  background: var(--brown); color: #f6efe2;
  padding: 12px 20px; border-radius: 2px;
  font-family: var(--serif); letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- offset admin bar ---------- */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

/* ---------- lebar & perataan blok core ---------- */
.entry-content > * {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.entry-content > .alignwide { max-width: var(--maxw); }
.entry-content > .alignfull { max-width: none; width: 100%; }
.entry-content--canvas > * { max-width: none; }

.alignleft  { float: left;  margin: .3em 1.6em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.6em; }
.aligncenter { margin-left: auto; margin-right: auto; }

.wp-block-image img { border-radius: 2px; }
.wp-block-image figcaption,
.wp-caption-text {
  font-size: .84rem; color: var(--muted); text-align: center; margin-top: .6em;
}

.wp-block-quote {
  font-family: var(--serif); font-size: 1.35rem; line-height: 1.4;
  border-left: 2px solid var(--terracotta);
  margin: 30px auto; padding-left: 24px;
}
.wp-block-quote cite { display: block; font-family: var(--body); font-size: .9rem; color: var(--muted); font-style: normal; margin-top: .6em; }

.wp-block-separator { border: none; border-top: 1px solid var(--line); max-width: 200px; margin: 40px auto; }

.wp-block-button__link {
  font-family: var(--serif); letter-spacing: .12em; text-transform: uppercase;
  font-size: .82rem; padding: 11px 30px; border-radius: 2px;
  background: var(--brown); color: #f6efe2; border: 1px solid var(--brown);
  transition: background .2s, color .2s;
}
.wp-block-button__link:hover { background: transparent; color: var(--brown); }
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.wp-block-button.is-style-pill .wp-block-button__link { border-radius: 999px; padding: 12px 36px; }

/* Cover block dipakai untuk hero video & panel Why Us. */
.wp-block-cover { border-radius: 0; }
.wp-block-cover.is-hero { min-height: 78vh; }

/* Kolom pada pattern mengikuti jarak grid desain. */
.wp-block-columns { gap: 30px; }

/* Panel berlatar warna (pattern brown/olive/sand) tampil penuh selebar layar. */
.panel-brown.alignfull,
.panel-olive.alignfull,
.panel-sand.alignfull,
.panel-cream.alignfull { width: 100%; }

/* Judul & teks di dalam panel gelap ikut warna terang. */
.panel-brown h1, .panel-brown h2, .panel-brown h3, .panel-brown h4 { color: #f6efe2; }
.panel-olive h1, .panel-olive h2, .panel-olive h3, .panel-olive h4 { color: #f1ecdd; }

/* ---------- kartu artikel (arsip & related) ---------- */
.post-card {
  background: var(--tan-deep);
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
  padding-bottom: 26px;
}
.post-card .ph { aspect-ratio: 16/10; border-radius: 10px; margin: 20px 20px 0; }
.post-card__body { padding: 18px 24px 0; text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; }
.post-card__kicker { font-family: var(--serif); letter-spacing: .22em; text-transform: uppercase; font-size: .7rem; color: var(--muted); margin-bottom: 8px; }
.post-card h3 { font-size: 1.15rem; line-height: 1.35; margin: 0 0 14px; flex: 1; }
.post-card__meta { font-size: .8rem; color: var(--muted); }

/* ---------- header halaman arsip ---------- */
.page-head { padding: 64px 0 8px; text-align: center; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--brown-dark); margin-bottom: .2em; }
.page-head p { color: var(--muted); margin: 0; }

/* ---------- paginasi ---------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: .95rem;
  border: 1px solid var(--line); background: #fbf7ef; color: var(--ink);
  text-decoration: none; transition: border-color .2s, background .2s;
}
.pagination .page-numbers:hover { border-color: var(--terracotta); }
.pagination .page-numbers.current { background: var(--brown); color: #f6efe2; border-color: var(--brown); }
.pagination .page-numbers.dots { border: none; background: transparent; }

/* ---------- komentar ---------- */
.comments { max-width: 760px; margin: 0 auto; padding: 0 0 72px; }
.comments__title { font-size: 1.5rem; margin-bottom: 24px; }
.comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.comment-list li { background: #fbf7ef; border: 1px solid var(--line); padding: 20px 22px; margin-bottom: 14px; }
.comment-list .children { list-style: none; margin: 14px 0 0 24px; padding: 0; }
.comment-meta { font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.comment-form input[type="text"], .comment-form input[type="email"],
.comment-form input[type="url"], .comment-form textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: #fbf7ef; border: 1px solid var(--line); border-radius: 2px;
  padding: 14px 16px; margin-bottom: 14px;
}
.comment-form .submit {
  font-family: var(--serif); letter-spacing: .12em; text-transform: uppercase;
  font-size: .82rem; padding: 11px 30px; border-radius: 2px; cursor: pointer;
  background: var(--brown); color: #f6efe2; border: 1px solid var(--brown);
}

/* ---------- form pencarian ---------- */
.search-form { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
.search-form input[type="search"] {
  flex: 1; font-family: var(--body); font-size: 1rem;
  background: #fbf7ef; border: 1px solid var(--line); border-radius: 2px; padding: 12px 16px;
}
.search-form button {
  font-family: var(--serif); letter-spacing: .12em; text-transform: uppercase;
  font-size: .78rem; padding: 12px 24px; cursor: pointer;
  background: var(--brown); color: #f6efe2; border: 1px solid var(--brown);
}

/* ---------- 404 ---------- */
.notfound { padding: 120px 0; text-align: center; }
.notfound__code { font-family: var(--serif); font-size: 5rem; color: var(--terracotta); line-height: 1; }

/* ---------- form dari plugin (CF7 / WPForms / Fluent) ----------
   Tema tidak menangani form sendiri; kelas di bawah memberi
   tampilan yang sama dengan .form pada desain aslinya. */
.wpcf7-form, .wpforms-form, .fluentform form { max-width: 720px; margin: 32px auto 0; }
.wpcf7-form label, .wpforms-field-label, .fluentform .ff-el-input--label label {
  display: block; font-family: var(--serif);
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px; font-weight: 400;
}
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form textarea,
.wpforms-form input[type="text"], .wpforms-form input[type="email"], .wpforms-form input[type="tel"], .wpforms-form textarea,
.fluentform input[type="text"], .fluentform input[type="email"], .fluentform input[type="tel"], .fluentform textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: #fbf7ef; border: 1px solid var(--line); border-radius: 2px;
  padding: 14px 16px;
  transition: border-color .2s, box-shadow .2s;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus,
.wpforms-form input:focus, .wpforms-form textarea:focus,
.fluentform input:focus, .fluentform textarea:focus {
  outline: none; border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(122,92,66,.12);
}
.wpcf7-form textarea, .wpforms-form textarea, .fluentform textarea { min-height: 150px; resize: vertical; }
.wpcf7-form input[type="submit"], .wpcf7-submit,
.wpforms-submit, .fluentform .ff-btn-submit {
  font-family: var(--serif); letter-spacing: .12em; text-transform: uppercase;
  font-size: .82rem; padding: 11px 30px; border-radius: 2px; cursor: pointer;
  background: var(--brown); color: #f6efe2; border: 1px solid var(--brown);
  transition: background .2s, color .2s;
}
.wpcf7-form input[type="submit"]:hover, .wpforms-submit:hover, .fluentform .ff-btn-submit:hover {
  background: transparent; color: var(--brown);
}
.wpcf7-not-valid-tip, .wpforms-error, .fluentform .text-danger { color: var(--red); font-size: .82rem; }
.wpcf7-response-output {
  border-color: var(--line) !important; background: #fbf7ef;
  font-size: .92rem; padding: 12px 16px !important; margin: 16px 0 0 !important;
}

/* ---------- notifikasi tema ---------- */
.notice-band { background: #e6f0e6; color: #28461d; padding: 14px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* =========================================================
   JEMBATAN BLOK CORE → DESAIN
   Seksi berulang kini disusun dari Group/Columns/Image/Cover
   bawaan WordPress. Aturan di bawah membuat markup blok itu
   tampil sama persis dengan markup Blade aslinya.
   ========================================================= */

/* Group bergaya seksi: beri padding tepi dan batasi lebar isinya. */
.wp-block-group.section,
.wp-block-group.panel-brown,
.wp-block-group.panel-olive,
.wp-block-group.why-choose,
.wp-block-group.journal-benefits { padding-left: 28px; padding-right: 28px; }

.wp-block-group.section > *,
.wp-block-group.panel-brown > *,
.wp-block-group.why-choose > *,
.wp-block-group.intro > * {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
.wp-block-group.intro > * { max-width: 540px; }

/* Artikel jurnal adalah kolom baca sempit pada desain aslinya
   (.article { max-width: 760px }). Grup pembungkusnya harus alignfull agar
   panel manfaat olive di bawahnya bisa penuh selebar layar, jadi lebar
   bacanya dikembalikan di level anak — kalau tidak, sitasi (760px, dari
   layout constrained grup-nya sendiri) jadi tidak sejajar dengan judul dan
   badan artikel yang ikut 1180px. */
.wp-block-group.section.article > * { max-width: 760px; }
.wp-block-group.intro > .wp-block-buttons { max-width: none; }

.wp-block-group.panel-mission { padding: 0; }
.wp-block-group.journal-benefits { padding-left: 0; padding-right: 0; }

/* ---------- kartu berbasis kolom ---------- */
.rr-cards { gap: 30px; }
.rr-cards .wp-block-column { text-align: center; }
.rr-cards .wp-block-image { margin: 0 0 14px; }
.rr-cards .wp-block-image img { width: 100%; display: block; }
.rr-cards--square .wp-block-image img { aspect-ratio: 1 / 1; object-fit: cover; }
.rr-cards h3 { font-size: 1.25rem; margin: 0 0 6px; }
.rr-cards p { margin: 0; }

/* Kartu di atas panel cokelat mewarisi warna terang. */
.card--on-brown .wp-block-column { color: #f3e9da; }
.card--on-brown .wp-block-image img { background: rgba(0,0,0,.08); }
.card--on-brown h3 a { text-decoration: none; }
.card--on-brown h3 a:hover { color: var(--tan-deep); }
.card--on-brown p {
  color: rgba(243,233,218,.85);
  font-style: italic; font-size: .92rem; line-height: 1.55;
  max-width: 280px; margin: 0 auto;
}

/* Kartu teaser berlatar tan. */
.rr-cards--teaser .wp-block-column {
  background: var(--tan-deep);
  padding-bottom: 26px;
  display: flex; flex-direction: column;
}
.rr-cards--teaser .wp-block-image { margin: 20px 20px 18px; }
.rr-cards--teaser .wp-block-image img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.rr-cards--teaser h3 { font-size: 1.15rem; line-height: 1.35; padding: 0 24px; margin: 0 0 16px; flex: 1; }
.rr-cards--teaser .wp-block-button__link { background: var(--sage); border-color: var(--sage); color: #fff; }
.rr-cards--teaser .wp-block-button__link:hover { background: transparent; color: var(--sage-dark); }

/* Grid varian aroma pada halaman produk. */
.variant-grid .wp-block-column { text-align: left; }
.variant-grid h3 { font-style: italic; font-size: 1.35rem; margin: .85em 0 .3em; }
.variant-grid p { font-style: italic; color: var(--muted); max-width: none; }

.giftset-tiers h3 { font-style: normal; }

/* Foto pembuka Gift Set dibatasi 520px dan ditengahkan, sesuai blade
   aslinya (.ph--tall style="max-width:520px;margin:0 auto 40px"). Tanpa ini
   fotonya melebar sampai 1180px — beda dari desain, sekaligus memaksa
   browser mengunduh varian 1400px seberat 2,2 MB. */
.wp-block-group.section > figure.size-rr-tall {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}
.wp-block-group.section > figure.size-rr-tall img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

/* ---------- deretan ikon "Why Choose" ---------- */
.rr-features { justify-content: center; gap: 56px; margin: 30px 0 36px; }
.rr-features .wp-block-column {
  flex-basis: 150px !important; flex-grow: 0;
  text-align: center;
}
.rr-features .wp-block-image { margin: 0 auto 14px; width: 78px; height: 78px; }
.rr-features .wp-block-image img { width: 100%; height: 100%; object-fit: contain; }
.rr-features p {
  font-family: var(--serif);
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--terracotta); line-height: 1.5; margin: 0;
}

/* ---------- panel misi ----------
   Desain aslinya: grid 2fr/3fr penuh selebar layar, media mengisi kolom
   kiri sampai ke tepi. Dua hal yang perlu dilawan di sini:

   1. Group pembungkusnya memakai layout "constrained" bawaan WordPress,
      yang menjepit isinya ke lebar konten 760px. Panel lain lolos karena
      sudah didaftarkan di aturan max-width var(--maxw) di atas; panel ini
      justru harus tanpa batas sama sekali.
   2. .wp-block-column memakai layout "flow" (display:block), jadi group di
      dalamnya setinggi isinya saja — videonya berhenti di 260px dan
      menyisakan olive kosong. Kolomnya dijadikan flex agar group-nya
      ikut meregang setinggi baris. */
/* Spesifisitas dinaikkan (dua class) supaya menang atas aturan padding
   .panel-olive di blok responsif — panel misi penuh sampai tepi layar di
   semua ukuran, sesuai desain. */
.wp-block-group.panel-olive.panel-mission { padding: 0; }

/* Grup pembungkus media juga memakai layout "constrained", jadi videonya
   ikut terjepit 760px di viewport 768px ke atas. Lepaskan juga. */
.wp-block-group.panel-mission > *,
.mission__media > * { max-width: none; }

.wp-block-columns.mission__split { gap: 0; margin: 0; align-items: stretch; }
.wp-block-columns.mission__split > .wp-block-column {
  padding: 0;
  display: flex; flex-direction: column;
}
.wp-block-columns.mission__split > .wp-block-column:first-child { flex-basis: 40%; flex-grow: 0; }
.wp-block-columns.mission__split > .wp-block-column > .wp-block-group { flex: 1 1 auto; }

.mission__media { background: #2c2418; display: flex; overflow: hidden; }
.mission__media video,
.mission__media img { width: 100%; height: 100%; object-fit: cover; display: block; flex: 1 1 auto; }
.mission__media .wp-block-image { margin: 0; flex: 1 1 auto; display: flex; }

.mission__body { justify-content: center; }
.mission__body > * { max-width: 460px; margin-left: auto; margin-right: auto; }

/* ---------- panel pilar Why Us (blok Cover) ---------- */
.wp-block-cover.whyus__panel { align-items: flex-end; padding: 0; }
.wp-block-cover.whyus__panel .wp-block-cover__inner-container { width: 100%; }
.wp-block-cover.whyus__panel .whyus__inner { padding: 48px 28px; max-width: 640px; }
.wp-block-cover.whyus__panel h2 { color: #f4eee2; font-size: clamp(1.8rem, 4vw, 2.6rem); text-shadow: 0 2px 20px rgba(0,0,0,.35); margin-bottom: .3em; }
.wp-block-cover.whyus__panel p { color: #f4eee2; font-size: 1.05rem; line-height: 1.7; text-shadow: 0 1px 12px rgba(0,0,0,.4); max-width: 560px; }

/* Panel genap memindahkan teksnya ke kanan, seperti desain aslinya. */
.entry-content > .whyus__panel:nth-of-type(even) .wp-block-cover__inner-container { display: flex; justify-content: flex-end; }
.entry-content > .whyus__panel:nth-of-type(even) .whyus__inner { text-align: right; }
.entry-content > .whyus__panel:nth-of-type(even) .whyus__inner p { margin-left: auto; }

/* ---------- hero (blok Cover) ---------- */
.wp-block-cover.is-hero .wp-block-cover__inner-container > p:empty { display: none; }

/* ---------- halaman About ---------- */
.wp-block-columns.rr-story-split { gap: 48px; align-items: center; margin-bottom: 40px; }
.rr-story-split .wp-block-image { margin: 0; }
.rr-story-split .wp-block-image img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.rr-story-split .prose p { margin: 0 0 1.1em; line-height: 1.7; }
.rr-story-split .prose strong { color: var(--brown-dark); }

blockquote.rr-story-quote {
  font-family: var(--serif); font-size: 1.35rem; line-height: 1.4;
  text-align: center; max-width: 760px; margin: 30px auto; border: none; padding: 0;
}
blockquote.rr-story-quote strong { color: var(--brown-dark); font-weight: 700; }
blockquote.rr-story-quote em { color: var(--terracotta); }

@media (max-width: 720px) {
  .wp-block-group.section,
  .wp-block-group.panel-brown,
  .wp-block-group.panel-olive,
  .wp-block-group.why-choose { padding-left: 20px; padding-right: 20px; }
  .rr-cards, .wp-block-columns.rr-story-split { gap: 24px; }
  .rr-features { gap: 28px; }
  .rr-features .wp-block-image { width: 64px; height: 64px; }
  .wp-block-columns.mission__split > .wp-block-column:first-child { flex-basis: 100% !important; }
  .mission__media { min-height: 280px; }
}

/* =========================================================
   RESPONSIF
   Breakpoint: 1023px (nav), 781px (kolom blok core),
   720px (tata letak modul), 480px (ponsel kecil).
   ========================================================= */

/* --- Navigasi ---
   Modul aslinya baru memunculkan hamburger di 720px. Di 768–900px
   sembilan item menu pecah jadi dua baris dan tinggi header melonjak
   dari 64px ke 107px, jadi hamburger dinaikkan sampai 1023px.
   Logo juga selalu tampil dan dikunci tepat di tengah header. */
@media (max-width: 1023px) {
  .nav__inner {
    position: relative;
    flex-direction: row; align-items: center; justify-content: flex-start;
    padding: 12px 20px;
  }

  .nav__toggle { display: inline-flex; }

  .nav__logo {
    display: flex;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .nav.is-open .nav__logo { display: flex; }
  .nav__logo img { height: 30px; }

  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--cream);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 14px;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .25s ease, opacity .2s ease;
  }
  .nav.is-open .nav__links { max-height: 80vh; overflow-y: auto; opacity: 1; }

  /* Target sentuh minimal 44px. */
  .nav__links a {
    display: block; padding: 13px 0;
    border-bottom: 1px solid rgba(122,92,66,.1); border-radius: 0;
  }
  .nav__links a:hover { border-bottom-color: var(--terracotta); }
  .locale-switcher { margin-left: 0 !important; }
}

/* --- Kolom blok core ---
   WordPress menumpuk .wp-block-column jadi satu kolom di bawah 782px.
   Empat ikon Why Choose lebih rapi 2×2 daripada menumpuk empat. */
@media (max-width: 781px) {
  .rr-features { flex-wrap: wrap; gap: 32px; }
  .rr-features .wp-block-column { flex-basis: calc(50% - 16px) !important; }

  .wp-block-columns.mission__split > .wp-block-column:first-child { flex-basis: 100% !important; }
  .mission__media { min-height: 260px; }
  .mission__media .wp-block-image img,
  .mission__media video { height: 260px; flex: none; }

  .wp-block-columns.rr-story-split { gap: 24px; }
  .rr-cards--teaser .wp-block-column { max-width: 420px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 720px) {
  /* Brand mark pembatas dikecilkan. */
  .wave-divider { width: 110px; height: 60.3px; margin-bottom: 10px; }

  /* Deretan ikon manfaat jurnal: lima ikon 80px tidak muat. */
  .journal-benefits__icons { gap: 20px; margin-bottom: 28px; }
  .journal-benefits__icons img { height: 52px; }
  .journal-benefits { padding: 40px 0; }

  /* Panel pilar Why Us diberi ruang baca lebih. */
  .wp-block-cover.whyus__panel .whyus__inner { padding: 32px 20px; }
  .entry-content > .whyus__panel:nth-of-type(even) .whyus__inner { text-align: left; }

  .page-head { padding: 40px 0 4px; }
  .comments { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 480px) {
  .nav__logo img { height: 26px; }
  .wave-divider { width: 92px; height: 50.4px; }

  .rr-features .wp-block-column { flex-basis: 100% !important; }
  .rr-cards--teaser h3 { padding: 0 18px; }
  .rr-cards, .wp-block-columns { gap: 20px; }

  .journal-benefits__icons img { height: 44px; }
  .search-form { flex-direction: column; }
  .search-form button { width: 100%; }
}

/* Label kecil pada kartu artikel: 11.2px terlalu kecil untuk dibaca. */
.post-card__kicker { font-size: .75rem; }

/* Media apa pun tidak boleh melebihi lebar induknya. */
img, video, iframe, table { max-width: 100%; }
video { height: auto; }

/* =========================================================
   ELEMENTOR
   Tema mendaftarkan lokasi Theme Builder di inc/elementor.php.
   Bagian ini melepas kunci lebar konten supaya section Elementor
   bisa melebar sampai tepi layar.
   ========================================================= */
.rr-elementor-built .entry-content,
.rr-elementor-built .entry-content > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.entry-content > .elementor,
.entry-content .elementor { max-width: none; }

/* Halaman Elementor tidak memakai padding tepi tema; Elementor punya
   pengaturan padding sendiri per section. */
.rr-elementor-built .entry-content { padding-left: 0; padding-right: 0; }

/* Widget Elementor mewarisi tipografi tema kecuali diatur sendiri. */
.elementor-widget-text-editor,
.elementor-widget-theme-post-content { font-family: var(--body); }

.elementor-heading-title { font-family: var(--serif); }

/* Area widget (dipakai widget Sidebar milik Elementor). */
.widget { margin-bottom: 28px; }
.widget-title {
  font-family: var(--serif); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  font-size: .78rem; color: var(--muted); margin: 0 0 14px;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin: .4em 0; }