/* ═══════════════════════════════════════════════════════════
   XFINITIVE GROUP — WordPress layer
   Everything the static build never needed: admin bar offsets,
   core markup classes, and the blog/page templates. Loaded after
   style.css so it can lean on the same design tokens.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────── admin bar ───────────────
   .header and .scroll-progress are fixed at top:0, so a logged-in
   editor would otherwise see them slide under the admin bar. */
body.admin-bar .header{top:32px}
body.admin-bar .scroll-progress{top:32px}
body.admin-bar .preloader{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .header{top:46px}
  body.admin-bar .scroll-progress{top:46px}
  body.admin-bar .preloader{top:46px}
  /* the mobile drawer is fixed inset:0 — pull it clear of the bar too */
  body.admin-bar .nav{inset:46px 0 0 auto}
}

/* ─────────────── accessibility ─────────────── */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
  background:var(--violet-600);color:#fff;font-weight:700;font-size:.9rem;
}
.skip-link:focus{left:0}
:where(a,button,summary,input,textarea,select):focus-visible{
  outline:2px solid var(--violet-600);outline-offset:3px;border-radius:4px;
}

/* ─────────────── header outside the front page ───────────────
   There is no hero to float over on an inner page, so the header
   starts in its settled state instead of transparent. */
.header.is-solid{
  padding-block:8px;
  background:rgba(255,255,255,.86);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -20px rgba(42,15,69,.35);
}

/* ─────────────── inner page shell ─────────────── */
.page-head{
  padding-top:clamp(104px,12vh,148px);
  padding-bottom:clamp(20px,3vw,34px);
  text-align:center;
}
.page-head__title{font-size:clamp(1.85rem,3.6vw,2.95rem)}
.page-head__meta{margin-top:.8rem;font-size:.88rem;color:var(--muted)}
.page-head__lead{margin-top:.9rem;color:var(--body);max-width:660px;margin-inline:auto}

.shell{padding-bottom:clamp(48px,6vw,90px)}
.shell--narrow > .container{max-width:820px}

/* ─────────────── post content (prose) ─────────────── */
.entry__thumb{
  margin-bottom:clamp(20px,3vw,34px);
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.entry__thumb img{width:100%;aspect-ratio:16/9}

.prose{color:var(--body)}
.prose > * + *{margin-top:1.1em}
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{margin-top:1.8em;line-height:1.2}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.95rem)}
.prose h3{font-size:clamp(1.18rem,1.8vw,1.45rem)}
.prose a{color:var(--violet-600);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--lime-700)}
.prose strong,.prose b{color:var(--ink-2)}
.prose ul,.prose ol{padding-left:1.4em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--violet-500)}
.prose img,.prose video,.prose iframe{border-radius:var(--r);max-width:100%}
.prose figure{margin-block:1.6em}
.prose figcaption,.prose .wp-caption-text{
  margin-top:.6em;font-size:.82rem;color:var(--muted);text-align:center;
}
.prose blockquote{
  margin-block:1.6em;padding:1.1em 1.4em;
  border-left:3px solid transparent;border-image:var(--grad) 1;
  background:var(--violet-100);border-radius:0 var(--r) var(--r) 0;
  color:var(--ink-2);font-size:1.05rem;
}
.prose blockquote cite{display:block;margin-top:.7em;font-size:.85rem;color:var(--muted);font-style:normal}
.prose code,.prose kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--violet-100);color:var(--violet-700);
  padding:.15em .45em;border-radius:6px;
}
.prose pre{
  overflow-x:auto;padding:1.1em 1.2em;border-radius:var(--r);
  background:var(--violet-900);color:#EDE7F6;font-size:.86rem;line-height:1.6;
}
.prose pre code{background:none;color:inherit;padding:0}
.prose hr{border:0;height:1px;background:var(--line);margin-block:2.4em}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;display:block;overflow-x:auto}
.prose th,.prose td{padding:.7em .9em;border:1px solid var(--line);text-align:left}
.prose th{background:var(--violet-100);color:var(--ink-2);font-weight:700}
.prose .wp-block-button__link,.prose .wp-element-button{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.85em 1.5em;border-radius:999px;
  background:var(--grad);color:#fff!important;font-weight:700;text-decoration:none;
  box-shadow:var(--shadow);
}

