/* ==========================================================================
   Dermo-Hair — brand layer for OW Builder content
   --------------------------------------------------------------------------
   The builder renders everything as inline styles and ships no stylesheet of
   its own beyond this file, so anything structural (box-sizing, breakpoints,
   button skins, component skins) has to live here.

   Palette: espresso + gold, editorial serif display / geometric sans UI.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --dh-bg:        #161210;
  --dh-bg-alt:    #1e1a16;
  --dh-bg-deep:   #100d0b;
  --dh-gold:      #c9a24b;
  --dh-gold-soft: rgba(201, 162, 75, .18);
  --dh-ink:       #f2ede4;
  --dh-text:      #e7e2da;
  --dh-muted:     #a89e90;
}

/* --------------------------------------------------------------------------
   1. Layout — the renderer puts `margin-left:0` on every container whose
   `align` is "left" (the prop controls BOTH box alignment and text
   alignment). Every section therefore hugged the left edge of the window and
   ran 1300px-long lines of text on a desktop screen. Re-centre the box and
   keep the text alignment the prop asked for.
   -------------------------------------------------------------------------- */
.owb-container { margin-left: auto !important; margin-right: auto !important; }

/* Heroes carry a min-height so the photograph has room; without this the copy
   sticks to the top padding and leaves a dead half-screen underneath. */
.owb-imported section[style*="min-height"] { display: flex; align-items: center; }
.owb-imported section[style*="min-height"] > .owb-container { width: 100%; }

/* Readable measure. Long-form copy caps at ~72 characters; a centred
   container centres its own paragraphs too. */
.owb-imported p { max-width: 74ch; }
.owb-container[style*="text-align:center"] p,
.owb-container[style*="text-align: center"] p { margin-left: auto; margin-right: auto; }
.owb-imported .owb-post-grid p,
.owb-imported .owb-card p,
.owb-imported td p, .owb-imported li p { max-width: none; }

img { max-width: 100%; height: auto; }
/* WordPress swaps emoji characters for an <img>; with max-width:100% and no
   dimensions of its own one ⚡ filled half a section. */
img.wp-smiley, img.emoji, img[src*="/core/emoji/"] {
  width: 1em !important; height: 1em !important; display: inline !important;
  vertical-align: -.1em; margin: 0 .05em; border-radius: 0 !important; box-shadow: none !important;
}

/* Every grid-based widget (columns, post-loop, galleries, carousels, pricing,
   infinite-scroll grids...) sets grid-template-columns as a fixed inline
   style with no breakpoint of its own — catch them ALL generically via the
   inline style content itself, since most don't share a common class. */
