/*
Theme Name: DripDrop Media
Theme URI: https://dripdropmedia.com
Description: Faithful-hybrid cyber-glass child theme for Drip Drop Media. The flagship design system lives in assets/ddm-site.css; this stylesheet is integration glue only ~ it maps Elementor's wrappers onto that system and styles the Pro Form. No bespoke design CSS lives here.
Author: Drip Drop Media
Template: hello-elementor
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: dripdropmedia
*/

/* =========================================================================
   1. ELEMENTOR WRAPPER NEUTRALISATION
   Let ddm-site.css's .block / .container own layout. Top-level section
   containers tagged .block become transparent, full-bleed, vertically padded
   by the design system. Scoped to our own .block/.ddm-container classes only.
   ========================================================================= */
.site-main,
.elementor,
.page-content { max-width: 100%; margin: 0; padding: 0; background: transparent; }

/* A top-level section container in a seeded page = .block (optionally .tight) */
.elementor .e-con.block,
.elementor .e-con.block > .e-con-inner { width: 100%; max-width: 100%; }
.elementor .e-con.block { padding-left: 0; padding-right: 0; }

/* The boxed inner wrapper = .ddm-container (max-width 1280 + gutters via .container) */
.elementor .e-con.ddm-container,
.elementor .e-con.ddm-container > .e-con-inner { width: 100%; max-width: 100%; padding: 0; }

/* Contact form section is the ONLY page body built from real Elementor containers
   (so it can hold a Pro Form). Re-assert grid display that Elementor forces to flex;
   the columns/gap/responsive come from ddm-site.css .contact-grid. */
.elementor .e-con.contact-grid { display: grid; }
.elementor .e-con.form-card { width: 100%; }

/* Headings/paragraphs inside Elementor widgets inherit the design system globally
   (ddm-site.css styles h1-h4, p by tag). Elementor widget chrome is transparent. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor { color: inherit; }
.elementor-widget { --widgets-spacing: 0px; }

/* =========================================================================
   2. ELEMENTOR PRO FORM  →  flagship .field styling (mirrors ddm-site.css §25)
   Put CSS class `ddm-form` on the Form widget.
   ========================================================================= */
.ddm-form .elementor-field-group { margin-bottom: 18px; }
.ddm-form .elementor-field-group > label {
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px;
}
.ddm-form .elementor-field-textual,
.ddm-form textarea.elementor-field-textual,
.ddm-form select.elementor-field-textual {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line);
  /* 16px floor: smaller inputs make iOS Safari force-zoom the viewport on focus */
  border-radius: var(--r-sm); font-size: 16px; font-family: var(--font-body);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* Elementor's default form CSS loads after the child theme and sets fields white;
   override the background + text colour explicitly so the dark glass field shows. */
.ddm-form .elementor-field-group .elementor-field-textual,
.ddm-form .elementor-field-group textarea.elementor-field-textual,
.ddm-form .elementor-field-group select.elementor-field-textual {
  background-color: #090C16 !important; color: var(--fg) !important;
}
.ddm-form textarea.elementor-field-textual { resize: vertical; min-height: 120px; }
.ddm-form .elementor-field-textual::placeholder,
.ddm-form textarea.elementor-field-textual::placeholder { color: var(--muted); }
.ddm-form .elementor-field-textual:focus,
.ddm-form textarea.elementor-field-textual:focus,
.ddm-form select.elementor-field-textual:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,225,255,.12);
}
.ddm-form .elementor-field-type-select .elementor-field-textual {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23FFFFFF' stroke-width='2'><path d='M2 4l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center;
}
/* Submit button → reuse the .btn .btn-primary look */
.ddm-form .elementor-button {
  background: var(--grad-brand-2); color: #04060B; box-shadow: var(--glow-c);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; text-transform: uppercase;
  letter-spacing: .12em; border-radius: var(--r-pill); padding: 15px 30px; width: 100%;
  justify-content: center; border: none; transition: box-shadow .4s var(--ease), filter .3s var(--ease);
}
.ddm-form .elementor-button:hover {
  box-shadow: 0 0 60px rgba(34,225,255,.5), 0 0 100px rgba(255,61,216,.28); filter: brightness(1.05);
}
.ddm-form .elementor-message { font-family: var(--font-mono); font-size: 13px; color: var(--cyan); }

/* =========================================================================
   3. SINGLE POSTS (engine-authored raw HTML on the main install)
   Hello's fallback single template has no offset for the fixed .header-wrap
   pill, so the H1 rendered underneath it. Same clearance as the blog
   install's .post-head. Rule 1 zeroes .site-main padding; this outranks it.
   ========================================================================= */
body.single .site-main { padding-top: clamp(120px, 14vh, 160px); }

/* =========================================================================
   4. SAFETY ~ keep empty Hello header/footer shells out of flow
   ========================================================================= */
body:not(.elementor-editor-active) > .site-header:empty,
body:not(.elementor-editor-active) > .site-footer:empty { display: none; }

/* =========================================================================
   5. DEFAULT-TEMPLATE PAGES (added 2026-08-04)
   Same defect as rule 3, different template. Pages left on Hello's default
   page template get no offset for the fixed .header-wrap pill, so their H1
   renders underneath it at scroll-top. Reported on /start/ and confirmed on
   every page-template-default page: /start/, /faq/, /insights/, /terms/,
   /thank-you/, /privacy-policy/.
   Pages on elementor_header_footer are unaffected because their .page-hero
   already carries 118px of top padding.
   Clearance value matches rule 3 deliberately, so single posts and default
   pages clear the header identically. Rule 1 zeroes .site-main padding;
   this outranks it on specificity.
   ========================================================================= */