/* core alignment + media classes */
.alignleft{float:left;margin:.4em 1.6em 1.2em 0}
.alignright{float:right;margin:.4em 0 1.2em 1.6em}
.aligncenter{display:block;margin-inline:auto;text-align:center}
.alignnone{margin-block:1.2em}
.alignwide{width:min(100%,1080px);margin-inline:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.wp-caption{max-width:100%}
.sticky .entry-card__badge,.bypostauthor{}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.gallery-item{margin:0}
.gallery-caption{font-size:.8rem;color:var(--muted)}
@media (max-width:600px){
  .alignleft,.alignright{float:none;margin:1.2em 0}
}

/* ─────────────── post grid (blog / archive / search) ─────────────── */
.cards{
  display:grid;gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.entry-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.entry-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.entry-card__media{display:block;aspect-ratio:16/10;background:var(--violet-100);overflow:hidden}
.entry-card__media img{width:100%;height:100%}
.entry-card__body{display:flex;flex-direction:column;gap:.6rem;padding:clamp(18px,2vw,24px);flex:1}
.entry-card__meta{
  font-family:var(--f-display);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--violet-500);
}
.entry-card__title{font-size:1.14rem;line-height:1.25}
.entry-card__title a:hover{color:var(--violet-600)}
.entry-card__excerpt{font-size:.94rem}
.entry-card__more{
  margin-top:auto;font-family:var(--f-display);font-size:.86rem;font-weight:700;
  color:var(--violet-600);display:inline-flex;align-items:center;gap:.4em;
}
.entry-card__more:hover{gap:.75em;color:var(--lime-700)}

/* ─────────────── pagination ─────────────── */
.pagination{margin-top:clamp(28px,3.6vw,44px);display:flex;justify-content:center}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.pagination .page-numbers{
  display:grid;place-items:center;min-width:42px;height:42px;padding-inline:12px;
  border:1px solid var(--line);border-radius:12px;
  font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--ink-2);
  transition:.35s var(--ease);
}
.pagination .page-numbers:hover{border-color:var(--violet-300);color:var(--violet-700)}
.pagination .page-numbers.current{background:var(--grad);color:#fff;border-color:transparent}

.post-nav{
  margin-top:clamp(30px,4vw,48px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--f-display);font-weight:700;font-size:.92rem;
}
.post-nav a{color:var(--violet-600)}
.post-nav a:hover{color:var(--lime-700)}

.entry__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.8rem}
.entry__tags a{
  font-size:.76rem;font-weight:600;padding:.35em .85em;border-radius:999px;
  background:var(--violet-100);color:var(--violet-700);
}
.entry__tags a:hover{background:var(--lime-100);color:var(--lime-700)}

/* ─────────────── comments ─────────────── */
.comments{margin-top:clamp(34px,4.4vw,56px);padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--line)}
.comments__title{font-size:clamp(1.2rem,2vw,1.6rem);margin-bottom:1.4rem}
.comment-list{display:grid;gap:18px}
.comment-list ol.children{margin-top:18px;padding-left:clamp(14px,3vw,34px);display:grid;gap:18px;list-style:none}
.comment-body{
  padding:clamp(16px,2vw,22px);border:1px solid var(--line);
  border-radius:var(--r);background:#fff;box-shadow:var(--shadow-sm);
}
.comment-author{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;color:var(--ink)}
.comment-author img{border-radius:50%}
.comment-meta{font-size:.78rem;color:var(--muted);margin-bottom:.7rem}
.comment-reply-link{font-size:.82rem;font-weight:700;color:var(--violet-600)}
.comment-respond{margin-top:clamp(24px,3vw,38px)}
.comment-reply-title{font-family:var(--f-display);font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:1rem}
.comment-form{display:grid;gap:14px;max-width:640px}
.comment-form label{
  display:block;font-family:var(--f-display);font-size:.8rem;font-weight:700;
  color:var(--ink-2);margin-bottom:.4rem;
}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  width:100%;padding:.85em 1.05em;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);transition:.3s var(--ease);
}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--violet-300);outline:0;box-shadow:0 0 0 4px var(--violet-100)}
.comment-form .form-submit input{
  padding:.85em 1.6em;border:0;border-radius:999px;cursor:pointer;
  background:var(--grad);color:#fff;font-family:var(--f-display);font-weight:700;
  box-shadow:var(--shadow);
}
.comment-form .comment-notes,.comment-form .form-submit{margin:0}
.comment-notes,.comment-form-cookies-consent label{font-size:.82rem;color:var(--muted);font-weight:400}
.comment-form-cookies-consent{display:flex;align-items:center;gap:8px}
.comment-form-cookies-consent label{margin:0}

