/* =========================================
   KYRIMAI NEWSLETTER — page-specific styles
   Matched to Figma node 2336:2 (1700px frame).
   Everything uses the site font (Noto Serif Display).
   (shared reveal animations come from base.css)
========================================= */

/* -----------------------------------------
   Hide the host-theme chrome on this page only.
   Scoped via the body class from kev_body_class() (kev-kyrimai-newsletter).
------------------------------------------- */
body.kev-kyrimai-newsletter .menu-toggle,
body.kev-kyrimai-newsletter .header-ctas,
body.kev-kyrimai-newsletter .text-lg-right,
body.kev-kyrimai-newsletter #trigger-col,
body.kev-kyrimai-newsletter header,
body.kev-kyrimai-newsletter footer,
body.kev-kyrimai-newsletter .site-header,
body.kev-kyrimai-newsletter .site-footer,
body.kev-kyrimai-newsletter #main-header-collapse-clone {  /* off-canvas mobile menu clone */
  display: none !important;
}

/* The theme sets min-width: 355px on <html> and <body>, which makes phones
   narrower than that scroll sideways and pushes this page off-center. */
html:has(body.kev-kyrimai-newsletter),
body.kev-kyrimai-newsletter {
  min-width: 0 !important;
}

/* =========================================
   PAGE
   Full-bleed: break out of the theme's centered .content > .container.
========================================= */
.page-newsletter {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 53px 20px 120px;
  background: #B5C9B8;
  color: #000;
  font-family: 'Noto Serif Display';
}

/* The theme forces `text-align: justify` on every <p>, and Contact Form 7
   wraps each control in a <p> — neutralise both inside this page. */
.page-newsletter p {
  margin: 0;
  text-align: inherit;
  line-height: inherit;   /* the theme gives every <p> a 34px line-height */
}

.news-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  text-align: center;
}

/* =========================================
   HEADINGS
   Font sizes scale with the viewport and cap at the Figma values.
   display:block + width:100% because the theme shrink-wraps <h1>.
========================================= */
.page-newsletter .news-wordmark,
.page-newsletter .news-hero,
.page-newsletter .news-subtitle {
  display: block;
  width: 100%;
  padding: 0;
  font-family: 'Noto Serif Display';
  letter-spacing: 0;
  text-align: center;
  color: #000;
}

.page-newsletter .news-wordmark {
  margin: 0 0 27px;
  font-weight: 700;
  font-size: clamp(36px, 3.76vw, 64px);
  line-height: 1.36;
}

/* The site has a global `h1/h2 { font-size … !important }` rule; these
   page-scoped !important values win only here (more specific selector). */
.page-newsletter .news-hero {
  margin: 0 0 78px;
  font-weight: 700;
  font-size: clamp(26px, 8vw, 128px) !important;      /* one line, as in the design */
  line-height: 0.804 !important;                       /* Figma: 80.4% */
  text-transform: uppercase;
  color: #fff;
}

.page-newsletter .news-subtitle {
  max-width: min(1060px, 62.35vw);          /* wraps onto two lines, as in the design */
  margin: 0 auto 59px;
  font-weight: 800;
  font-size: clamp(26px, 3.76vw, 64px) !important;
  line-height: 1.36 !important;
  text-transform: uppercase;
}

/* =========================================
   FORM  (735px wide; labels sit 8px in from the line start)
========================================= */
.news-form {
  width: 100%;
  max-width: 735px;
  margin: 0 auto;
  text-align: left;
  font-family: 'Noto Serif Display';
  font-size: 16px;
  line-height: 22px;
  color: #000;
}

/* --- Text fields: label (22px) → 6px → 2px line; 32px to the next label --- */
.news-field {
  margin: 0 0 32px;
}

.news-form input[type="text"],
.news-form input[type="email"],
.news-form input[type="tel"],
.news-form input[type="number"],
.news-form select,
.news-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0 8px 6px;
  border: 0;
  border-bottom: 2px solid #003534;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0;
  color: #000;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.news-form textarea { height: auto; min-height: 60px; resize: vertical; }
