/* =========================================================
   1) FLOATING CARD (CURRENTLY)
   Applies to the card under the hero image
   Class used on the block: teal-soft-bg
   ========================================================= */

/* Base card style */
.teal-soft-bg {
  background-color: rgba(0, 128, 128, 0.12);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Hover motion */
.teal-soft-bg:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}



/* =========================================================
   2) HERO BUTTON 1 (WORK WITH ME)
   Button block class: ef-btn-primary
   ========================================================= */

.wp-block-button.ef-btn-primary .wp-block-button__link {
  background: #2E6F6A;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 14px 26px;
  font-weight: 600;
  transition: all 0.35s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

.wp-block-button.ef-btn-primary .wp-block-button__link:hover {
  background: #255e59;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}



/* =========================================================
   3) HERO BUTTON 2 (READ THE BLOG)
   Button block class: ef-btn-secondary
   ========================================================= */

.wp-block-button.ef-btn-secondary .wp-block-button__link {
  background: #ffffff;
  color: #2E6F6A;
  border: 2px solid #2E6F6A;
  border-radius: 12px;
  padding: 14px 26px;
  font-weight: 600;
  transition: all 0.35s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.wp-block-button.ef-btn-secondary .wp-block-button__link:hover {
  background: #2E6F6A;
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.15);
}



/* =========================================================
   4) OVERRIDES (ONLY IF THEME BLOCKS YOUR STYLE)
   If Read the Blog uses is-style-outline-teal, keep this ON.
   ========================================================= */

.wp-block-button.is-style-outline-teal.ef-btn-secondary .wp-block-button__link {
  background: #ffffff !important;
  color: #2E6F6A !important;
  border: 2px solid #2E6F6A !important;
}

.wp-block-button.is-style-outline-teal.ef-btn-secondary .wp-block-button__link:hover {
  background: #2E6F6A !important;
  color: #ffffff !important;
}



/* =========================================================
   5) HEADER BUTTONS (FUTURE)
   We will add each header button here later in the same style.
   ========================================================= */

/* Example placeholder:
.wp-block-button.ef-header-btn-1 .wp-block-button__link { ... }
*/



/* =========================================================
   6) MOBILE TWEAKS (FUTURE)
   ========================================================= */

@media (max-width: 768px) {
  /* Add mobile adjustments later */
}
/* Read the Blog hover — teal background + white text (FULL FIX) */
.wp-block-button.is-style-outline-teal.ef-btn-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-outline-teal.ef-btn-secondary .wp-block-button__link:hover span {
    background-color: #2E6F6A !important;
    color: #ffffff !important;
    border-color: #2E6F6A !important;
}
/* =========================================================
   FINAL HARD OVERRIDE — FIX BLOG BUTTON TEXT ON HOVER
   Forces text to stay white when background becomes teal
   ========================================================= */

.wp-block-button.ef-btn-secondary .wp-block-button__link:hover,
.wp-block-button.ef-btn-secondary .wp-block-button__link:hover *,
.wp-block-button.ef-btn-secondary .wp-block-button__link:focus,
.wp-block-button.ef-btn-secondary .wp-block-button__link:focus * {
    background-color: #2E6F6A !important;
    color: #ffffff !important;
    border-color: #2E6F6A !important;
}
/* ── Logo hover effect ─────────────────────────── */
.ef-logo {
    text-decoration: none;
    color: #1a2332;
}

.ef-logo span {
    color: #2d6a6a;
    position: relative;
    display: inline-block;
}

.ef-logo span::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 1.5px;
    background-color: #2d6a6a;
    transition: width 0.4s ease;
}

.ef-logo:hover span::after {
    width: 100%;
}
/* ── 4. NAVIGATION: Prevent "Work With Me" wrapping ──── */
.wp-block-navigation-item__content {
    white-space: nowrap !important;
}
/* ── 5. NAVIGATION: Push nav to right side ───────────── */
.site-header .wp-block-navigation {
    margin-left: auto !important;
}
/* ── 6. NAVIGATION: Header Tab Hover Effects
        Applies to: About, Work With Me, Speaking, Ideas, Contact
        Effect 1: Text colour shifts to Accent Teal on hover
        Effect 2: Teal underline draws left to right on hover
        Matches: Logo "Futurist" underline draw effect (Section 2)
        Last updated: Feb 2026
   ───────────────────────────────────────────────────────────── */
.wp-block-navigation-item__content {
    position: relative !important;
    color: #3d4a5c !important;
    transition: color 0.3s ease !important;
}

.wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0%;
    height: 1.5px;
    background-color: #2d6a6a;
    transition: width 0.4s ease;
}

.wp-block-navigation-item:hover .wp-block-navigation-item__content {
    color: #2d6a6a !important;
}