/* ─────────────── search / 404 ─────────────── */
.search-form{display:flex;gap:10px;max-width:460px;margin-inline:auto}
.search-form input[type=search]{
  flex:1;padding:.85em 1.1em;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--ink);
}
.search-form input[type=search]:focus{border-color:var(--violet-300);outline:0;box-shadow:0 0 0 4px var(--violet-100)}
.search-form button{
  padding:.85em 1.5em;border-radius:999px;background:var(--grad);color:#fff;
  font-family:var(--f-display);font-weight:700;box-shadow:var(--shadow);
}
.empty{text-align:center;max-width:520px;margin-inline:auto;display:grid;gap:1.2rem;justify-items:center}
.empty__code{
  font-family:var(--f-display);font-weight:800;line-height:1;
  font-size:clamp(4rem,14vw,9rem);
  background:var(--grad-head);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ─────────────── contact form, server-rendered states ───────────────
   The JS path writes .form__note itself; these cover the no-JS
   redirect back from admin-post.php. */
.form__note[data-server]{margin-top:.2rem}
.form input[type=text].has-err,.form textarea.has-err{border-color:#D6336C}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* form or map switched off in the Customizer — the survivor takes the row */
.contact__grid:has(> :only-child){grid-template-columns:1fr}

/* ─────────────── Contact Form 7 ───────────────
   The plugin brings its own markup: <p> wrappers, .wpcf7-form-control on every
   field, .wpcf7-not-valid-tip under a bad one, .wpcf7-response-output for the
   summary. These rules map that vocabulary onto the design's, so a form pasted
   straight out of CF7 lands looking like the hand-built one — and a form using
   the theme's own .field / .form__row classes (see README) still works, because
   nothing here fights those.

   .form--cf7 is the wrapper the theme prints instead of its own <form>. */
.form--cf7{display:block}
.form--cf7 .wpcf7-form{display:grid;gap:16px;align-content:start}

/* CF7 wraps each control in <p>; the reset zeroed its margins, so it becomes
   the field row itself rather than needing extra markup */
.form--cf7 .wpcf7-form > p{display:grid;gap:6px;margin:0}
.form--cf7 .wpcf7-form-control-wrap{display:block}

/* CF7 stacks its hidden _wpcf7 inputs in a fieldset; as a grid child it would
   open a phantom row between the top of the card and the first field */
.form--cf7 .hidden-fields-container{display:none}

/* labels: CF7's own <label>, and the theme's .field__label if you used it */
.form--cf7 .wpcf7-form label{display:grid;gap:6px}
/* CF7 separates label text from its input with <br>. Inside a grid that <br>
   becomes a third row, so the gap under every label would double. */
.form--cf7 .wpcf7-form label br{display:none}
.form--cf7 .wpcf7-form label,
.form--cf7 .field__label{
  font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
/* a .field__label inside a label must not double the uppercase treatment */
.form--cf7 .field .field__label{display:block}

/* inputs — same geometry and focus ring as .field input in style.css */
.form--cf7 input[type=text],
.form--cf7 input[type=email],
.form--cf7 input[type=tel],
.form--cf7 input[type=url],
.form--cf7 input[type=number],
.form--cf7 input[type=date],
.form--cf7 select,
.form--cf7 textarea{
  width:100%;padding:.85em 1em;border-radius:var(--r-sm);
  background:rgba(255,255,255,.8);border:1px solid var(--line);
  color:var(--ink);font:inherit;
  /* CF7's <label> wraps its input, and the label is uppercased above — without
     this reset the visitor's own typing would be uppercased with it */
  text-transform:none;letter-spacing:normal;
  transition:border-color .35s,box-shadow .35s,background-color .35s;
  resize:vertical;
}
.form--cf7 input::placeholder,
.form--cf7 textarea::placeholder{color:#B4AEC4}
.form--cf7 input:focus,
.form--cf7 select:focus,
.form--cf7 textarea:focus{
  outline:0;background:#fff;border-color:var(--violet-500);
  box-shadow:0 0 0 4px rgba(139,63,196,.14);
}

/* CF7's per-field error tip, dressed as .field__err */
.form--cf7 .wpcf7-not-valid-tip{
  font-size:.76rem;color:#D6336C;margin-top:.35em;
}
.form--cf7 .wpcf7-not-valid{
  border-color:#D6336C;box-shadow:0 0 0 4px rgba(214,51,108,.1);
}

/* the summary line, dressed as .form__note */
.form--cf7 .wpcf7-response-output{
  margin:0;padding:0;border:0;
  font-size:.85rem;font-weight:600;text-align:center;color:var(--body);
}
.form--cf7 form.sent .wpcf7-response-output{color:var(--lime-700)}
.form--cf7 form.invalid .wpcf7-response-output,
.form--cf7 form.unaccepted .wpcf7-response-output,
.form--cf7 form.payment-required .wpcf7-response-output,
.form--cf7 form.failed .wpcf7-response-output,
.form--cf7 form.aborted .wpcf7-response-output,
.form--cf7 form.spam .wpcf7-response-output{color:#D6336C}

/* submit — an <input> can hold no arrow, so [submit] gets the pill without it.
   Use the <button> markup from the README to keep the arrow. */
.form--cf7 input[type=submit],
.form--cf7 button[type=submit]{
  --btn-bg:var(--grad);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  width:100%;padding:.92em 1.7em;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--f-display);font-size:.94rem;font-weight:700;letter-spacing:-.01em;
  color:#fff;background:var(--grad);
  box-shadow:0 14px 30px -14px rgba(110,44,158,.65);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.form--cf7 input[type=submit]:hover,
.form--cf7 button[type=submit]:hover{
  transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(110,44,158,.7);
}
.form--cf7 input[type=submit]:disabled,
.form--cf7 button[type=submit]:disabled{opacity:.6;cursor:default;transform:none}

/* the spinner sits inline after the button and must not shove the layout */
.form--cf7 .wpcf7-spinner{margin:.6em auto 0;display:block}

/* CF7 mirrors the theme's two-up row if you wrap two fields in .form__row */
.form--cf7 .form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0}
.form--cf7 .form__row > *{margin:0}
@media (max-width:600px){
  .form--cf7 .form__row{grid-template-columns:1fr}
}

/* honeypot / hidden CF7 fields must not open a gap in the grid */
.form--cf7 .wpcf7-form > p:has(> input[type=hidden]:only-child){display:none}

/* CF7's error summary is for screen readers — hide it visually, never from
   assistive tech (display:none would take it away from both) */
.form--cf7 .screen-reader-response{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ─────────────── editor-entered copy ───────────────
   The static build hand-wrote one <p> per slot. Editor content arrives as
   however many paragraphs the client typed, and the global reset zeroes every
   margin — so the multi-paragraph case needs its rhythm back. */
.lead__msg p + p,
.flow__box p + p,
.tquote__text p + p,
.footer__brand p + p,
.ccard__copy p + p{margin-top:1rem}
.lead__msg p:first-child,
.flow__box p:first-child{margin-top:0}

/* ─────────────── editor / customizer helpers ─────────────── */
.xf-empty-note{
  padding:clamp(18px,2.4vw,26px);text-align:center;
  border:1px dashed var(--violet-300);border-radius:var(--r);
  background:var(--violet-100);color:var(--violet-700);
  font-size:.9rem;font-weight:600;
}