/*
Theme Name:   Princeton Periodontics — Divi Child
Theme URI:    https://princetondentalimplants.com
Description:  Child theme for Princeton Periodontics & Implants. Holds the
              navy/gold design tokens, component classes, and accessibility
              fixes. All custom CSS lives here — never in Divi Theme Options,
              which is not version-controlled.
Author:       Rebel Lead Lab
Template:     Divi
Version:      1.0.0
Text Domain:  ppi-child
*/


/* =========================================================================
   1. DESIGN TOKENS
   Every colour, size and space in the build references these.
   Never hardcode a hex value in a Divi module.
   ====================================================================== */

:root {

  /* -- Navy ------------------------------------------------------------ */
  --ppi-navy-950: #08182C;   /* footer */
  --ppi-navy-900: #0B1F3A;   /* primary: hero, bands, headings */
  --ppi-navy-800: #162D52;   /* gradient panel only */

  /* -- Gold: SPLIT BY BACKGROUND (fix F-30) ---------------------------- */
  /* #B8943A measures 2.86:1 on white — below the 4.5:1 AA floor.        */
  /* gold-300/500 are ON NAVY ONLY. gold-700 is the light-bg equivalent. */
  --ppi-gold-300: #D4AF60;   /* on navy — 7.94:1  AAA */
  --ppi-gold-500: #B8943A;   /* on navy — 5.77:1  AA  */
  --ppi-gold-700: #7D6220;   /* on white/cream — 5.77:1  AA */
  --ppi-gold-800: #654E19;   /* button hover — 7.90:1  AAA */

  /* -- Neutrals -------------------------------------------------------- */
  --ppi-cream:  #F8F6F1;
  --ppi-border: #E2DDD4;
  --ppi-slate:  #4E576A;     /* on white — 7.25:1  AAA */
  --ppi-ink:    #1A2332;     /* on white — 15.78:1 AAA */
  --ppi-white:  #FFFFFF;

  /* -- Feedback -------------------------------------------------------- */
  --ppi-error:   #B03024;
  --ppi-success: #1E6B4E;

  /* -- Type ------------------------------------------------------------ */
  --ppi-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ppi-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* -- Radius: nothing on this site is rounder than 2px ----------------- */
  --ppi-r-sharp: 0;
  --ppi-r-sm:    2px;

  /* -- Shadow: three exist, all for floating chrome. Content gets none. - */
  --ppi-shadow-nav:      0 2px 16px rgba(11,31,58,.07);
  --ppi-shadow-dropdown: 0 8px 24px rgba(11,31,58,.12);
  --ppi-shadow-mbar:     0 -2px 14px rgba(11,31,58,.14);

  /* -- Space: 8px base -------------------------------------------------- */
  --ppi-s-1: 4px;   --ppi-s-2: 8px;   --ppi-s-3: 12px;  --ppi-s-4: 16px;
  --ppi-s-5: 24px;  --ppi-s-6: 32px;  --ppi-s-7: 40px;  --ppi-s-8: 48px;
  --ppi-s-9: 64px;  --ppi-s-10: 88px; --ppi-s-11: 96px; --ppi-s-12: 128px;

  --ppi-measure: 720px;   /* max width of any body copy */
  --ppi-container: 1240px;
}


/* =========================================================================
   2. ACCESSIBILITY BASELINE
   ====================================================================== */

/* Visible focus on everything. Divi removes outlines in places. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.et_pb_button:focus-visible {
  outline: 3px solid var(--ppi-gold-700) !important;
  outline-offset: 3px !important;
}

/* On navy, switch the ring to the light gold so it stays visible. */
.ppi-navy a:focus-visible,
.ppi-navy button:focus-visible,
.ppi-navy .et_pb_button:focus-visible,
#main-footer a:focus-visible {
  outline-color: var(--ppi-gold-300) !important;
}

