/* OW Builder atomic.css — global safety rules missing from the pure-inline-style
   renderer: box-sizing reset (inline padding+max-width was overflowing without
   it) and responsive column stacking (grid-template-columns was a fixed inline
   style with no breakpoint, so every multi-column layout stayed side-by-side
   and overflowed on phones). */
*, *::before, *::after { box-sizing: border-box; }

/* The renderer emits .owb-btn/.owb-btn-{variant}/.owb-btn-{size} but ships no
   stylesheet for them, so buttons had no padding, no border and no radius --
   they read as plain text links. Defined here. */
.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; }
/* Hard-code background AND text together: the per-post _owbldr_settings
   colorPrimary injection this used to rely on for the background is
   unreliable (some pages never got it applied), which left dark button text
   forced onto whatever the button's OWN (often dark/transparent) inline
   background still was -- unreadable. Never set one half of a contrast pair
   without the other. */
.owb-btn-primary { background: #c9a24b !important; color: #161210 !important; border-color: #c9a24b !important; }
.owb-btn-primary:hover { background: #fafaf9 !important; color: #161210 !important; }
.owb-btn-outline, .owb-btn-ghost, .owb-btn-link { color: #f2ede4 !important; border-color: #c9a24b !important; }
.owb-btn-outline:hover, .owb-btn-ghost:hover { background: #c9a24b !important; color: #161210 !important; }

/* Warm, editorial palette: gold accent instead of a generic tech-indigo, serif
   display type for headings instead of the geometric sans used for UI/body
   text -- a deliberate pivot away from the "SaaS dashboard" look toward
   something that reads as a premium beauty/aesthetics brand. */
body, .owb-section, .owb-container { color: #e7e2da; }
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; }
a { color: inherit; }
a:hover { color: #c9a24b; }
::selection { background: #c9a24b; color: #161210; }

/* 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; }
}

img { max-width: 100%; height: auto; }

/* Card lift on hover for post/service grids -- static flat cards read as an
   unfinished template; a subtle lift+shadow on hover signals "designed". */
.owb-post-grid > * {
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.owb-post-grid > *:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.5);
}

/* ---- dark-theme harmonisation -------------------------------------------
   Several builder components hardcode a light palette (white cards, #f8fafc
   FAQ rows, slate-900 quotes, slate-500 labels). On the espresso background
   they'd read as bright rectangles / invisible text, so they're re-tinted
   here rather than per-instance. */
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: .14em; font-size: .78rem !important;
  font-weight: 600 !important; opacity: .95;
}
.owb-faq details {
  background: #1e1a16 !important; border-color: rgba(201,162,75,.22) !important; color: #e7e2da;
}
.owb-faq summary { color: #f2ede4 !important; }
.owb-faq details p, .owb-faq details div { color: #c9c0b4 !important; }
.owb-card { background: #1e1a16 !important; border-color: rgba(201,162,75,.2) !important; color: #e7e2da; }
blockquote { border-left-color: #c9a24b !important; color: #e7e2da !important; background: rgba(201,162,75,.06); border-radius: .5rem; }
blockquote cite { color: #a89e90 !important; }
.owb-post-grid a, .owb-post-grid h3 { color: #f2ede4 !important; }
.owb-post-grid > * { background: #1e1a16 !important; border-color: rgba(201,162,75,.18) !important; }
section[style*="background"] table { color: #e7e2da; }
.owb-section img { border-radius: .75rem; }
.owb-section .owb-logo-cloud img, .owb-section img[style*="border-radius:50%"] { border-radius: 50%; }