/*
Theme Name: Linden Dental
Theme URI: https://example.com/linden-dental
Description: A warm, modern child theme for Divi 5, built for dental and small healthcare practices. Ships with a calm teal and coral identity, soft arched image framing, and a friendly type pairing. Designed to be rebranded per client by changing a handful of color and font tokens.
Author: Your Studio
Author URI: https://example.com
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: linden-dental
Tags: dental, healthcare, business, divi-child
*/

/* =========================================================
   1. Brand tokens
   Change these to rebrand for a new client. Everything in the
   theme reads from these variables.
   ========================================================= */
:root {
  /* Color */
  --ld-paper:       #FAFBF8;
  --ld-ink:         #16241F;
  --ld-muted:       #5C6B63;
  --ld-teal:        #115E54;
  --ld-teal-deep:   #0C3F39;
  --ld-sage:        #E5EFE9;
  --ld-sage-line:   #CBE0D5;
  --ld-coral:       #EC8B6B;
  --ld-coral-deep:  #D96E4C;

  /* Type */
  --ld-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ld-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shape (the signature: soft arches and rounded frames) */
  --ld-radius:      20px;
  --ld-radius-lg:   28px;
  --ld-arch:        180px 180px 28px 28px;
}

/* =========================================================
   2. Base typography
   ========================================================= */
body,
.et_pb_text,
.et_pb_module {
  font-family: var(--ld-body);
  color: var(--ld-ink);
}

body { background-color: var(--ld-paper); }

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
  font-family: var(--ld-display);
  color: var(--ld-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

p { line-height: 1.65; }

a { color: var(--ld-teal); }
a:hover { color: var(--ld-teal-deep); }

/* Utility heading sizes for hero and section titles.
   Add these as the module CSS Class in the Divi builder. */
.ld-h1 h1, .ld-h1 h2 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); }
.ld-h2 h2, .ld-h2 h3 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); }
.ld-lead p { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ld-muted); }

/* Eyebrow label. Add .ld-eyebrow as the text module CSS Class. */
.ld-eyebrow,
.ld-eyebrow p {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ld-teal);
  margin-bottom: 0.4em;
}

/* =========================================================
   3. Buttons
   Divi default buttons are outline style with a hover arrow.
   We make a calm, solid, pill-shaped system instead.
   ========================================================= */