.news-form input:focus,
.news-form textarea:focus { border-bottom-color: #000; }

.news-form ::placeholder { color: #000; opacity: 1; }

/* Keep browser autofill from painting the fields */
.news-form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #B5C9B8 inset;
  -webkit-text-fill-color: #000;
}

/* --- "How did you find us?" --- */
.news-form__label {
  display: block;
  margin: 0 0 26px;
  padding: 0 8px;
  font-size: 16px;
  line-height: 22px;
  color: #000;
}

/* Option row → 25px → thin divider → 26px → consents */
.news-checks {
  margin: 0 0 26px;
  padding: 0 0 25px 8px;
  border-bottom: 1px solid rgba(0, 53, 52, 0.4);
}
.news-checks .wpcf7-form-control-wrap {
  display: block;
  width: 100%;   /* the theme sets 80% */
}
.news-checks .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 34px;
  width: 100%;
}

/* CF7 list items (options + consents) */
.news-form .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  vertical-align: top;
}
.news-form .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}
/* The theme makes every <label> bold; the design uses regular weight. */
.news-form label,
.news-form .news-form__label,
.news-form .wpcf7-list-item label {
  font-weight: 400;
}
.page-newsletter .news-form .wpcf7-list-item-label {
  font-size: 16px;
  line-height: 22px;
  color: #000;
  white-space: normal;   /* the theme sets nowrap; long consent text must wrap */
}

/* "Other:" — checkbox + label + a line to type on (CF7 free_text option) */
.news-checks .wpcf7-list-item.has-free-text {
  flex: 1 1 240px;
}
.news-form .news-checks input.wpcf7-free-text {
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: 120px;
  height: 22px;
  margin: 0 0 0 9px;
  padding: 0 4px;
  border: 0;
  border-bottom: 2px solid #003534;
  background: transparent;
}
.news-form .news-checks input.wpcf7-free-text:disabled {
  opacity: 1;
  background: transparent;
}

/* Square checkboxes: 20px, 2px black border, 4px radius, 7px to the text.
   Checked = black square with a 2px gap (as in the design). */
.news-form input[type="checkbox"],
.news-form input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0 7px 0 0;
  padding: 0;
  border: 2px solid #000;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}
.news-form input[type="radio"] { border-radius: 50%; }
.news-form input[type="checkbox"]:checked,
.news-form input[type="radio"]:checked {
  background: #000;
  box-shadow: inset 0 0 0 2px #B5C9B8;
}
.news-form input[type="checkbox"]:focus-visible,
.news-form input[type="radio"]:focus-visible {
  outline: 2px solid #003534;
  outline-offset: 2px;
}

/* --- Consents: left-aligned, rows 41px apart (22px row + 19px) --- */
.news-terms {
  margin: 0 0 19px;
  padding: 0 8px;
  text-align: left;
}
.news-terms .wpcf7-list-item,
.news-terms .wpcf7-list-item label {
  align-items: flex-start;            /* checkbox stays on line 1 if the text wraps */
}
.news-terms input[type="checkbox"] { margin-top: 1px; }

/* =========================================
   SUBMIT  (26px below the last consent; 229×55, centered)
========================================= */
.news-submit-wrap {
  margin: 26px 0 26px;
  text-align: center;
}
.news-submit-wrap p {
  position: relative;
  text-align: center;
}
.news-form .wpcf7-submit {
  display: inline-block;
  min-width: 229px;
  height: 55px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: #FDCE3F;
  font-family: inherit;
  font-weight: 700;
  font-size: 24px;
  line-height: 55px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.news-form .wpcf7-submit:hover { opacity: 0.85; }

/* Keep CF7's spinner from pushing the button off-center */
.news-form .wpcf7-spinner {
  position: absolute;
  top: 50%;
  margin: -12px 0 0 12px;
}

/* Friendly Captcha widget — centered under the button */
.news-form .frc-captcha {
  margin: 0 auto;
}

/* --- CF7 messages --- */
.news-form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.news-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  padding: 0 8px;
  font-size: 13px;
  line-height: 18px;
  width: 100%;
  position: relative;
}
.news-terms .wpcf7-not-valid-tip { padding-left: 27px; }

.news-form__placeholder {
  text-align: center;
  opacity: 0.7;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 768px) {
  .page-newsletter { padding: 40px 16px 80px; }
  .page-newsletter .news-wordmark { margin-bottom: 20px; }
  .page-newsletter .news-hero { margin-bottom: 32px; }
  .page-newsletter .news-subtitle { max-width: none; margin-bottom: 40px; }
  .news-field { margin-bottom: 26px; }
  .news-checks .wpcf7-checkbox { gap: 12px 24px; }
}

@media (max-width: 767px) {
  .news-form .wpcf7-submit { font-size: 22px !important; }
  /* safety: if the hero ever wraps, keep the lines from colliding */
  .page-newsletter .news-hero { line-height: 0.95 !important; }
}