/* =================================================================
   Ottesen Family Dentistry — Home (Comfort Redesign)
   Scoped styles for page-home.php. Prefix: .ofd-
   Palette (from brand): #567B86 primary, #B6DAC6 sage,
   #C6E2F1 blue, #E6FEFD mint, #000 ink.
   Fonts: Open Sans (body) + Fraunces (display).
   Load once — enqueue in functions.php or import in the theme CSS.
   ================================================================= */

/* ---- Fonts (Fraunces is the new pairing; Open Sans kept from site) ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Open+Sans:wght@400;600;700&display=swap');

:root{
  --ofd-primary:#567B86;
  --ofd-primary-dark:#3f5b64;
  --ofd-sage:#B6DAC6;
  --ofd-blue:#C6E2F1;
  --ofd-mint:#E6FEFD;
  --ofd-ink:#101617;
  --ofd-muted:#5b6a6e;
  --ofd-white:#ffffff;
  --ofd-radius:14px;
  --ofd-radius-sm:8px;
  --ofd-shadow:0 10px 30px rgba(86,123,134,.14);
  --ofd-ease:220ms ease;
  --ofd-display:"Fraunces", Georgia, "Times New Roman", serif;
  --ofd-body:"Open Sans", Arial, Helvetica, sans-serif;
}

/* ---- Base type (scoped so we don't fight the legacy theme globally) ---- */
.ofd-hero, .ofd-section, .ofd-final-cta, .home-team-bar, .home-supermouth-section{
  font-family:var(--ofd-body);
  color:var(--ofd-ink);
  -webkit-font-smoothing:antialiased;
}
.ofd-section__title,
.ofd-hero__headline,
.ofd-final-cta__title,
.ofd-card__title,
.ofd-service__title,
.ofd-step__title,
.home-team-bar h2{
  font-family:var(--ofd-display);
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.12;
  color:var(--ofd-ink);
}

/* ---- Buttons ---- */
.ofd-btn{
  display:inline-block;
  font-family:var(--ofd-body);
  font-weight:600;
  font-size:16px;
  line-height:1;
  padding:15px 28px;
  border-radius:999px;
  border:2px solid transparent;
  text-decoration:none;
  transition:background var(--ofd-ease), color var(--ofd-ease), border-color var(--ofd-ease), transform var(--ofd-ease);
  cursor:pointer;
}
.ofd-btn+.ofd-btn{ margin-left:12px; }
.ofd-btn--primary{ background:var(--ofd-primary); color:#fff; border-color:var(--ofd-primary); }
.ofd-btn--primary:hover,.ofd-btn--primary:focus{ background:var(--ofd-primary-dark); border-color:var(--ofd-primary-dark); color:#fff; transform:translateY(-1px); }
.ofd-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.75); }
.ofd-btn--ghost:hover,.ofd-btn--ghost:focus{ background:#fff; color:var(--ofd-primary); border-color:#fff; }
.ofd-btn--lg{ font-size:18px; padding:18px 36px; }

/* On light sections the ghost button needs dark text */
.ofd-section .ofd-btn--ghost{ color:var(--ofd-primary); border-color:var(--ofd-primary); }
.ofd-section .ofd-btn--ghost:hover{ background:var(--ofd-primary); color:#fff; }

.ofd-link{ color:var(--ofd-primary); font-weight:600; text-decoration:none; }
.ofd-link:hover{ color:var(--ofd-primary-dark); text-decoration:underline; }

/* ---- HERO ---- */
.ofd-hero{
  position:relative;
  background-size:cover;
  background-position:top-center;
  background-color:var(--ofd-primary); /* fallback if no image set */
  padding:120px 0 100px;
  overflow:hidden;
}
.ofd-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(16,22,23,.62) 0%, rgba(86,123,134,.45) 85%, rgba(86,123,134,.15) 100%);
}
.ofd-hero .container{ position:relative; z-index:2; }
.ofd-hero__inner{ color:#fff; }
.ofd-hero__eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-size:13px; font-weight:700;
  margin:0 0 18px; color:var(--ofd-mint);
}
.ofd-hero__headline{
  color:#fff; font-size:56px; margin:0 0 20px; font-weight:600;
}
.ofd-hero__subheadline{
  font-size:20px; line-height:1.5; max-width:560px; margin:0 0 32px; color:rgba(255,255,255,.92);
}
.ofd-hero__ctas{ margin-bottom:28px; }
.ofd-hero__reviews{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; color:#fff;
}
.ofd-hero__reviews img{ height:26px; width:auto; display:block; }
.ofd-hero__reviews span{ font-weight:600; font-size:15px; color:#fff; }

/* ---- Sections ---- */
.ofd-section{ padding:84px 0; }
.ofd-section--mint{ background:var(--ofd-mint); }
.ofd-section--sage{ background:var(--ofd-sage); }
.ofd-section--blue{ background:var(--ofd-blue); }
.ofd-section__title{ font-size:38px; margin:0 0 20px; }
.ofd-section__title--left{ text-align:left; }
.ofd-section__lead{ font-size:19px; line-height:1.6; color:var(--ofd-muted); max-width:760px; margin:0 auto 8px; }
.ofd-prose{ font-size:17px; line-height:1.7; color:var(--ofd-ink); }
.ofd-prose p{ margin:0 0 16px; }
.ofd-rounded{ border-radius:var(--ofd-radius); }

/* ---- Cards (intro) ---- */
.ofd-cards{ margin-top:40px; }
.ofd-card{
  background:#fff; border-radius:var(--ofd-radius); padding:34px 30px;
  height:100%; box-shadow:var(--ofd-shadow); margin-bottom:24px;
}
.ofd-card__icon img{ height:48px; width:auto; margin-bottom:16px; }
.ofd-card__title{ font-size:22px; margin:0 0 12px; }
.ofd-card__text{ color:var(--ofd-muted); font-size:16px; line-height:1.6; }

/* ---- Services ---- */
.ofd-service{
  background:#fff; border-radius:var(--ofd-radius); overflow:hidden;
  box-shadow:var(--ofd-shadow); margin-bottom:26px; height:100%;
}
.ofd-service__media{ display:block; overflow:hidden; }
.ofd-service__media img{ width:100%; height:210px; object-fit:cover; transition:transform 400ms ease; }
.ofd-service:hover .ofd-service__media img{ transform:scale(1.05); }
.ofd-service__body{ padding:26px 24px 30px; }
.ofd-service__title{ font-size:21px; margin:0 0 10px; }
.ofd-service__text{ color:var(--ofd-muted); font-size:15.5px; line-height:1.6; margin-bottom:16px; }

/* ---- Process steps ---- */
.ofd-steps{ margin-top:44px; counter-reset:none; }
.ofd-step{
  background:#fff; border-radius:var(--ofd-radius); padding:30px 24px;
  height:100%; box-shadow:var(--ofd-shadow); margin-bottom:24px;
  border-top:4px solid var(--ofd-primary);
}
.ofd-step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--ofd-primary); color:#fff;
  font-family:var(--ofd-display); font-size:20px; font-weight:600; margin-bottom:16px;
}
.ofd-step__title{ font-size:19px; margin:0 0 10px; }
.ofd-step__text{ color:var(--ofd-muted); font-size:15px; line-height:1.6; }