.ppi-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999999;
  padding: 14px 22px;
  background: var(--ppi-navy-900);
  color: #fff;
  font-family: var(--ppi-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.ppi-skip-link:focus {
  left: 8px;
  top: 8px;
}

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


/* =========================================================================
   3. TYPOGRAPHY
   HARD RULE: Cormorant is never used below 24px. It is a light-stroke
   face with a small x-height and it turns grey and unreadable at body
   sizes — a real problem for an audience skewing 45+.
   Everything under 24px is Inter. No exceptions.
   ====================================================================== */

body,
.et_pb_module,
p, li, td, th, label, input, textarea, select, button {
  font-family: var(--ppi-body);
}

body {
  font-size: 17px;      /* not 16 — audience decision */
  line-height: 1.7;
  color: var(--ppi-ink);
}

h1, h2, h3,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3 {
  font-family: var(--ppi-display);
  font-weight: 600;
  color: var(--ppi-navy-900);
  line-height: 1.14;
}

/* h4 and below drop to Inter — they sit under the 24px floor. */
h4, h5, h6,
.et_pb_module h4,
.et_pb_module h5,
.et_pb_module h6 {
  font-family: var(--ppi-body);
  font-weight: 600;
  color: var(--ppi-navy-900);
  line-height: 1.4;
}

h1 { font-size: 48px; }
h2 { font-size: clamp(2rem, 3.2vw, 2.7rem); }
h3 { font-size: 26px; }
h4 { font-size: 19px; }

.ppi-hero h1 { font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.08; }

/* Constrain the measure. Current service pages run full width. */
.ppi-measure,
.ppi-measure p,
.et_pb_text p {
  max-width: var(--ppi-measure);
}

/* Eyebrow — the rhythm device. Every section opens with one. */
.ppi-eyebrow {
  font-family: var(--ppi-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ppi-gold-700);
  margin-bottom: var(--ppi-s-3);
  line-height: 1.2;
}
.ppi-navy .ppi-eyebrow,
.ppi-hero .ppi-eyebrow {
  color: var(--ppi-gold-300);
  letter-spacing: .20em;
  font-size: 11.5px;
}

.ppi-lead { font-size: 18px; line-height: 1.7; color: var(--ppi-slate); }
.ppi-navy .ppi-lead { color: rgba(255,255,255,.82); }

.ppi-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ppi-gold-700);
}


/* =========================================================================
   4. BUTTONS
   Uppercase is correct in this direction. The constraint that replaces
   "no all-caps" is: labels stay under four words.
   ====================================================================== */

.ppi-btn,
.et_pb_button.ppi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;              /* WCAG floor is 44 — 52 suits older hands */
  padding: 14px 32px !important;
  font-family: var(--ppi-body);
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: var(--ppi-r-sm) !important;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all .2s ease;
}

/* Divi appends an arrow glyph on hover. Off. */
.ppi-btn.et_pb_button:after,
.ppi-btn.et_pb_button:before { display: none !important; }

.ppi-btn--primary {
  background: var(--ppi-gold-700) !important;
  color: #fff !important;
  border-color: var(--ppi-gold-700) !important;
}
.ppi-btn--primary:hover {
  background: var(--ppi-gold-800) !important;
  border-color: var(--ppi-gold-800) !important;
}

.ppi-btn--outline-light {
  background: transparent !important;
  color: var(--ppi-navy-900) !important;
  border-color: var(--ppi-navy-900) !important;
}
.ppi-btn--outline-light:hover {
  background: var(--ppi-navy-900) !important;
  color: #fff !important;
}

.ppi-btn--outline-dark {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.45) !important;
}
.ppi-btn--outline-dark:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: #fff !important;
}

.ppi-tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ppi-gold-700);
  text-decoration: none;
  border-bottom: 1px solid var(--ppi-border);
  padding-bottom: 4px;
}
.ppi-tlink:hover { border-color: var(--ppi-gold-700); }


/* =========================================================================
   5. SECTIONS
   Alternate white and cream. Never two adjacent sections with the same
   background — that is what makes the current site read as one wall.
   ====================================================================== */

.ppi-section  { padding: var(--ppi-s-11) 0 !important; }
.ppi-cream    { background: var(--ppi-cream) !important; }
.ppi-navy     { background: var(--ppi-navy-900) !important; color: #fff; }
.ppi-navy h1, .ppi-navy h2, .ppi-navy h3 { color: #fff !important; }

/* Gold hairline grid — the hero/band texture. Decorative, so it is
   applied via ::before rather than as a markup element. */
.ppi-hairlines { position: relative; overflow: hidden; }
.ppi-hairlines::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(184,148,58,.045) 0px,
    rgba(184,148,58,.045) 1px,
    transparent 1px,
    transparent 80px
  );
}
.ppi-hairlines > * { position: relative; z-index: 1; }

.ppi-rule {
  width: 36px;
  height: 1px;
  background: var(--ppi-gold-700);
  border: 0;
  margin: 0 0 var(--ppi-s-4);
}
.ppi-navy .ppi-rule { background: var(--ppi-gold-500); }


/* =========================================================================
   6. CARDS
   The signature device is a shared hairline lattice — cards sit inside
   one continuous 1px border grid rather than floating as boxes.
   No shadow at rest, ever.
   ====================================================================== */

.ppi-lattice {
  border-top: 1px solid var(--ppi-border);
  border-left: 1px solid var(--ppi-border);
}
.ppi-lattice .et_pb_column {
  border-right: 1px solid var(--ppi-border);
  border-bottom: 1px solid var(--ppi-border);
  margin: 0 !important;
  padding: var(--ppi-s-7) 34px;
  transition: background .2s ease;
}
.ppi-lattice .et_pb_column:hover { background: var(--ppi-cream); }