.wp-block-navigation-item:hover .wp-block-navigation-item__content::after {
    width: 100% !important;
}
/* =========================================================
   8) BUTTON — VIEW ALL (Posts / Ideas Section)
   Controls:
   - Default outline appearance
   - Hover fill (Teal background + White text)
   - Subtle lift on hover
   Brand colours:
   Teal: #2d6a6a
   ========================================================= */

/* -----------------------------------------
   8.1 Base Style (Outline)
   ----------------------------------------- */

.wp-block-button.is-style-outline .wp-block-button__link{
  border: 2px solid #2d6a6a !important;
  color: #2d6a6a !important;
  background: transparent !important;
  transition: all 0.25s ease;
}

/* -----------------------------------------
   8.2 Hover Style (Filled Teal)
   ----------------------------------------- */

.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background: #2d6a6a !important;
  color: #ffffff !important;
  border-color: #2d6a6a !important;
  transform: translateY(-1px);
}

/* -----------------------------------------
   8.3 Pressed State
   ----------------------------------------- */

.wp-block-button.is-style-outline .wp-block-button__link:active{
  transform: scale(0.98);
}
/* =========================================================
   CTA BUTTON REFINEMENT (Using Theme Styles)
   ========================================================= */

/* GET IN TOUCH — refined hover */

.wp-block-button.is-style-white-solid .wp-block-button__link{
  transition: all 0.25s ease;
  box-shadow: none;
}

.wp-block-button.is-style-white-solid .wp-block-button__link:hover{
  background: #2d6a6a !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;   /* white outline */
  box-shadow: 0 4px 14px rgba(0,0,0,0.12); /* subtle lift */
  transform: translateY(-1px);
}

.wp-block-button.is-style-white-solid .wp-block-button__link:active{
  transform: scale(0.98);
}
/* =========================================================
   VIEW SERVICES — Premium Motion Upgrade
   ========================================================= */

/* Base (resting state) */
.wp-block-button.is-style-outline-white .wp-block-button__link{
  transition: all 0.35s cubic-bezier(.4,.0,.2,1); /* smoother motion */
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  background: transparent !important;
}

/* Hover (elevated state) */
.wp-block-button.is-style-outline-white .wp-block-button__link:hover{
  background: #ffffff !important;          
  color: #2d6a6a !important;               
  border: 2px solid #2d6a6a !important;    

  box-shadow:
    0 6px 18px rgba(0,0,0,0.08),
    0 2px 6px rgba(0,0,0,0.05);

  transform: translateY(-1px) scale(1.02);
}

/* Press (click state) */
.wp-block-button.is-style-outline-white .wp-block-button__link:active{
  transform: scale(0.98);
}
/* TEF Newsletter: won’t override Subscribe button styling */
.tef-newsletter-input {
  height: 48px;
  border-radius: 4px;
  border: none;
  padding: 0 16px;
  background: #f3f3f3;
  width: 100%;
}
/* =========================================================
   NEWSLETTER SECTION – STABLE FINAL VERSION
   Form ID: wpforms-182
   Section: Stay in the conversation

   PURPOSE
   ✓ Perfect inline layout
   ✓ Balanced email width
   ✓ Button aligned naturally
   ✓ No uneven spacing
   ✓ Easy future adjustment
========================================================= */


/* ---------- CENTER WHOLE FORM ---------- */
#wpforms-182{
  display:flex;
  justify-content:center;
}


/* ---------- INLINE ROW ---------- */
#wpforms-182 form.wpforms-form{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:20px !important;
}


/* ---------- REMOVE DEFAULT WPFORMS SPACING ---------- */
#wpforms-182 .wpforms-field,
#wpforms-182 .wpforms-submit-container{
  margin:0 !important;
  padding:0 !important;
}


/* ---------- EMAIL FIELD WIDTH ---------- */
/* ⭐ ONLY CHANGE THIS VALUE */
#wpforms-182 .wpforms-field-email{
  width:350px !important;   /* ← adjust here */
}


/* Input fills field */
#wpforms-182 input[type="email"]{
  width:100% !important;
  height:52px !important;
  margin:0 !important;
}


/* ---------- BUTTON ALIGNMENT ---------- */
#wpforms-182 .wpforms-submit-container{
  display:flex !important;
  align-items:center !important;
}

#wpforms-182 button[type="submit"]{
  height:52px !important;
  padding:0 34px !important;
  white-space:nowrap;
}


/* ---------- DIVIDER LINE ---------- */
.ef-cta-divider {
    width: 40% !important;
    margin: 1.5rem auto !important;
    display: block !important;
}
/* ---------- CENTER FORM GROUP + CLOSE GAP ---------- */

