/* ============================================================
   FN Frontend Fixes — small site-wide CSS corrections
   1. Hide leaking screen-reader-text on blog "Read More" links
   2. Brand-style the footer ebook opt-in (Fluent Form #6)
   ============================================================ */

/* ---- 1. Blog "Read More about <title>" leak ----------------
   The active theme only hides ".skip-link.screen-reader-text",
   not the generic ".screen-reader-text" that GutenKit's read-more
   link uses, so the "about <post title>" text rendered visibly
   and collided with the "Read More ->" link. Restore the
   standard WP accessibility hide for bare screen-reader-text. */
.screen-reader-text:not(.skip-link){
  border:0 !important;
  clip:rect(1px,1px,1px,1px) !important;
  clip-path:inset(50%) !important;
  height:1px !important;
  width:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  position:absolute !important;
  white-space:nowrap !important;
  word-wrap:normal !important;
}
.screen-reader-text:not(.skip-link):focus{
  background-color:#eee;
  clip:auto !important;
  clip-path:none !important;
  height:auto;
  width:auto;
  margin:0;
  padding:15px 23px 14px;
  position:static !important;
  color:#444;
  display:block;
  font-size:1em;
  line-height:normal;
  text-decoration:none;
  z-index:100000;
}

/* ---- 2. Footer ebook opt-in (Fluent Form #6) ---------------
   Inline "newsletter" layout: transparent underline email field
   with an envelope icon, beside a white pill button (orange text).
   Scoped to form #6 only so other site forms keep their styling. */

/* Make the form fill its column (the Gutenverse column wrapper is
   display:flex, so the form otherwise shrinks to its content). */
.fluentform_wrapper_6{ width:100% !important; max-width:100% !important; }
.fluent_form_6{ width:100% !important; max-width:100% !important; }

/* Lay the fields out on one row. */
.fluent_form_6 fieldset{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 22px;
  width:100%;
  max-width:100%;
}
/* keep the accessibility legend out of the flex flow */
.fluent_form_6 fieldset > legend{ position:absolute !important; }

/* email field group grows; button group hugs its content */
.fluent_form_6 .ff-el-group:not(.ff_submit_btn_wrapper):not(.ff-hpsf-container){
  flex:1 1 150px;
  min-width:150px;
  margin:0 !important;
}
.fluent_form_6 .ff-el-input--content{ width:100%; }
.fluent_form_6 .ff_submit_btn_wrapper{
  flex:0 0 auto;
  width:auto;
  margin:0 !important;
  text-align:left;
}

/* transparent underline email input + envelope icon */
form.fluent_form_6 input[type=email],
form.fluent_form_6 .ff-el-form-control[type=email]{
  width:100%;
  max-width:none;
  background-color:transparent !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='m3%207%209%206%209-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:left center !important;
  background-size:21px 21px !important;
  border:none !important;
  border-bottom:2px solid rgba(255,255,255,.55) !important;
  border-radius:0 !important;
  padding:12px 6px 12px 34px !important;
  font-size:16px;
  line-height:1.4;
  color:#ffffff !important;
  box-shadow:none !important;
}
form.fluent_form_6 input[type=email]::placeholder{ color:rgba(255,255,255,.85); opacity:1; }
form.fluent_form_6 input[type=email]:focus{
  outline:none;
  border-bottom-color:#ffffff !important;
  box-shadow:none !important;
}

/* white pill button with black label, matching the site heading font.
   High specificity (0,5,1) to beat Fluent Forms' inline
   "form.fluent_form_6 .ff-btn-submit:not(.ff_btn_no_style)" !important. */
form.fluent_form_6 .ff-btn.ff-btn-submit.ff_btn_style:not(.ff_btn_no_style){
  display:inline-block;
  width:auto;
  max-width:none;
  background:#ffffff !important;
  color:#1a1a1a !important;
  border:none;
  border-radius:999px;
  padding:15px 32px;
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  font-size:15px;
  font-weight:600 !important;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  transition:transform .15s ease, color .15s ease, box-shadow .15s ease;
}
form.fluent_form_6 .ff-btn.ff-btn-submit.ff_btn_style:not(.ff_btn_no_style):hover,
form.fluent_form_6 .ff-btn.ff-btn-submit.ff_btn_style:not(.ff_btn_no_style):focus{
  background:#ffffff !important;
  color:#e4461c !important;
  transform:translateY(-1px);
  box-shadow:0 9px 24px rgba(0,0,0,.22);
}

@media(max-width:600px){
  .fluent_form_6 .ff-el-group:not(.ff_submit_btn_wrapper):not(.ff-hpsf-container){ flex:1 1 100%; }
  .fluent_form_6 .ff_submit_btn_wrapper{ flex:1 1 100%; }
  form.fluent_form_6 .ff-btn.ff-btn-submit.ff_btn_style:not(.ff_btn_no_style){ display:block; width:100%; }
}

/* ---- 3. Footer "Get lean in 6 weeks" CTA bar --------------
   The orange "Claim Free" (Gutenverse) and grey "Whatsapp"
   (core wp-block-button) buttons were flush together, and the
   grey #aaaaaa had poor contrast. Add spacing + give WhatsApp
   a recognisable green. Scoped to the footer. */
footer .wp-block-buttons{ margin-left:16px; }
footer .wp-block-button__link.has-background:not([class*="-background-color"]){
  background-color:#444444 !important;
  color:#ffffff !important;
}
footer .wp-block-button__link.has-background:not([class*="-background-color"]):hover,
footer .wp-block-button__link.has-background:not([class*="-background-color"]):focus{
  background-color:#2e2e2e !important;
  color:#ffffff !important;
}