/* ---- Team (carried over, restyled) ---- */
.home-team-bar{ padding:84px 0; background:#fff; }
.home-team-bar h2{ font-size:38px; text-align:center; margin:0 0 36px; }
.home-team-bar .ofd-prose{ margin-top:28px; font-size:18px; }
.home-team-bar .ofd-btn{ margin-top:22px; }

/* ---- Testimonials ---- */
.home-testimonial-row{ background:var(--ofd-mint); }
.home-testimonial-row .ofd-section__title{ font-size:38px; margin-bottom:36px; }

/* ---- SuperMouth ---- */
.ofd-supermouth__logo{ max-width:260px; height:auto; margin:0 auto 24px; display:block; }
.home-supermouth-section .supermouth-content{ font-size:17px; line-height:1.7; }

/* ---- Blog feed ---- */
.ofd-blog{ border:none; border-radius:var(--ofd-radius); box-shadow:var(--ofd-shadow); overflow:hidden; }
.ofd-blog .panel-heading{ background:var(--ofd-primary); border:none; }
.ofd-blog .panel-title a{ color:#fff; }
.ofd-blog .panel-body{ background:#fff; }

/* ---- Final CTA ---- */
.ofd-final-cta{
  position:relative; padding:100px 0; background:var(--ofd-primary);
  background-size:cover; background-position:center; text-align:center; overflow:hidden;
}
.ofd-final-cta__overlay{ position:absolute; inset:0; background:rgba(63,91,100,.72); }
.ofd-final-cta .container{ position:relative; z-index:2; }
.ofd-final-cta__title{ color:#fff; font-size:42px; margin:0 0 18px; }
.ofd-final-cta__text{ color:rgba(255,255,255,.92); font-size:19px; line-height:1.6; max-width:640px; margin:0 auto 30px; }

/* =========================== RESPONSIVE =========================== */
@media (max-width:991px){
  .ofd-hero__headline{ font-size:44px; }
  .ofd-section__title{ font-size:32px; }
  .ofd-final-cta__title{ font-size:34px; }
}
@media (max-width:767px){
  .ofd-hero{ padding:84px 0 64px; }
  .ofd-hero__headline{ font-size:34px; }
  .ofd-hero__subheadline{ font-size:17px; }
  .ofd-section{ padding:56px 0; }
  .ofd-btn{ display:block; text-align:center; }
  .ofd-btn+.ofd-btn{ margin-left:0; margin-top:12px; }
  .ofd-hero__ctas{ max-width:320px; }
  .ofd-section__title--left{ text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .ofd-service:hover .ofd-service__media img{ transform:none; }
}