/* ═══════════════════════════════════════════════════════════════
   PUTIH DCARIK — base
   ═══════════════════════════════════════════════════════════════

   Loaded site-wide, unlike main.css. This file carries the design tokens and
   the page's typographic voice so the Elementor-built pages (about, policies,
   contact) match the landing page — and nothing else.

   It contains NO reset. That is the whole point: main.css opens with bare
   element selectors built for a standalone page, which is why it is confined
   to the landing template (AGENTS.md §4). Do not move reset rules in here.

   The token block below is copied verbatim from main.css. If you retheme, edit
   main.css and re-derive this file rather than editing both by hand.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* colour */
  --paper:      #F6F3EC;
  --paper-2:    #EEE9DE;
  --sand:       #DFD7C7;
  --ink:        #1A1B17;
  --ink-70:     rgba(26,27,23,.70);
  --ink-61:     rgba(26,27,23,.61);   /* was --ink-45 at .45 — 2.82:1 on --paper failed WCAG AA */
  --ink-18:     rgba(26,27,23,.18);
  --ink-08:     rgba(26,27,23,.08);
  --frond:      #33463A;
  --frond-soft: #5B7263;
  --clay:       #A85F3C;
  --night:      #12140F;
  --night-2:    #1B1E17;
  --light-70:   rgba(246,243,236,.70);
  --light-48:   rgba(246,243,236,.48);  /* was --light-45 at .45 — 4.20:1 on --night failed WCAG AA */
  --light-18:   rgba(246,243,236,.18);

  /* type */
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  --fs-micro:  clamp(.66rem, .60rem + .18vw, .74rem);
  --fs-body:   clamp(1rem, .95rem + .22vw, 1.125rem);
  --fs-lede:   clamp(1.125rem, 1.02rem + .5vw, 1.4rem);
  --fs-stmt:   clamp(1.6rem, 1.1rem + 2.3vw, 3.25rem);
  --fs-h2:     clamp(2.4rem, 1.4rem + 4.2vw, 5.5rem);
  --fs-h1:     clamp(3rem, 1.1rem + 8.2vw, 10.5rem);
  --fs-mega:   clamp(4rem, 1rem + 13vw, 16rem);

  /* space */
  --gut: clamp(1.25rem, .6rem + 2.6vw, 4rem);
  --sec: clamp(6rem, 3rem + 10vw, 14rem);
  --shell: clamp(1560px, 88vw, 2560px);

  /* motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,.05,.36,1);
}

/* ── Large displays ── */
@media (min-width: 1600px){
  html{ font-size:clamp(1rem, .68rem + .32vw, 1.2rem); }

/* ── Site pages ───────────────────────────────────────────────────────────
   Deliberately gentle: these are properties Elementor and the block editor
   override cleanly, so a page built in the editor still wins. */
/* Everything below is scoped away from `.pd-page`.

   main.css owns the landing page completely, and its reset lives inside
   `@layer pd.reset` — which ANY unlayered rule beats, whatever the
   specificity. So bare `body` / `h1-h4` selectors here silently overrode it:
   body line-height became 1.65 instead of 1.6 across the whole page, and the
   footer's "VISIT / GOOD TO KNOW / EXPLORE" labels rendered in Fraunces
   instead of inheriting DM Sans.

   Scoping to :not(.pd-page) keeps this file to the job it is for — the
   Elementor-built pages — and leaves the landing page to main.css. */
body:not(.pd-page){
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body:not(.pd-page) :is(h1, h2, h3, h4){
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.03em;
}

body:not(.pd-page) h1{ font-size: var(--fs-h2); }
body:not(.pd-page) h2{ font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
body:not(.pd-page) h3{ font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }

/* Links.
   Scoped to the reading areas rather than a bare `a` selector. main.css sets
   `a { color: inherit }` so links take their colour from whatever ground they
   sit on — but that rule lives inside `@layer pd.reset`, and ANY unlayered
   rule beats a layered one regardless of specificity. A bare `a` here
   therefore overrode it on the landing page and forced 17 of 26 links to green:
   the whole nav, the buttons, and both text links, including "Choose a room"
   sitting at 1.83:1 as dark green on near-black.

   This is the §4 leak in reverse — the guidance anticipates main.css leaking
   out, not base.css leaking in — but the mechanism is the same, and so is the
   fix: do not use bare element selectors outside a layer. */
.pd-site__inner a,
.pd-entry__body a{ color: var(--frond); text-underline-offset: .18em; }

.pd-site__inner a:hover,
.pd-entry__body a:hover{ color: var(--clay); }

body:not(.pd-page) ::selection{ background: var(--frond); color: var(--paper); }

:focus-visible{
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Shared page furniture for the non-landing templates. */
.pd-site{ padding: clamp(7rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 7rem); }
.pd-site__inner{
  width: 100%;
  max-width: 78ch;
  margin-inline: auto;
  padding-inline: var(--gut);
}
.pd-site__title{
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.04em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.pd-site__meta{
  font-size: var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-61);
  margin: 0 0 1rem;
}

/* Elementor containers: let .pd-shell do the constraining (AGENTS.md §5). */
.elementor-section.elementor-section-boxed > .elementor-container{ max-width: var(--shell); }

/* Admin-only setup panel, shown when no form is connected yet. */
.pd-setup{
  width: 100%;
  max-width: 62ch;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px dashed rgba(246,243,236,.34);
  border-radius: 4px;
  background: rgba(18,20,15,.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--light-70);
  font-size: .9rem;
  line-height: 1.55;
  display: grid;
  gap: .7rem;
}
.pd-setup p{ margin: 0; }
.pd-setup a{ color: var(--paper); text-decoration: underline; }
.pd-setup__title{
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--paper);
}
.pd-setup__fields,
.pd-setup__note{
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: var(--light-48);
}

/* ── Site navigation (non-landing pages) ─────────────────────────────────
   The landing page has its own scroll-aware bar in main.css; this is the
   ordinary menu for the pages Elementor builds. */
.pd-sitenav{
  position: sticky;
  top: 0;
  z-index: 800;
  background: rgba(246,243,236,.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--ink-08);
}
.pd-sitenav__inner{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 1rem var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.pd-sitenav__brand{
  display: grid;
  line-height: 1.1;
  text-decoration: none;
  color: var(--ink);
}
.pd-sitenav__name{
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: -.02em;
}
.pd-sitenav__sub{
  font-size: var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-61);
}
.pd-sitenav__menu{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd-sitenav__menu a{
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-70);
}
.pd-sitenav__menu a:hover,
.pd-sitenav__menu .current-menu-item > a{ color: var(--ink); }

/* ── Entries ─────────────────────────────────────────────────────────── */
.pd-entry + .pd-entry{
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--ink-08);
}
.pd-entry__title{
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -.03em;
  margin: 0 0 .5rem;
}
.pd-entry__title a{ text-decoration: none; color: inherit; }
.pd-entry__title a:hover{ color: var(--clay); }
.pd-entry__body > * + *{ margin-top: 1.1em; }

/* ── Search ──────────────────────────────────────────────────────────── */
.pd-search{
  display: flex;
  gap: .5rem;
  margin: 1.5rem 0;
  max-width: 34rem;
}
.pd-search input[type="search"]{
  flex: 1;
  padding: .8rem 1rem;
  border: 1px solid var(--ink-18);
  border-radius: 3px;
  background: var(--paper-2);
  font: inherit;
  color: var(--ink);
}
.pd-search button{
  padding: .8rem 1.4rem;
  border: 0;
  border-radius: 3px;
  background: var(--frond);
  color: var(--paper);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.pd-search button:hover{ background: var(--clay); }

/* ── Pagination ──────────────────────────────────────────────────────── */
.pd-pagination{
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-08);
}
.pd-pagination .nav-links{
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  font-size: var(--fs-micro);
  letter-spacing: .12em;
}

/* Screen-reader-only, matching core's class so plugins and core markup work. */
.screen-reader-text{
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}
.screen-reader-text:focus{
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 1rem 1.4rem;
  background: var(--paper);
  color: var(--ink);
  z-index: 100000;
  top: .5rem;
  left: .5rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   Shared page furniture
   ══════════════════════════════════════════════════════════════════════════

   header.php and footer.php emit the skip link and the footer on EVERY
   template, but main.css only loads on the landing page (AGENTS.md §4). These
   rules are extracted verbatim from main.css so the furniture is styled
   site-wide; re-derive them rather than editing here, and main.css stays the
   single source of truth.

   The landing page loads both files and these rules resolve identically, so
   the duplication costs a little weight there and nothing else.
   ────────────────────────────────────────────────────────────────────────── */

/* main.css gets these from its `@layer pd.reset` block, which is deliberately
   not in this file. Scoped to the furniture so nothing leaks into Elementor
   widgets, the block editor, or plugin markup. */
.pd-skip,
.pd-foot :where(p, h4, ul, ol){ margin: 0; }
.pd-foot :where(ul, ol){ padding: 0; list-style: none; }
.pd-foot :where(a),
.pd-skip{ color: inherit; text-decoration: none; }

.pd-shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

.pd-skip{
  position:fixed; top:0; left:0; z-index:9999;
  padding:.85rem 1.4rem; background:var(--ink); color:var(--paper);
  font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase;
  transform:translateY(-110%); transition:transform .3s var(--e-out);
}
.pd-skip:focus-visible{ transform:translateY(0); }

/* ═══════════════ FOOTER ═══════════════ */
.pd-foot{ background:var(--night); color:var(--paper); padding:clamp(4rem,8vw,7rem) 0 2rem; }
.pd-foot__top{
  display:grid; grid-template-columns:1fr 2fr; gap:clamp(2.5rem,5vw,5rem);
  padding-bottom:clamp(3rem,6vw,5rem); border-bottom:1px solid var(--light-18);
}
.pd-foot__mark{
  font-family:var(--serif); font-size:clamp(2.4rem,5.5vw,4.5rem);
  font-weight:300; line-height:.9; letter-spacing:-.04em;
}
.pd-foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.pd-foot__cols h4{
  font-size:.6rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color:var(--light-48); margin-bottom:1.2rem;
}
.pd-foot__cols p{ font-size:.92rem; color:var(--light-70); line-height:1.9; }
.pd-foot__cols nav{ display:grid; gap:.5rem; }
.pd-foot__cols nav a{
  font-size:.92rem; color:var(--light-70); width:max-content;
  transition:color .35s ease, transform .45s var(--e-out);
}
.pd-foot__cols nav a:hover{ color:var(--paper); transform:translateX(6px); }
.pd-foot__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:2rem;
  font-size:var(--fs-micro); letter-spacing:.1em; color:var(--light-48);
}