/* ============================================================
   Pärn & Partners — pcadmin core pages

   pcadmin ships whole pages of its own (the newsletter confirm,
   verified and unsubscribe pages here) and styles none of them:
   core.css carries only structural mechanics, and the comment at
   its head says a theme owns the colours, fonts and surfaces. So
   every site keeps a pc-pages.css — this is that file for this
   site, written against the tokens in style.css.

   The core markup names two primitives this site's own sections
   do not use, and both are supplied below rather than renamed:
   .container (this site wraps with .wrap) and .pc-page-title
   (this site's own banner is .page-title). Renaming them would
   mean editing the submodule, which every other site shares.

   Loaded after style.css from includes/head.php, so the tokens
   are already defined and cascade order is on its side.
   ============================================================ */

/* ---- Layout ------------------------------------------------
   Scoped to the core blocks rather than declared globally: the
   name belongs to the core pages, and a bare `.container` rule
   would be a trap for anything added to this site later. */
.pc-page-title .container,
.pc-newsletter .container{max-width:var(--max);margin:0 auto;padding:0 1.75rem}

/* ---- Page title band ---------------------------------------
   The same band as .page-title, minus the photo layer: core's
   markup has no <img>, so the near-black overlay has nothing to
   sit over and the flat --navy-deep is the whole background.
   Heading measured at 13.34:1 on it, as on the site's own
   banners. */
.pc-page-title{background:var(--navy-deep);color:#fff;text-align:center}
.pc-page-title .container{padding-top:6.25rem;padding-bottom:6.25rem}
.pc-page-title .heading{
  color:#f5f5f5;font-weight:600;line-height:1.1;
  font-size:3.5rem;letter-spacing:normal;margin:0;
}

/* ---- Newsletter pages ---- */
.pc-newsletter{padding:5rem 0 6.5rem}
.pc-newsletter__card{
  max-width:34rem;margin:0 auto;padding:2.75rem 2.25rem;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);
}
.pc-newsletter__card--center{text-align:center}
.pc-newsletter__heading{
  color:var(--navy);font-size:1.6rem;font-weight:700;
  line-height:1.15;letter-spacing:-.02em;margin:0 0 .75rem;
}
.pc-newsletter__description{color:var(--slate);margin:0 0 1.75rem}

/* Status icon. Green and red are darkened for text on a light
   fill — 4.82:1 and 5.74:1 — because the glyph is a text node,
   not an image. */
.pc-newsletter__icon{
  width:4rem;height:4rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.25rem;font-size:1.75rem;line-height:1;
}
.pc-newsletter__icon--success{background:#eff9ea;color:var(--green-text)}
.pc-newsletter__icon--error{background:#fdecea;color:#b3261e}

/* Form — the confirm page only. No :focus outline is set here:
   the global :focus-visible ring in style.css uses :where(), so
   a plain border-color change leaves it intact. */
.pc-newsletter__field{margin-bottom:1.125rem;text-align:left}
.pc-newsletter__label{
  display:block;color:var(--navy);font-weight:600;
  font-size:.95rem;margin-bottom:.5rem;
}
.pc-newsletter__input{
  width:100%;padding:.875rem 1.125rem;
  border:1.5px solid var(--field-line);border-radius:.625rem;
  background:var(--paper);color:var(--navy);
  font:inherit;transition:border-color .35s var(--t);
}
.pc-newsletter__input:focus{border-color:var(--green-text)}

/* Only --error exists: the success path redirects to
   newsletter-verified rather than writing into this element. */
.pc-newsletter__alert{
  margin-top:1.125rem;padding:.875rem 1.125rem;border-radius:.625rem;
  font-size:.95rem;line-height:1.5;
}
.pc-newsletter__alert--error{background:#fdecea;border:1px solid #f4c7c3;color:#b3261e}

/* ---- Primary button ----------------------------------------
   .btn.btn-green in every respect; core's markup cannot carry
   this site's class names, so the rule is repeated against the
   name core uses. Navy on green, not white — see style.css. */
.pc-auth__btn--primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  padding:.9375rem 1.75rem;border-radius:6.25rem;
  font-family:inherit;font-weight:600;font-size:.95rem;letter-spacing:.01em;
  border:1.5px solid transparent;cursor:pointer;
  background:var(--green);color:var(--navy);
  box-shadow:0 .75rem 1.75rem -.75rem rgba(102,190,61,.7);
  transition:all .35s var(--t);
}
.pc-auth__btn--primary:hover{
  background:var(--green-dark);transform:translateY(-2px);
  box-shadow:0 1.125rem 2.125rem -.875rem rgba(102,190,61,.8);
}
.pc-auth__btn--primary:disabled{opacity:.6;cursor:default;transform:none}
#newsletter-confirm-form .pc-auth__btn--primary{width:100%}

@media(max-width:768px){
  .pc-page-title .heading{font-size:2rem;line-height:1.3}
  .pc-page-title .container{padding-top:3.75rem;padding-bottom:3.75rem}
  .pc-newsletter{padding:3.5rem 0 4.5rem}
  .pc-newsletter__card{padding:2rem 1.5rem}
  .pc-newsletter__heading{font-size:1.35rem}
}