@media (max-width: 782px) {
  [style*="grid-template-columns:repeat"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 1024px) and (min-width: 783px) {
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"] { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* --------------------------------------------------------------------------
   2. Type
   -------------------------------------------------------------------------- */
body, .owb-section, .owb-container { color: var(--dh-text); }
h1, h2, h3, .owb-h1, .owb-h2, .owb-h3,
.owc-front-hero__title, .owc-hero__title, .owc-page__title, .owc-feature__title,
.owc-section-title { font-family: "Newsreader", Georgia, serif !important; font-weight: 500 !important; }

/* Eyebrows: small caps label + a short gold rule. inline-flex keeps them
   shrink-to-fit so they follow the container's text-align. */
h4, h5, h6, .owb-h4, .owb-h5, .owb-h6 {
  font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif !important;
  text-transform: uppercase; letter-spacing: .16em; font-size: .75rem !important;
  font-weight: 600 !important;
}
.owb-container > .owb-h4 { display: inline-flex; align-items: center; gap: .85rem; }
.owb-container > .owb-h4::after {
  content: ""; flex: 0 0 46px; height: 1px; background: currentColor; opacity: .5;
}
/* Gold hairline under a section title that follows an eyebrow. */
.owb-container > .owb-h4 + .owb-h2 { position: relative; padding-bottom: .55rem; }

a { color: inherit; }
a:hover { color: var(--dh-gold); }
.owb-container > p a, .owb-imported li a {
  color: var(--dh-gold); text-decoration: underline; text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
::selection { background: var(--dh-gold); color: var(--dh-bg); }
:focus-visible { outline: 2px solid var(--dh-gold); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. Buttons — the renderer emits .owb-btn/.owb-btn-{variant}/.owb-btn-{size}
   but ships no stylesheet for them, so they read as plain text links.
   Background and text colour are always declared TOGETHER: setting only one
   half of a contrast pair is what made them unreadable before.
   -------------------------------------------------------------------------- */
.owb-btn {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  cursor: pointer; text-decoration: none; display: inline-block;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  font-size: .8rem; line-height: 1;
  padding: 1.05rem 2.1rem; border-radius: 2px; border: 1px solid transparent;
}
.owb-btn:hover { transform: translateY(-2px); }
.owb-btn-sm { padding: .8rem 1.5rem; font-size: .72rem; }
.owb-btn-lg { padding: 1.15rem 2.5rem; font-size: .82rem; }
.owb-btn-primary { background: var(--dh-gold) !important; color: var(--dh-bg) !important; border-color: var(--dh-gold) !important; }
.owb-btn-primary:hover { background: #fafaf9 !important; color: var(--dh-bg) !important; border-color: #fafaf9 !important; }
.owb-btn-outline, .owb-btn-ghost, .owb-btn-link { background: transparent !important; color: var(--dh-ink) !important; border-color: var(--dh-gold) !important; }
.owb-btn-outline:hover, .owb-btn-ghost:hover { background: var(--dh-gold) !important; color: var(--dh-bg) !important; }

/* --------------------------------------------------------------------------
   4. Dark harmonisation
   The renderer hardcodes a Tailwind light palette (slate ink/#fff cards/blue
   accent) in ~250 places. ow-canvas used to paper over that with a blanket
   `!important` colour override on .owb-imported — which also destroyed every
   colour authored in the builder. That override is gone; this maps only the
   renderer's DEFAULT tokens onto the brand palette, by matching the inline
   style itself, and leaves authored colours alone.
   -------------------------------------------------------------------------- */
.owb-imported [style*="color:#0f172a"], .owb-imported [style*="color: #0f172a"],
.owb-imported [style*="color:#111827"] { color: var(--dh-ink) !important; }
.owb-imported [style*="color:#1e293b"], .owb-imported [style*="color:#334155"],
.owb-imported [style*="color: #334155"] { color: #ded7cc !important; }
.owb-imported [style*="color:#475569"], .owb-imported [style*="color:#64748b"],
.owb-imported [style*="color: #64748b"], .owb-imported [style*="color:#94a3b8"],
.owb-imported [style*="color:#6b7280"] { color: var(--dh-muted) !important; }
.owb-imported [style*="color:#cbd5e1"] { color: #c9c0b4 !important; }
/* Same treatment for the greys the old TinyMCE content pinned by hand. */
.owb-imported [style*="color:#333"], .owb-imported [style*="color: #333"],
.owb-imported [style*="color:#656565"], .owb-imported [style*="color:#000"],
.owb-imported [style*="color: #000"], .owb-imported [style*="color:#222"] { color: #ded7cc !important; }
.owb-imported [style*="color:#3b82f6"], .owb-imported [style*="color:#2563eb"] { color: var(--dh-gold) !important; }

.owb-imported [style*="background:#fff"], .owb-imported [style*="background: #fff"],
.owb-imported [style*="background-color:#fff"], .owb-imported [style*="background-color: #fff"] {
  background: var(--dh-bg-alt) !important; background-color: var(--dh-bg-alt) !important;
}
.owb-imported [style*="background:#f8fafc"], .owb-imported [style*="background:#f1f5f9"],
.owb-imported [style*="background: #f8fafc"], .owb-imported [style*="background-color:#f8fafc"],
.owb-imported [style*="background-color:#f1f5f9"] {
  background: #191511 !important; background-color: #191511 !important;
}
.owb-imported [style*="#e2e8f0"], .owb-imported [style*="#e5e5e5"],
.owb-imported [style*="#e5e7eb"] { border-color: var(--dh-gold-soft) !important; }
.owb-imported [style*="background:#3b82f6"], .owb-imported [style*="background-color:#3b82f6"] {
  background: var(--dh-gold) !important; background-color: var(--dh-gold) !important; color: var(--dh-bg) !important;
}

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */
/* Post / service grids */
.owb-post-grid > * {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  background: var(--dh-bg-alt) !important;
  border-color: var(--dh-gold-soft) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  overflow: hidden;
}
.owb-post-grid > *:hover {
  transform: translateY(-6px);
  border-color: rgba(201,162,75,.42) !important;
  box-shadow: 0 24px 44px -16px rgba(0,0,0,.6);
}
.owb-post-grid a, .owb-post-grid h3 { color: var(--dh-ink) !important; }
/* The "read more" pill paints itself gold and writes #fff on top (1.9:1).
   Anything in a card that carries its own background gets espresso text. */
.owb-post-grid a[style*="background:"] { color: var(--dh-bg) !important; font-weight: 600; }
.owb-post-grid a[style*="background:"]:hover { background: #fafaf9 !important; }
.owb-post-grid h3 { letter-spacing: -.01em; }
.owb-post-grid > * img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.owb-post-grid > *:hover img { transform: scale(1.05); }

/* FAQ */
.owb-faq details {
  background: var(--dh-bg-alt) !important; border-color: var(--dh-gold-soft) !important;
  color: var(--dh-text); border-radius: .6rem;
}
.owb-faq summary { color: var(--dh-ink) !important; font-weight: 600; }
.owb-faq details[open] summary { color: var(--dh-gold) !important; }
.owb-faq details p, .owb-faq details div { color: #c9c0b4 !important; }

.owb-card { background: var(--dh-bg-alt) !important; border-color: var(--dh-gold-soft) !important; color: var(--dh-text); }

blockquote {
  border-left-color: var(--dh-gold) !important; color: var(--dh-ink) !important;
  background: rgba(201,162,75,.06); border-radius: .5rem;
  font-family: "Newsreader", Georgia, serif; font-size: 1.35rem; line-height: 1.55;
}
blockquote cite, blockquote footer { color: var(--dh-muted) !important; font-family: "Inter Tight", sans-serif; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-style: normal; }

section[style*="background"] table { color: var(--dh-text); }

/* Before / after comparison — the renderer emits this markup but the plugin
   shipped no stylesheet for it, so it rendered as two stacked full-size
   images. */
.owb-ba {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  cursor: ew-resize; user-select: none; touch-action: pan-y;
  border-radius: .9rem; box-shadow: 0 24px 48px -20px rgba(0,0,0,.6);
}
.owb-ba > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The "after" panel is anchored RIGHT. The renderer puts the before image as
   the base with its label top-left and the after label top-right; clipping the
   after panel from the left put the after photo under the "Avant" label. */
.owb-ba-after { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; overflow: hidden; }
.owb-ba-after img {
  position: absolute; top: 0; right: 0; height: 100%;
  width: var(--ba-w, 100%); max-width: none; object-fit: cover;
}
.owb-ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--dh-gold);
  transform: translateX(-1px); z-index: 3; pointer-events: none;
}
.owb-ba-handle::after {
  content: '⇄'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 42px; height: 42px; border-radius: 50%; background: var(--dh-gold); color: var(--dh-bg);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

.owb-slider-track {
  display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 1rem; scrollbar-width: none;
}
.owb-slider-track::-webkit-scrollbar { display: none; }
.owb-slider-track > * { flex: 0 0 100%; scroll-snap-align: start; }

/* Embeds (maps, video) get the same treatment as figures. */
.owb-imported iframe {
  display: block; width: 100%; border: 1px solid var(--dh-gold-soft) !important;
  border-radius: .9rem;
}

.owb-section img { border-radius: .75rem; }
.owb-section .owb-logo-cloud img, .owb-section img[style*="border-radius:50%"] { border-radius: 50%; }

/* Gallery / lightbox tiles */
.owb-gallery img, .owb-gallery-lightbox img { transition: transform .5s cubic-bezier(.2,.7,.3,1), filter .3s ease; }
.owb-gallery a:hover img, .owb-gallery-lightbox a:hover img { transform: scale(1.04); filter: brightness(1.08); }

/* Tabs */
.owb-tabs [role="tab"], .owb-tabs button { color: var(--dh-muted) !important; }
.owb-tabs [aria-selected="true"], .owb-tabs .is-active { color: var(--dh-gold) !important; border-color: var(--dh-gold) !important; }

/* Forms rendered inside builder content (OW Forms) */
.owb-imported input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.owb-imported textarea, .owb-imported select {
  background: #14100e !important; color: var(--dh-text) !important;
  border: 1px solid var(--dh-gold-soft) !important; border-radius: .4rem !important;
  padding: .85rem 1rem !important; width: 100%;
}
.owb-imported input[type="checkbox"], .owb-imported input[type="radio"] {
  width: auto; accent-color: var(--dh-gold); margin-right: .5rem;
}
.owb-imported input:focus, .owb-imported textarea:focus, .owb-imported select:focus {
  border-color: var(--dh-gold) !important; outline: none;
}
.owb-imported label { color: var(--dh-muted) !important; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
/* A consent line is a sentence, not a field label: keep it readable (and
   legible enough to actually be consent). */
.owb-imported label:has(input[type="checkbox"]), .owb-imported label:has(input[type="radio"]) {
  text-transform: none; letter-spacing: normal; font-size: .85rem; line-height: 1.5;
  display: flex; gap: .55rem; align-items: flex-start;
}
.owb-imported input[type="submit"], .owb-imported button[type="submit"] {
  background: var(--dh-gold) !important; color: var(--dh-bg) !important; border: 0 !important;
  padding: 1rem 2.1rem !important; border-radius: 2px !important; cursor: pointer;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: .8rem;
}

/* --------------------------------------------------------------------------
   6. ow-consent policy pages
   The plugin renders its own full-page layout with a hard-coded light palette
   (#fafaf9 hero, #ffffff body, slate ink, an orange badge). Dropped onto a dark
   site that left dark-on-dark labels — the "Cookies" badge read at 2.5:1.
   -------------------------------------------------------------------------- */
.owco-policy-page [style*="background:#fafaf9"],
.owco-policy-page [style*="background: #fafaf9"],
.owco-policy-page [style*="background:#ffffff"],
.owco-policy-page [style*="background: #ffffff"] { background: var(--dh-bg) !important; }
.owco-policy-page [style*="color:#0f172a"] { color: var(--dh-ink) !important; }
.owco-policy-page [style*="color:#475569"],
.owco-policy-page [style*="color:#64748b"] { color: var(--dh-muted) !important; }
/* ow-canvas darkens this badge to #9a3412 for a light background with an
   equally specific !important rule that simply loads later — hence html+body. */
html body.owco-policy-page [style*="color:#ea580c"],
html body.owco-policy-page [style*="color:#9a3412"] {
  color: var(--dh-gold) !important; background: rgba(201,162,75,.12) !important;
}
.owco-policy, .owco-policy p, .owco-policy li, .owco-policy td { color: var(--dh-text); }
.owco-policy h1, .owco-policy h2, .owco-policy h3, .owco-policy h4 { color: var(--dh-ink); }
.owco-policy a { color: var(--dh-gold); }
.owco-policy table, .owco-policy th, .owco-policy td { border-color: var(--dh-gold-soft) !important; }
.owco-policy th { color: var(--dh-gold) !important; }
.owco-policy__scan-caveat {
  background: rgba(201,162,75,.08) !important;
  border-left-color: var(--dh-gold) !important;
  color: #e4d9c2 !important;
}
.owco-policy__scan-caveat strong { color: var(--dh-gold) !important; }
.owco-policy__disclaimer { background: var(--dh-bg-alt) !important; border-color: var(--dh-gold-soft) !important; }
.owco-policy__disclaimer-title { color: var(--dh-ink) !important; }
.owco-policy__disclaimer-meta { color: var(--dh-muted) !important; }

/* Mobile rhythm: the generous desktop section padding is too much on a phone. */
@media (max-width: 640px) {
  .owb-section { padding-left: 18px !important; padding-right: 18px !important; }
  .owb-container { padding-left: 0 !important; padding-right: 0 !important; }
  .owb-btn { display: block; text-align: center; }
  .owb-ba { aspect-ratio: 3 / 4; }
}

/* --------------------------------------------------------------------------
   7. ow-consent chrome
   The plugin ships an orange accent (#f97316 / #c2410c). Everything else on
   this site is espresso + gold, so the banner, the floating button and the
   blocked-embed placeholder read as a different product. All of it is
   variable-driven, so the palette is remapped rather than overridden rule by
   rule. The selectors are doubled because the plugin's own dark-mode block
   ([data-theme] .owco-banner:not([data-owco-theme="light"])) is equally
   !important-free but more specific.
   -------------------------------------------------------------------------- */
:root,
.owco-banner.owco-banner[data-owco-theme],
.owco-banner.owco-banner,
.owco-floating.owco-floating,
.owco-embed-placeholder.owco-embed-placeholder {
  --owco-accent: #c9a24b !important;
  --owco-accent-strong: #c9a24b !important;
  --owco-accent-darker: #b08c3c !important;
  --owco-banner-accent: #c9a24b !important;
  --owco-banner-accent-strong: #c9a24b !important;
  --owco-banner-accent-darker: #b08c3c !important;
  --owco-banner-btn-bg: #c9a24b !important;
  --owco-banner-btn-bg-hover: #fafaf9 !important;
  --owco-banner-btn-fg: #161210 !important;
}
.owco-embed-accept, .owco-banner button[class*="accept"] {
  background: var(--dh-gold) !important; color: var(--dh-bg) !important;
  border-color: var(--dh-gold) !important; font-weight: 600;
}
.owco-embed-accept:hover { background: #fafaf9 !important; color: var(--dh-bg) !important; }
/* The blocked-embed placeholder sits outside .owco-banner, so the plugin
   styles it from prefers-color-scheme rather than data-theme: with the site
   forced dark, a light-OS visitor got #525252 text on #18181b (2.3:1). */
.owco-embed-placeholder {
  border-color: var(--dh-gold-soft) !important;
  background: var(--dh-bg-alt) !important;
  color: var(--dh-text) !important;
}
.owco-embed-placeholder .owco-embed-text, .owco-embed-text { color: var(--dh-text) !important; }