.et_pb_button,
.et_pb_button.et_pb_button {
  font-family: var(--ld-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 0.85em 1.85em !important;
  color: var(--ld-paper) !important;
  background-color: var(--ld-teal) !important;
  border: 2px solid var(--ld-teal) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.et_pb_button:hover {
  background-color: var(--ld-teal-deep) !important;
  border-color: var(--ld-teal-deep) !important;
  color: var(--ld-paper) !important;
  padding: 0.85em 1.85em !important;
  transform: translateY(-1px);
}
/* Remove Divi's hover arrow so the pill stays clean */
.et_pb_button:after,
.et_pb_button:before { content: none !important; }

/* Outline variant. Module CSS Class: ld-btn-outline */
.ld-btn-outline.et_pb_button {
  background-color: transparent !important;
  color: var(--ld-teal) !important;
  border-color: var(--ld-teal) !important;
}
.ld-btn-outline.et_pb_button:hover {
  background-color: var(--ld-teal) !important;
  color: var(--ld-paper) !important;
}

/* Accent variant for the one moment that should pop. Class: ld-btn-accent */
.ld-btn-accent.et_pb_button {
  background-color: var(--ld-coral) !important;
  border-color: var(--ld-coral) !important;
  color: #2a1109 !important;
}
.ld-btn-accent.et_pb_button:hover {
  background-color: var(--ld-coral-deep) !important;
  border-color: var(--ld-coral-deep) !important;
  color: #fff !important;
}

/* On a teal background, flip the default button to light */
.ld-bg-teal .et_pb_button {
  background-color: var(--ld-paper) !important;
  border-color: var(--ld-paper) !important;
  color: var(--ld-teal-deep) !important;
}
.ld-bg-teal .et_pb_button:hover {
  background-color: var(--ld-sage) !important;
  border-color: var(--ld-sage) !important;
}

/* =========================================================
   4. Section and surface helpers
   Add these as the Section or Row CSS Class in the builder.
   ========================================================= */
.ld-bg-sage  { background-color: var(--ld-sage) !important; }
.ld-bg-paper { background-color: var(--ld-paper) !important; }
.ld-bg-teal  { background-color: var(--ld-teal) !important; }

.ld-bg-teal,
.ld-bg-teal h1, .ld-bg-teal h2, .ld-bg-teal h3, .ld-bg-teal h4,
.ld-bg-teal p, .ld-bg-teal .et_pb_text,
.ld-bg-teal .ld-eyebrow {
  color: var(--ld-sage) !important;
}
.ld-bg-teal h1, .ld-bg-teal h2, .ld-bg-teal h3 { color: #fff !important; }

/* Card. Add .ld-card to a column or blurb. */
.ld-card {
  background: #ffffff;
  border: 1px solid var(--ld-sage-line);
  border-radius: var(--ld-radius);
  padding: 2rem !important;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ld-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(17, 94, 84, 0.45);
}
.ld-card .et_pb_blurb_content { max-width: none; }
.ld-card h4 { margin-bottom: 0.5rem; }

/* =========================================================
   5. The signature: arched and rounded image frames
   ========================================================= */
.ld-rounded img,
.ld-rounded .et_pb_image_wrap img { border-radius: var(--ld-radius-lg); }

.ld-arch img,
.ld-arch .et_pb_image_wrap img { border-radius: var(--ld-arch); }

.ld-arch .et_pb_image_wrap,
.ld-rounded .et_pb_image_wrap { overflow: hidden; border-radius: inherit; }

/* A quiet arc divider you can drop between sections.
   Add an empty Code or Divider module with class ld-arc-divider. */
.ld-arc-divider {
  height: 64px;
  background: var(--ld-sage);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  margin-top: -1px;
}

/* =========================================================
   6. Header and navigation
   ========================================================= */
#main-header,
.et-fixed-header#main-header {
  box-shadow: 0 1px 0 var(--ld-sage-line);
  background-color: rgba(250, 251, 248, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
}
#top-menu a,
.et_pb_menu .et-menu a {
  font-family: var(--ld-body);
  font-weight: 600;
  color: var(--ld-ink);
}
#top-menu a:hover { color: var(--ld-teal); opacity: 1; }

/* Header call to action. Give the menu item the class ld-nav-cta
   under Appearance, Menus, CSS Classes. */
#top-menu li.ld-nav-cta > a,
.et_pb_menu .et-menu li.ld-nav-cta > a {
  background-color: var(--ld-teal);
  color: var(--ld-paper) !important;
  border-radius: 999px;
  padding: 0.55em 1.2em !important;
}
#top-menu li.ld-nav-cta > a:hover { background-color: var(--ld-teal-deep); }

/* =========================================================
   7. Contact form
   ========================================================= */
.et_pb_contact_form_container input,
.et_pb_contact_form_container textarea,
.et_pb_contact_form_container select,
.et_pb_contact p input[type="text"],
.et_pb_contact p textarea {
  border-radius: 12px !important;
  border: 1px solid var(--ld-sage-line) !important;
  background-color: #fff !important;
  font-family: var(--ld-body) !important;
  color: var(--ld-ink) !important;
  padding: 0.85em 1em !important;
}
.et_pb_contact_form_container input::placeholder,
.et_pb_contact_form_container textarea::placeholder { color: #9aa8a0; }
.et_pb_contact_form_container input:focus,
.et_pb_contact_form_container textarea:focus {
  border-color: var(--ld-teal) !important;
  outline: none;
}

/* =========================================================
   8. Footer
   ========================================================= */
#main-footer {
  background-color: var(--ld-teal-deep);
}
#main-footer,
#main-footer p,
#main-footer a,
#main-footer .et_pb_widget li a {
  color: #cfe2da;
  font-family: var(--ld-body);
}
#main-footer h1, #main-footer h2, #main-footer h3, #main-footer h4,
#main-footer .et_pb_widget h4 { color: #ffffff; font-family: var(--ld-display); }
#main-footer a:hover { color: var(--ld-coral); }
#footer-bottom { background-color: rgba(0, 0, 0, 0.18); }

/* =========================================================
   9. Accessibility and quality floor
   ========================================================= */
a:focus-visible,
button:focus-visible,
.et_pb_button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--ld-coral);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Comfortable reading measure for long text blocks */
.ld-measure .et_pb_text_inner { max-width: 62ch; }

/* Small screens */
@media (max-width: 980px) {
  .ld-arch img,
  .ld-arch .et_pb_image_wrap img { border-radius: 120px 120px 24px 24px; }
}