body.page-template-default .site-main { padding-top: clamp(120px, 14vh, 160px); }

/* =========================================================================
   6. LABEL TYPOGRAPHY -> KANIT + BREATHING ROOM (added 2026-08-04)
   The small uppercase letterspaced labels were set in --font-mono
   ('JetBrains Mono'). Travis asked for Kanit, which is already loaded
   (weights 500-900), and for real space above and below the sections
   carrying them - .trust in particular had only 8px of top padding.

   Letter-spacing is pulled back from 0.24em/0.22em to 0.16em because Kanit
   is a wider face than JetBrains Mono; keeping the mono tracking made it
   read as gappy at 11px.

   Scoped to CONTENT labels only. Deliberately NOT touching genuinely
   monospace UI where the tabular look is the point: .mono, .dash-bar .url,
   .dash-card .dc-trend, .field label, .field .err-msg, .svc-block .svc-num,
   .scroll-cue, .work-stats .ws .l.
   ========================================================================= */
.kicker,
.eyebrow,
.trust-label,
.breadcrumb,
.stat-label,
.case .case-tag,
.work-card .wc-industry,
.svc-outcome,
.price-note,
.dash-card .dc-label,
.footer-col h4 {
  font-family: 'Kanit', 'Kanit Fallback', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* The trust/label band sat almost flush against the section above it. */
.trust { padding-top: clamp(40px, 5vw, 72px); }
.trust-label { margin-bottom: clamp(24px, 3vw, 36px); }

/* =========================================================================
   7. EX-MONO TYPE: KANIT EVERYWHERE + VERTICAL BREATHING ROOM (2026-08-05)

   Travis asked for three things, sitewide, no exceptions on the first two:
     a) every grey font -> white
     b) every JetBrains Mono font -> Kanit
     c) real margin above and below that text

   (a) and (b) are done at the TOKEN level, not per-selector, so they apply
   to all 45 ex-mono rules and all ~82 grey-text rules at once, on every
   page and in all three stylesheets (theme, /css/site.css, blog):
       --fg-1 / --fg-2 / --fg-3 / --muted  ->  #FFFFFF
       --font-mono                          ->  'Kanit',system-ui,sans-serif
   Section 6 below/above is now redundant for font-family but is kept because
   its letter-spacing tightening is still wanted.

   (c) is this block. Kanit is a wider face than JetBrains Mono, so the old
   mono tracking (up to 0.32em) reads gappy and is pulled back here too.

   Deliberately NOT given extra vertical margin: label/value pairs where the
   label must stay tight to its number (.stat-label, .info-card .it-label,
   .dash-card .dc-label, .work-stats .ws .l) and the fake-UI widget internals
   (.chip, .scroll-cue, .dash-bar .url, .bro-bar .url, .gl, .serp-result .u,
   .crm-card span, .map-pin, .demo-*, .field label, .field .err-msg).
   Spacing those apart separates a number from its own caption.
   ========================================================================= */

:root{
  --label-gap:clamp(20px,2.4vw,32px);
}

/* Standalone ex-mono lines in normal page flow: space above AND below.
   Specificity is raised with body because `p{margin-block-start:0}` in the
   base sheet was zeroing .price-disclaimer's top margin. */
body .price-disclaimer,
body .price-note,
body .trust-label,
body .breadcrumb,
body .svc-outcome,
body .case .case-tag,
body .work-card .wc-industry,
body .svc-block .svc-num,
body .footer-col h4,
body .kicker,
body .eyebrow{
  margin-top:var(--label-gap);
  margin-bottom:var(--label-gap);
}

/* .price-disclaimer is the one Travis screenshotted: centred block, and it
   sat flush against the CTA button above it (computed margin was 0). */
body .price-disclaimer{
  margin-left:auto;
  margin-right:auto;
  margin-top:var(--label-gap);
  margin-bottom:var(--label-gap);
}

/* Inline-flex pills need the gap to actually take effect. */
body .kicker,
body .eyebrow,
body .svc-outcome{
  display:inline-flex;
}

/* Kanit is wider than the mono face it replaced. Pull the widest tracking
   back so 10-12px uppercase labels don't read as gappy. */
body .scroll-cue{letter-spacing:0.18em}
body .trust-label,
body .stat-label,
body .dash-card .dc-label,
body .crm-col .col-head,
body .ads-stat .l,
body .work-stats .ws .l,
body .demo-cal .cal-head,
body .demo-bar .tag{letter-spacing:0.12em}
body .footer-col h4,
body .breadcrumb,
body .case .case-tag,
body .work-card .wc-industry,
body .svc-block .svc-num{letter-spacing:0.12em}

/* Kanit has no 300/400 italic-ish thin look at these sizes; keep the label
   weight consistent now that the mono 500 is gone. */
body .price-disclaimer,
body .price-note,
body .trust-label,
body .breadcrumb,
body .svc-outcome,
body .case .case-tag,
body .work-card .wc-industry,
body .svc-block .svc-num,
body .kicker,
body .eyebrow{
  font-weight:500;
}