.ppi-card {
  background: var(--ppi-white);
  border: 1px solid var(--ppi-border);
  border-radius: var(--ppi-r-sm);
  padding: var(--ppi-s-7);
  box-shadow: none;
}
.ppi-card--featured { border-top: 3px solid var(--ppi-gold-700); }

/* Symptom eyebrow on treatment cards. The eyebrow carries the symptom,
   the heading carries the procedure — that is how someone searching
   "receding gums" reaches a page titled "Soft Tissue Grafting". */
.ppi-card__symptom {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ppi-gold-700);
  margin-bottom: 9px;
}

/* Icons: 1.5px stroke, gold. Never emoji (F-31) and never the
   ETmodules icon font — inconsistent weights, limited set. */
.ppi-icon {
  width: 34px;
  height: 34px;
  color: var(--ppi-gold-700);
  margin-bottom: var(--ppi-s-5);
}
.ppi-navy .ppi-icon { color: var(--ppi-gold-300); }


/* =========================================================================
   7. FORMS
   The current Contact page uses placeholder-only fields, which fails
   WCAG 3.3.2. Labels are visible and above the field, always.
   ====================================================================== */

.ppi-form label,
.et_pb_contact_form_label {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  margin-bottom: var(--ppi-s-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ppi-ink);
}

.ppi-form input[type="text"],
.ppi-form input[type="email"],
.ppi-form input[type="tel"],
.ppi-form textarea,
.et_pb_contact_field input,
.et_pb_contact_field textarea {
  min-height: 52px;
  padding: 14px 16px !important;
  font-family: var(--ppi-body) !important;
  font-size: 17px !important;
  color: var(--ppi-ink) !important;
  background: var(--ppi-white) !important;
  border: 1px solid var(--ppi-border) !important;
  border-radius: var(--ppi-r-sm) !important;
}

/* Single column always — including desktop. Multi-column forms
   measurably reduce completion. */
.ppi-form .et_pb_contact_field { width: 100% !important; float: none !important; }

.ppi-form__privacy {
  font-size: 15px;
  color: var(--ppi-slate);
  border-left: 3px solid var(--ppi-gold-700);
  padding: var(--ppi-s-3) var(--ppi-s-5);
  background: var(--ppi-cream);
  margin-bottom: var(--ppi-s-5);
  max-width: var(--ppi-measure);
}

.ppi-form__error {
  color: var(--ppi-error);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;   /* icon sits here — never colour alone (WCAG 1.4.1) */
}


/* =========================================================================
   8. HOURS  (output of [ppi_hours])
   ====================================================================== */

.ppi-hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--ppi-s-4);
  max-width: 236px;
  margin-bottom: 9px;
  font-size: 15px;
}
.ppi-hours__row span:last-child { font-variant-numeric: tabular-nums; }
#main-footer .ppi-hours__row span:last-child { color: #fff; }


/* =========================================================================
   9. STICKY MOBILE ACTION BAR
   The practice books by phone. A persistent thumb-reachable number is
   the highest-ROI single element in this redesign.
   ====================================================================== */

.ppi-mbar { display: none; }

@media (max-width: 767px) {
  .ppi-mbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 99999;
    gap: 10px;
    padding: 10px;
    background: var(--ppi-white);
    border-top: 1px solid var(--ppi-border);
    box-shadow: var(--ppi-shadow-mbar);
  }
  .ppi-mbar .ppi-btn {
    flex: 1;
    min-height: 50px;
    padding: 12px 10px !important;
    font-size: 11.5px !important;
  }
  body { padding-bottom: 74px; }
}


/* =========================================================================
   10. RESPONSIVE
   Divi breakpoints: desktop >980 · tablet 768–980 · phone <768
   ====================================================================== */

@media (max-width: 980px) {
  .ppi-section { padding: 72px 0 !important; }
  h1 { font-size: 38px; }
  .ppi-lattice .et_pb_column { padding: var(--ppi-s-6) var(--ppi-s-6); }
}

@media (max-width: 767px) {
  .ppi-section { padding: 56px 0 !important; }
  h1 { font-size: 34px; }
  h3 { font-size: 23px; }          /* Cormorant floor holds at 23 */
  body { font-size: 17px; }        /* body never shrinks on mobile */
  .ppi-lattice .et_pb_column { padding: var(--ppi-s-6) 26px; }
  .ppi-btn { width: 100%; }
}


/* =========================================================================
   11. PRINT — post-op instruction sheets get printed. Make them legible.
   ====================================================================== */

@media print {
  .ppi-mbar,
  #main-header,
  #main-footer,
  .ppi-navy { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}