/* =========================================================
   ATMA — WordPress layer
   Styles for everything the static mockup never had: inner
   pages, blog posts, editor blocks, pagination, admin bar.
   Uses the same tokens as style.css — nothing redefined.
   ========================================================= */

/* ---------- Accessibility ---------- */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed;top:12px;left:12px;z-index:9999;width:auto;height:auto;
  clip:auto;margin:0;padding:12px 20px;background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;
}

/* Logged-in admin bar must not sit on top of the sticky nav. */
body.admin-bar .nav{top:32px}
@media (max-width:782px){body.admin-bar .nav{top:46px}}

/* ---------- Inner-page hero ---------- */
/* The homepage nav floats over a dark hero. Inner pages have no hero image,
   so they get a dark band of their own — otherwise the white logo and links
   would sit on cream and disappear. */
.pagehero{
  background:var(--ink);
  color:var(--cream);
  padding:calc(clamp(96px,12vw,150px) + 60px) 0 clamp(56px,7vw,88px);
  position:relative;
  overflow:hidden;
}
.pagehero::after{
  content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;
  border-radius:50%;border:1px solid rgba(176,141,87,.16);pointer-events:none;
}
.pagehero .eyebrow{color:var(--brass);display:block;margin-bottom:1.1em}
.pagehero .display{
  font-size:clamp(2.3rem,5.4vw,4.1rem);margin:0;max-width:20ch;
}
.pagehero .lede{
  color:rgba(247,242,235,.72);max-width:60ch;margin:1.1em 0 0;
  font-size:clamp(1rem,1.5vw,1.15rem);
}

/* ---------- Long-form content ---------- */
.prose{
  max-width:74ch;margin:0 auto;font-size:1.06rem;line-height:1.78;color:var(--ink-3);
}
.prose > * + *{margin-top:1.2em}
.prose h2,.prose h3,.prose h4{
  font-family:var(--serif);font-weight:500;color:var(--ink);line-height:1.15;
  margin-top:1.9em;margin-bottom:.5em;
}
.prose h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.prose h3{font-size:clamp(1.35rem,2.2vw,1.7rem)}
.prose h4{font-size:1.15rem}
.prose a{color:var(--brass-2);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.45em}
.prose blockquote{
  border-left:2px solid var(--brass);margin-left:0;padding:.2em 0 .2em 1.4em;
  font-family:var(--serif);font-size:1.25rem;font-weight:400;color:var(--ink);font-style:italic;
}
.prose img,.prose figure img{border-radius:var(--radius)}
.prose figure{margin:2em 0}
.prose figcaption{
  font-size:.85rem;color:var(--muted);margin-top:.7em;text-align:center;
}
.prose code{
  background:var(--cream-2);padding:.15em .45em;border-radius:var(--radius);font-size:.9em;
}
.prose pre{
  background:var(--ink);color:var(--cream);padding:1.2em 1.4em;border-radius:var(--radius);
  overflow-x:auto;font-size:.9rem;
}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:.7em .6em;text-align:left}
.prose th{font-weight:600;color:var(--ink)}
.prose__hero{margin:0 0 2.4em}
.prose__hero img{width:100%;height:auto}
.prose__pages{margin-top:2em;font-size:.9rem;letter-spacing:.06em}

/* WordPress core alignment classes. */
.prose .alignwide{
  max-width:min(1100px,92vw);margin-left:50%;transform:translateX(-50%);
}
.prose .alignfull{
  max-width:100vw;margin-left:50%;transform:translateX(-50%);
}
.prose .alignleft{float:left;margin:.4em 1.8em 1.2em 0;max-width:46%}
.prose .alignright{float:right;margin:.4em 0 1.2em 1.8em;max-width:46%}
.prose .aligncenter{margin-left:auto;margin-right:auto}
@media (max-width:640px){
  .prose .alignleft,.prose .alignright{float:none;margin:1.4em 0;max-width:100%}
}
.wp-caption{max-width:100%}

/* ---------- Card grid (blog, search, archives) ---------- */
.cards{
  display:grid;gap:clamp(20px,2.6vw,34px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(20,17,14,.09)}
.card__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--stone)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:.6em;flex:1}
.card__body .k{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:500;
}
.card__body h2{
  font-family:var(--serif);font-weight:500;font-size:1.4rem;line-height:1.2;margin:0;
}
.card__body h2 a:hover{color:var(--brass-2)}
.card__body p{color:var(--muted);font-size:.94rem;margin:0}
.card__body .svc__more{margin-top:auto;color:var(--ink)}

/* ---------- Project detail ---------- */
.project__hero{margin:0 0 clamp(32px,4vw,56px)}
.project__hero img{width:100%;height:auto;border-radius:var(--radius)}
.project__meta{
  display:grid;gap:clamp(18px,2.4vw,32px);margin-top:clamp(32px,4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-top:1px solid var(--line);padding-top:clamp(24px,3vw,36px);
}
.project__meta small{
  display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin-bottom:.5em;font-weight:500;
}
.project__meta b{font-family:var(--serif);font-weight:500;font-size:1.15rem}

/* Archive filters are links here, not buttons — keep them identical. */
a.pf__filter{display:inline-block;text-decoration:none}

/* ---------- Pagination ---------- */
.pagination{
  margin-top:clamp(36px,4.5vw,60px);display:flex;justify-content:center;
}
.pagination .nav-links{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{
  min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border:1px solid var(--line);border-radius:var(--radius);
  font-size:.9rem;letter-spacing:.04em;transition:all .4s var(--ease);
}
.pagination .page-numbers:hover{border-color:var(--brass);color:var(--brass-2)}
.pagination .page-numbers.current{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pagination .dots{border:0}

/* ---------- Post navigation ---------- */
.postnav{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(40px,5vw,64px);padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line);font-size:.95rem;
}
.postnav a{color:var(--muted);transition:color .4s var(--ease)}
.postnav a:hover{color:var(--brass-2)}
.postnav__next{margin-left:auto;text-align:right}

/* ---------- Search form ---------- */
.search-form{display:flex;gap:8px;max-width:420px}
.search-form label{flex:1}
.search-form .search-field{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--sans);font-size:.95rem;background:var(--paper);color:var(--ink);
}
.search-form .search-field:focus{outline:none;border-color:var(--brass)}
.search-form .search-submit{
  padding:14px 22px;border:0;background:var(--ink);color:var(--cream);
  border-radius:var(--radius);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
}

/* ---------- Enquiry form states ---------- */
.form.is-sending button[type=submit]{opacity:.6;pointer-events:none}
.form__note.is-ok{color:var(--brass-2);font-weight:500}
.form__note.is-error{color:#B4463C;font-weight:500}
.field.has-error input,.field.has-error textarea{border-color:#B4463C}

/* ---------- Nav on inner pages ---------- */
/* Inner pages have no hero image behind the nav, so main.js keeps the .solid
   state on from the first paint. The existing .nav.solid rules in style.css
   already handle the cream background and the black logo — nothing to add
   here beyond making sure the dark page hero starts below the bar. */