/* Treat email + button as one centred block */
#wpforms-182 form.wpforms-form{
  justify-content: center !important;
  gap:  8px !important;   /* reduces space between input & button */
}

/* Prevent button container from drifting right */
#wpforms-182 .wpforms-submit-container{
  margin-left: 0 !important;
}
#wpforms-182 .wpforms-field-text {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Remove hidden field containers from layout completely */
#wpforms-182 #wpforms-182-field_2-container,
#wpforms-182 #wpforms-182-field_3-container {
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- MOBILE: STACK EMAIL + BUTTON ---------- */
@media (max-width: 600px) {
  #wpforms-182 {
    width: 100% !important;
  }
  #wpforms-182 form.wpforms-form {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  #wpforms-182 .wpforms-field-email,
  #wpforms-182 .wpforms-submit-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  #wpforms-182 input[type="email"],
  #wpforms-182 button[type="submit"] {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 56px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    display: block !important;
  }
}


/* =========================================================
   FOOTER TITLE HOVER – The Education Futurist
   Purpose:
   Adds white underline and subtle clickable lift effect
   Only affects element with class: tef-footer-brand
========================================================= */

.tef-footer-brand{
  position: relative;
  cursor: pointer;
}

/* underline animation */
.tef-footer-brand::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: white;
  transition: width 0.25s ease;
}

/* hover effect */
.tef-footer-brand:hover::after{
  width: 100%;
}

.tef-footer-brand:hover{
  transform: translateY(-1px);
}
/* =========================================================
   FOOTER TITLE – THE EDUCATION FUTURIST
   Hover Effects:
   1. Animated underline reveal
   2. Slight lift for clickable feel
   3. Soft glow highlight
   Applies ONLY to .tef-footer-title
   ========================================================= */

.tef-footer-title a,
.tef-footer-title p,
.tef-footer-title h1,
.tef-footer-title h2,
.tef-footer-title h3 {
  position: relative;
  width: fit-content;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom;
  background-size: 0% 1px;
  transition: background-size 0.4s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

.tef-footer-title a:hover,
.tef-footer-title p:hover,
.tef-footer-title h1:hover,
.tef-footer-title h2:hover,
.tef-footer-title h3:hover {
  background-size: 100% 1px;
  transform: translateY(-2px);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}
/* =========================================================
   3) HEADER — SITE LOGO (TEXT-BASED BRANDING)
   Class: ef-logo
   Purpose:
   - Styles the main site title/logo in the header
   - Keeps logo on one line
   - Uses brand colours
   - Adds underline hover effect only to "Futurist"
   ========================================================= */

.ef-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #1a2332;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ef-logo span {
  color: #2d6a6a;
  position: relative;
  display: inline-block;
}

.ef-logo span::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 1.5px;
  background-color: #2d6a6a;
  transition: width 0.4s ease;
}

.ef-logo:hover {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.ef-logo:hover span::after {
  width: 100%;
}
/* =========================================================
   ANIMATION — MAIN PAGE — NAME LABEL
   ─────────────────────────────────────────────────────────
   Class: .tef-hero-name
   Where it goes: The "RACHAEL SMITH" line above the heading
   Purpose:
   - Fades in from slightly below its final position
   - Fires first in the sequence (0ms delay)
   - Gives the page a premium, intentional entrance feel
   ========================================================= */

.tef-hero-name {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0ms;
}

.tef-hero-name.tef-visible {
  opacity: 1;
  transform: translateY(0);
}
/* =========================================================
   ANIMATION | Hero | Quote Typing Effect
   Class: .tef-anim-hero-quote
   ========================================================= */

.tef-anim-hero-quote {
  min-height: 1.6em;
}

.tef-anim-hero-quote .teal-word {
  color: #2A9D8F;
  font-style: italic;
  font-weight: inherit; /* matches whatever weight the block already has */
  font-size: inherit;   /* matches whatever size the block already has */
}

.tef-anim-quote-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #1C1C2E;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: tef-blink 0.7s steps(1) infinite;
}

@keyframes tef-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
/* =========================================================
   ANIMATION | Rethink Section | Booking Widget Size Fix
   Where it goes: Appearance → Customise → Additional CSS
   Purpose:
   - Makes the booking widget the same height as the left card
   - Clips the extra white space at the bottom of the widget
   - Centres the widget vertically in its column
   - Does NOT affect any other section on the page
   ========================================================= */

.ef-rethink .wp-block-column:last-child {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ef-rethink .wp-block-html {
  width: 100%;
  overflow: hidden;
  max-height: 260px;
}

.ef-rethink iframe {
  display: block;
  width: 100%;
  height: 260px !important;
  margin-bottom: -80px;
}