/*
Theme Name:   UnysonPlus Website
Theme URI:    https://github.com/UnysonPlus
Description:  Child theme of Unyson+ Theme for the unysonplus.com marketing site. Carries the
              UnysonPlus heritage palette (teal-green #00b295 + blue accent + cool grays) and the
              Josefin Sans / Montserrat / JetBrains Mono type system. Body styling is scoped under
              .entry-content; the header/footer/drawer chrome is namespaced .upw-* so it never
              collides with the parent's Bootstrap. Goal is a functional, editable backend, not a
              pixel-perfect clone of the static wireframe.
Template:     unysonplus-theme
Version:      0.0.48
Author:       jonmlas
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  unysonplus-website
*/

:root {
  /* Palette bridge — every brand token below reads from the Theme Settings → Color
     Presets that the plugin emits as var(--color-*). Edit a preset in the admin and the
     whole site (chrome + content) re-themes. The hex after each comma is a safety
     fallback that preserves the brand if a preset is ever cleared. */
  --upw-green: var(--color-green, var(--color-primary, #00b295));
  --upw-green-deep: var(--color-green-deep, #1a8f74);
  --upw-blue: var(--color-blue, #2f74e6);
  --upw-blue-deep: var(--color-blue-deep, #2160c6);
  --upw-ink: var(--color-ink, #1c1e22);
  --upw-ink-soft: var(--color-body, #5f6266);
  --upw-line: var(--color-line, #e7e8e9);
  --upw-surface: var(--color-surface, #f5f5f5);
  --upw-dark: var(--color-dark, #1c1e22);
  --upw-dark-2: #14161a;  /* darker-than-dark footer shade; no preset counterpart */
  --upw-on-dark: #ececec; --upw-on-dark-soft: #b6bcbf;
  /* Type from Theme Settings → Typography (var(--font-heading/-body)); brand fallback */
  --upw-display: var(--font-heading, "Josefin Sans", system-ui, sans-serif);
  --upw-body: var(--font-body, "Montserrat", system-ui, -apple-system, sans-serif);
  --upw-mono: "JetBrains Mono", ui-monospace, monospace;
  /* non-prefixed aliases so carried wireframe mockup HTML (var(--bg) etc.) renders */
  --bg: var(--color-white, #fff); --surface: var(--upw-surface); --surface-2: #eceef0; --ink: var(--upw-ink);
  --ink-soft: var(--upw-ink-soft); --line: var(--upw-line); --green: var(--upw-green);
  --green-deep: var(--upw-green-deep); --gold: var(--upw-green); --gold-deep: var(--upw-green-deep);
  --blue: var(--upw-blue); --blue-deep: var(--upw-blue-deep); --dark: var(--upw-dark);
}

/* ============================================================
   BODY (page-builder content) — scoped under .entry-content (G12)
   ============================================================ */
.entry-content { font-family: var(--upw-body); color: var(--upw-ink); font-size: 17px; line-height: 1.65; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5,
.entry-content .h1, .entry-content .h2, .entry-content .h3, .entry-content .h4 {
  font-family: var(--upw-display); font-weight: 700; color: var(--upw-ink); line-height: 1.1; letter-spacing: -0.01em;
}
.entry-content p { color: var(--upw-ink-soft); }
/* Prose links only — scope to <a> inside paragraphs/list items (and unclassed)
   so this never overrides buttons (.btn-primary/.btn-blue/…) or other classed
   links inside the builder content, which all live in .entry-content. */
.entry-content :is(p, li) a:not([class]) { color: var(--upw-blue-deep); }
.entry-content .lead, .entry-content .font-lead { font-size: 1.25rem; color: var(--upw-ink-soft); line-height: 1.55; }

/* section rhythm + alternating bands (sections carry our css_class) */
.entry-content .upw-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.entry-content .upw-band-surface { background: var(--upw-surface); }
.entry-content .upw-band-dark { background: var(--upw-dark); color: var(--upw-on-dark); }
.entry-content .upw-band-dark h1, .entry-content .upw-band-dark h2,
.entry-content .upw-band-dark h3, .entry-content .upw-band-dark h4 { color: #fff; }
.entry-content .upw-band-dark p, .entry-content .upw-band-dark .lead { color: var(--upw-on-dark-soft); }

/* special_heading overline bridge - recolour ONLY; never set display here (the shortcode uses display:flex + justify-content to center the overline, so display:inline-block disables center alignment) */
.entry-content .heading-overline, .entry-content .fw-special-heading .overline {
  color: var(--upw-green-deep); font-family: var(--upw-body); font-weight: 600;
  letter-spacing: 0.12em; margin-bottom: .75rem;
}
.entry-content .upw-band-dark .heading-overline { color: var(--upw-green); }

/* buttons: tint the builder's primary button to brand green; keep Bootstrap structure */

/* icon_box accent */
.entry-content .icon-box .ti-ic, .entry-content .icon-box svg { color: var(--upw-green-deep); }

/* stat / counter blocks carried via code_block */
.entry-content .upw-stat { text-align: left; }
.entry-content .upw-stat .num { font-family: var(--upw-display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); color: var(--upw-green-deep); line-height: 1; }
.entry-content .upw-band-dark .upw-stat .num { color: var(--upw-green); }
.entry-content .upw-stat .label { color: var(--upw-ink-soft); font-weight: 500; margin-top: .4rem; display: block; }
.entry-content .upw-band-dark .upw-stat .label { color: var(--upw-on-dark-soft); }

/* animated counter (native `counter` shortcode) — brand number styling */
.entry-content .fw-counter__value { font-family: var(--upw-display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); color: var(--upw-green-deep); line-height: 1; }
.entry-content .upw-band-dark .fw-counter__value { color: var(--upw-green); }
/* stats use native 1/5 columns (fw-col-sm-15 = 20% each); just center their content */
.entry-content .upw-stats .upw-statcol { text-align: center; padding: .6rem; }

/* simple mockup frame carried in code_block (decorative, no fidelity required) */
.entry-content .upw-frame { border: 1px solid var(--upw-line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(20,22,26,.08); }
.entry-content .upw-frame .bar { display: flex; gap: .4rem; padding: .6rem .9rem; background: #eceef0; border-bottom: 1px solid var(--upw-line); }
.entry-content .upw-frame .bar span { width: 10px; height: 10px; border-radius: 50%; background: #cfd3d7; }
.entry-content .upw-frame .body { padding: 1rem; color: var(--upw-ink-soft); font-family: var(--upw-mono); font-size: .85rem; }
.entry-content .upw-pill { display: inline-block; border: 1px solid var(--upw-line); border-radius: 999px !important; padding: .3rem .8rem; font-size: .8rem; font-weight: 600; color: var(--upw-ink-soft); }
.entry-content .upw-tag { font-family: var(--upw-mono); font-size: .82rem; color: var(--upw-blue-deep); background: rgba(47,116,230,.1); padding: .15rem .5rem; border-radius: 6px; }
.entry-content .lead { font-size: clamp(1.05rem,1rem+.4vw,1.3rem); color: var(--upw-ink-soft); line-height: 1.55; }
.entry-content .upw-band-dark .lead, .entry-content .upw-band-dark p { color: var(--upw-on-dark-soft); }

/* ---- Rich faux-UI mockups ("images"), ported from the wireframe, scoped to content ---- */
.entry-content .mockup { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); box-shadow: 0 24px 60px rgba(20,22,26,.18), 0 6px 18px rgba(20,22,26,.10); }
.entry-content .mockup-bar { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.entry-content .mockup-dots { display: flex; gap: .4rem; }
.entry-content .mockup-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.entry-content .mockup-dots span:nth-child(1){ background: #e0746a; }
.entry-content .mockup-dots span:nth-child(2){ background: #e6c34d; }
.entry-content .mockup-dots span:nth-child(3){ background: var(--green); }
.entry-content .mockup-url { flex: 1; font-family: var(--upw-mono); font-size: .76rem; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: .3rem .7rem; text-align: center; }
.entry-content .builder { display: grid; grid-template-columns: 160px 1fr; min-height: 320px; background: var(--bg); font-size: .78rem; }
.entry-content .builder-panel { background: var(--surface); border-right: 1px solid var(--line); padding: .85rem; display: flex; flex-direction: column; gap: .45rem; }
.entry-content .builder-panel .pt { font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: .2rem; }
.entry-content .el-chip { display: flex; align-items: center; gap: .5rem; padding: .42rem .55rem; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.entry-content .el-chip .gr { width: 16px; height: 16px; border-radius: 5px; background: rgba(0,178,149,.2); display: grid; place-items: center; color: var(--green-deep); font-size: .7rem; }
.entry-content .el-chip.dragging { border-color: var(--green); box-shadow: 0 1px 6px rgba(0,178,149,.25); }
.entry-content .el-chip .ck { width: 16px; height: 16px; border-radius: 50%; background: rgba(0,178,149,.18); color: var(--green-deep); display: grid; place-items: center; }
.entry-content .el-chip .ck svg { width: 11px; height: 11px; }
.entry-content .builder-canvas { padding: 1rem; display: flex; flex-direction: column; gap: .65rem; background: linear-gradient(var(--surface) 1px, transparent 1px) 0 0 / 100% 28px; }
.entry-content .bk-row { display: grid; gap: .65rem; }
.entry-content .bk-row.c2 { grid-template-columns: 1fr 1fr; }
.entry-content .bk-row.c3 { grid-template-columns: repeat(3,1fr); }
.entry-content .bk-block { border: 1px dashed var(--line); border-radius: 8px; background: var(--surface); padding: .7rem; min-height: 40px; display: flex; flex-direction: column; gap: .4rem; position: relative; }
.entry-content .bk-block.active { border: 1.5px solid var(--green); background: rgba(0,178,149,.06); }
.entry-content .bk-block .lab { position: absolute; top: -.55rem; left: .5rem; font-size: .6rem; font-family: var(--upw-mono); background: var(--green); color: #10231d; padding: 0 .35rem; border-radius: 4px; font-weight: 600; }
.entry-content .bk-line { height: 8px; border-radius: 4px; background: var(--line); }
.entry-content .bk-line.w70 { width: 70%; } .entry-content .bk-line.w50 { width: 50%; } .entry-content .bk-line.w90 { width: 90%; }
.entry-content .bk-img { height: 52px; border-radius: 6px; background: linear-gradient(135deg, rgba(0,178,149,.35), rgba(47,116,230,.25)); }
.entry-content .bk-btn { width: 78px; height: 22px; border-radius: 999px !important; background: var(--green); }
.entry-content .drop-hint { border: 1.5px dashed var(--green); border-radius: 8px; padding: .5rem; text-align: center; color: var(--green-deep); font-family: var(--upw-mono); font-size: .68rem; background: rgba(0,178,149,.06); }
.entry-content .mk-pad { padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem; background: var(--bg); }

/* ---- Comparison table (code_block) ---- */
.entry-content .compare { width: 100%; border-collapse: collapse; font-family: var(--upw-body); font-size: .97rem; }
.entry-content .compare th, .entry-content .compare td { padding: .9rem 1.05rem; text-align: left; border-bottom: 1px solid var(--line); }
.entry-content .compare thead th { font-family: var(--upw-display); font-size: 1.05rem; }
.entry-content .compare .col-us { background: rgba(0,178,149,.09); font-weight: 600; }
.entry-content .compare thead .col-us { background: rgba(0,178,149,.16); }
.entry-content .compare .yes { color: var(--green-deep); font-weight: 700; }
.entry-content .compare .no { color: var(--ink-soft); }

/* feature checklists now use the plugin's fw-list-* classes (Shortcodes → editor.css) */

/* ============================================================
   CHROME — header / footer / drawer (GLOBAL, namespaced .upw-*)
   ============================================================ */
.upw-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 2.5rem); }

#masthead.upw-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--upw-line); }
.upw-header .upw-nav { display: flex; align-items: center; gap: 2.5rem; height: 72px; }

/* brand */
.upw-brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--upw-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.01em; color: var(--upw-ink); text-decoration: none; white-space: nowrap; }
.upw-brand:hover { text-decoration: none; }
.upw-brand-mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--upw-ink); color: var(--upw-green); font-weight: 700; font-size: 1.05rem; box-shadow: 0 2px 8px rgba(0,178,149,.25); }
.upw-plus { color: var(--upw-green-deep); margin-left: -.1rem; }

/* primary menu — flat, no bullets, hover/active underline */
.upw-nav-links { display: flex; align-items: center; }
.upw-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .2rem; }
.upw-menu li { list-style: none; position: relative; }
.upw-menu a { display: inline-block; font-family: var(--upw-body); font-weight: 500; font-size: .94rem; color: var(--upw-ink-soft); text-decoration: none; padding: .5rem .7rem; border-radius: 8px; transition: color .18s ease, background .18s ease; }
.upw-menu a::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .28rem; height: 2px; border-radius: 2px; background: var(--upw-green); transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.22,1,.36,1); }
.upw-menu a:hover { color: var(--upw-ink); text-decoration: none; }
.upw-menu a:hover::after { transform: scaleX(1); }
.upw-menu .current-menu-item > a, .upw-menu .current_page_item > a { color: var(--upw-green-deep); font-weight: 600; }
.upw-menu .current-menu-item > a::after, .upw-menu .current_page_item > a::after { transform: scaleX(1); }

/* CTA cluster */
.upw-nav-cta { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.upw-btn { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--upw-body); font-weight: 600; font-size: .92rem; line-height: 1; padding: .68rem 1.25rem; border-radius: 999px !important; background: var(--upw-green); color: #0e231d; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.upw-btn:hover { background: var(--upw-green-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,178,149,.3); text-decoration: none; }
.upw-btn-outline { background: transparent; color: var(--upw-ink); border-color: var(--upw-line); box-shadow: none; }
.upw-btn-outline:hover { background: var(--upw-ink); color: #fff; box-shadow: none; }
.upw-nav-toggle { display: none; background: none; border: 0; cursor: pointer; color: var(--upw-ink); padding: .3rem; line-height: 0; }

@media (max-width: 992px) {
  .upw-nav-links, .upw-nav-cta .upw-btn-outline { display: none; }
  .upw-nav-toggle { display: inline-flex; }
  .upw-header .upw-nav { height: 64px; gap: 1rem; }
}

.upw-drawer { position: fixed; inset: 0; z-index: 200; display: none; }
.upw-drawer[data-open="true"] { display: block; }
.upw-drawer-scrim { position: absolute; inset: 0; background: rgba(20,22,26,.5); }
.upw-drawer-panel { position: absolute; right: 0; top: 0; height: 100%; width: min(82vw, 330px); background: #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: .3rem; box-shadow: -10px 0 40px rgba(0,0,0,.2); }
.upw-drawer-panel a { color: var(--upw-ink); font-family: var(--upw-body); font-weight: 600; padding: .65rem 0; border-bottom: 1px solid var(--upw-line); text-decoration: none; }
.upw-drawer-close { align-self: flex-end; background: none; border: 0; cursor: pointer; color: var(--upw-ink); }

#colophon { background: var(--upw-dark-2); }
.upw-footer { padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; color: var(--upw-on-dark-soft); font-family: var(--upw-body); }
.upw-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.2rem; }
.upw-footer .upw-brand { color: #fff; }
.upw-footer-about p { font-size: .94rem; margin: 1rem 0 1.2rem; max-width: 30ch; }
.upw-footer-col h5 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; margin-bottom: .9rem; }
.upw-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.upw-footer-col a, .upw-footer-about a:not(.upw-btn) { color: var(--upw-on-dark-soft); font-size: .93rem; text-decoration: none; }
.upw-footer-col a:hover { color: var(--upw-green); }
.upw-footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .86rem; }
@media (max-width: 860px) { .upw-footer-grid { grid-template-columns: 1fr 1fr; } .upw-footer-about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .upw-footer-grid { grid-template-columns: 1fr; } }
/* Real builder screenshots inside the browser-chrome mockup frame */
.entry-content .mockup .mk-shot { display: block; width: 100%; height: auto; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

/* ===== Chrome CTAs (.upw-btn) — gradient pill + arrow. Page .btn-* CTAs get theirs ===== */
/* natively from the Button Presets (Component Presets → Buttons, via import-button-presets.php). */
.upw-btn:not(.upw-btn-outline) {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; color: #fff; border-radius: 999px;
  background-image: linear-gradient(135deg, var(--upw-green-deep) 0%, var(--upw-green) 100%);
  box-shadow: 0 8px 20px -7px rgba(13,24,26,.45);
}
.upw-btn:not(.upw-btn-outline):hover {
  color: #fff; transform: translateY(-1px); filter: brightness(1.05) saturate(1.05);
  box-shadow: 0 12px 26px -7px rgba(13,24,26,.5);
}
.upw-btn:not(.upw-btn-outline)::after {
  content: "\276F"; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 1.5em; height: 1.5em; margin-left: .55em;
  border-radius: 50%; border: 1.6px solid rgba(255,255,255,.85); font-size: .62em; line-height: 1;
}

/* ===== Real-screenshot mockups: drop the chrome bar, keep a clean framed card ===== */
.entry-content .mockup--shot .mockup-bar, .entry-content .mockup:has(.mk-shot) .mockup-bar { display: none; }
.entry-content .mockup--shot .mk-shot, .entry-content .mockup:has(.mk-shot) .mk-shot { border-radius: inherit; }
/* Page CTA arrow now comes from the Button element's native Icon option (fa-solid fa-arrow-right,
   position After) — set in the page builder, editable per button. No child-CSS chevron. */
/* features — by-the-numbers strip */
.entry-content .upw-stats4 { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(1.6rem, 5vw, 4.5rem); text-align: center; }
.entry-content .upw-stat4 { display: flex; flex-direction: column; gap: .15rem; }
.entry-content .upw-stat4 .n { font-family: var(--upw-display); font-weight: 700; font-size: clamp(2.6rem, 2rem + 3vw, 4rem); line-height: 1; color: var(--upw-green-deep); }
.entry-content .upw-stat4 .l { font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--upw-ink-soft); }
/* centered pill row (page-builder elements teaser) */
.entry-content .upw-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.2rem auto 1.6rem; padding: 0; }
/* Global Templates faux-UI (page-builder "build once, reuse everywhere" visual) */
.entry-content .el-chip.is-global { border-color: rgba(139,92,246,.45); }
.entry-content .el-chip .gdot { width: 16px; height: 16px; border-radius: 50%; background: rgba(139,92,246,.18); position: relative; flex: 0 0 auto; }
.entry-content .el-chip .gdot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #8b5cf6; }
.entry-content .upw-badge-global { font-family: var(--upw-mono); font-size: .6rem; font-weight: 700; letter-spacing: .08em; color: #6d28d9; background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.3); padding: .1rem .4rem; border-radius: 5px; margin-left: .5rem; }
.entry-content .el-chip .g-edit { margin-left: auto; font-family: var(--upw-mono); font-size: .68rem; color: var(--ink-soft); }
.entry-content .mk-pad .g-sync { margin-top: .3rem; text-align: center; font-family: var(--upw-mono); font-size: .72rem; color: #6d28d9; background: rgba(139,92,246,.08); border: 1px dashed rgba(139,92,246,.35); border-radius: 8px; padding: .55rem; }
/* elements page — vertical separation between the full-library category blocks (overlines were
   touching the tags of the block above in the 2-column grid) */
.entry-content .upw-elcat-col { margin-bottom: 2.75rem; }

/* Full-width header: logo left · nav centered · CTA right (3-column grid; no transform on
   .upw-nav-links so it never traps the position:fixed mega-menu panel). */
@media (min-width: 993px) {
  .upw-header .upw-nav { display: grid; grid-template-columns: 1fr auto 1fr; }
  .upw-brand { justify-self: start; }
  .upw-nav-links { position: static; transform: none; justify-self: center; }
  .upw-nav-cta { justify-self: end; margin-left: 0; }
}

/* ============================================================
   Fixed dark full-width header + full-bleed hero — match the
   demos hub (localhost/demos/). The default light, 1200px-capped
   sticky bar hid the white SVG logo on a white background; this
   makes the header a full-width dark translucent FIXED bar with
   the white logo + light nav, and drops the hero photo behind it.
   ============================================================ */
:root { --upw-header-h: 72px; }
body { padding-top: 0; } /* TS header is sticky/in-flow; old fixed-header padding removed */
body.admin-bar #masthead.upw-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar #masthead.upw-header { top: 46px; } }

#masthead.upw-header {
  position: fixed; left: 0; right: 0; top: 0; width: 100%;
  background: rgba(16,18,22,.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
/* full-width: drop the 1200px .upw-wrap cap for the header bar only */
#masthead.upw-header .upw-nav { max-width: none; }
#masthead.upw-header .upw-menu a { color: rgba(255,255,255,.82); }
#masthead.upw-header .upw-menu a:hover,
#masthead.upw-header .upw-menu .current-menu-item > a,
#masthead.upw-header .upw-menu .current_page_item > a { color: #fff; }
#masthead.upw-header .upw-nav-toggle { color: #fff; }
#masthead.upw-header .upw-btn-outline { color: #fff; border-color: rgba(255,255,255,.35); }
#masthead.upw-header .upw-btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Header background (the black translucent glass) is set via Theme Settings → Header → Main Header
   Background (#14161a) + Glass = on — no CSS override needed here. */

/* Primary button hover — a clear lift + soft green shadow. The preset darkens the gradient on hover,
   but that reads too subtly on its own, so add the motion cue here (applies to header CTA + body buttons;
   the .upw-cta band button keeps its own white-outline hover via a more specific rule above). */
.btn.btn-primary { transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background-image .2s ease, background-color .2s ease; }
.btn.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(0,178,149,.55); }

@media (max-width: 992px) { :root { --upw-header-h: 64px; } }

/* Front-page hero: full-bleed photo. (The old margin-top:-header-h overlay hack was for the
   retired FIXED header; the TS header is a sticky in-flow bar, so the hero is a normal section.) */
.entry-content .upw-hero {
  padding-top: clamp(3rem, 7vw, 6rem);
  background-image: linear-gradient(rgba(13,24,26,.55), rgba(13,24,26,.74)), url("images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Logo sizing — the SVG's intrinsic size is large (723×166); cap it like demos
   so the header/footer logo render at 40px instead of filling the bar. */
#masthead.upw-header .upw-brand-logo,
.upw-footer .upw-footer-logo,
.upw-footer .upw-brand-logo { height: 40px; width: auto; max-width: none; }

/* Footer full width — drop the 1200px .upw-wrap cap inside the footer (match demos). */
.upw-footer .upw-wrap { max-width: none; }

/* ============================================================
   Theme-Settings chrome (Header + Footer) — replaces the retired custom
   template-parts/header-builder.php + footer-builder.php. Styles the NATIVE
   #masthead / .footer-section markup to the marketing dark design.
   ============================================================ */
#masthead .header-main > [class*="fw-container"] { max-width: 100% !important; padding-left: clamp(1.5rem,3.5vw,3rem); padding-right: clamp(1.5rem,3.5vw,3rem); }
#masthead .site-description { display: none; }
#masthead .site-logo, #masthead .custom-logo, #masthead .site-title img { height: 40px; width: auto; }
#masthead .primary-menu > li > a { color: rgba(255,255,255,.9) !important; text-decoration: none !important; font-weight: 700; }
#masthead .primary-menu > li > a:hover,
#masthead .primary-menu > li.current-menu-item > a,
#masthead .primary-menu > li.current_page_item > a,
#masthead .primary-menu > li.current-menu-ancestor > a { color: #fff !important; }
#masthead .primary-menu .sub-menu a, #masthead .primary-menu .mega-menu a { text-decoration: none; }
#masthead .header-col--end .btn { border-radius: 999px; font-weight: 600; }
#masthead .header-col--end .btn-primary-outline,
#masthead .header-col--end .btn-outline-primary { color: #fff !important; border-color: rgba(255,255,255,.35) !important; background: transparent !important; }
#masthead .header-col--end .btn-primary-outline:hover,
#masthead .header-col--end .btn-outline-primary:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
#colophon { background: var(--upw-dark-2); color: var(--upw-on-dark-soft); }
.footer-section--main-footer { padding: clamp(3rem,6vw,4.5rem) 0 1.75rem; }
.footer-section--main-footer .footer-element--text { font-family: var(--upw-body); }
.footer-brand-logo { display: inline-block; line-height: 0; }
.footer-brand-logo img { height: 40px; width: auto; }
.footer-brand-blurb { color: var(--upw-on-dark-soft); font-size: .93rem; line-height: 1.6; margin: 1.1rem 0 1.3rem; max-width: 34ch; }
.footer-col-title { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; margin: .35rem 0 .95rem; font-family: var(--upw-body); }
.footer-col-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer-col-links li { list-style: none; }
.footer-col-links a { color: var(--upw-on-dark-soft); font-size: .93rem; text-decoration: none; transition: color .16s ease; }
.footer-col-links a:hover { color: var(--upw-green); }
.footer-section--copyright { border-top: 1px solid rgba(255,255,255,.1); padding: 1.4rem 0; }
.footer-section--copyright .builder-text-element { color: var(--upw-on-dark-soft); font-size: .86rem; text-align: center; }
.footer-section--copyright .builder-text-element p { color: var(--upw-on-dark-soft); margin: 0; }

/* ============================================================
   Free / Open Source page — "struck-out paid-builder price -> $0" pricing block.
   ============================================================ */
.entry-content .upw-pricing-section { background: var(--upw-surface); }

/* CTA bands — brand gradient + subtle dot texture + standout white outline button.
   Matches the demos `sc-cta` look (localhost/demos). Overrides the plain .upw-band-dark. */
.entry-content .upw-cta {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(1100px 380px at 50% -15%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(135deg, #0a6f78 0%, var(--upw-green, #00b295) 55%, var(--upw-green-deep, #1a8f74) 100%);
  color: #fff;
}
.entry-content .upw-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.6px);
  background-size: 22px 22px;
}
.entry-content .upw-cta .fw-container { position: relative; z-index: 1; }
.entry-content .upw-cta .heading-title,
.entry-content .upw-cta h1, .entry-content .upw-cta h2, .entry-content .upw-cta h3 { color: #fff; }
.entry-content .upw-cta .heading-overline { color: rgba(255,255,255,.85); }
.entry-content .upw-cta p, .entry-content .upw-cta .lead { color: rgba(255,255,255,.9); }
/* CTA buttons = white outline (transparent bg, white border + text), with spacing from the copy. */
.entry-content .upw-cta .btn, .entry-content .upw-cta .btn-primary,
.entry-content .upw-cta .btn-blue, .entry-content .upw-cta .btn-secondary-outline {
  background: transparent !important; background-image: none !important;
  color: #fff !important; border: 1.5px solid #fff !important; font-weight: 700;
  padding: 1.05rem 2.5rem; border-radius: 999px; box-shadow: none !important; margin-top: 1.85rem;
  transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s ease, color .25s ease, border-color .25s ease;
}
.entry-content .upw-cta .btn:hover, .entry-content .upw-cta .btn-primary:hover,
.entry-content .upw-cta .btn-blue:hover, .entry-content .upw-cta .btn-secondary-outline:hover {
  transform: translateY(-2px); background: rgba(255,255,255,.15) !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important;
}

/* ============================================================
   Hero — more breathing room: generous vertical padding, vertically
   centered columns (balances the copy against the taller image), and
   a touch more rhythm between the copy blocks. Applies to all .upw-hero.
   ============================================================ */
/* The header is an ABSOLUTE overlay (~80px) sitting ON TOP of the hero, so the top padding must
   be larger by the header height for the VISIBLE top gap to match the bottom gap. */
.entry-content .upw-hero { padding-top: calc(clamp(3rem, 6vw, 5rem) + 80px); padding-bottom: clamp(3rem, 6vw, 5rem); }
@media (max-width: 991.98px) { .entry-content .upw-hero { padding-top: calc(clamp(3rem, 6vw, 5rem) + 66px); } }
.entry-content .upw-hero .fw-row { align-items: center; }
.entry-content .upw-hero .heading-overline { margin-bottom: 1rem; }
.entry-content .upw-hero .heading-title { margin-bottom: 1.5rem; }
.entry-content .upw-hero .lead { margin-top: 0; margin-bottom: 2.1rem; }
.entry-content .upw-hero .btn { margin-top: .25rem; }
.entry-content .upw-hero .btn ~ p { margin-top: 1.6rem; }
@media (max-width: 880px) { .entry-content .upw-hero .fw-row { row-gap: 2.5rem; } }

/* --- Footer spacing (marketing site) -----------------------------------------------
   Top padding is applied to the whole footer element (the --footer-pad-top route sits on
   .footer__body and gets eaten by margin-collapsing, so the gap never showed). The other
   rules kill the main-footer section's bottom margin — it otherwise tracks --footer-pad-top
   and blew the columns → copyright gap wide open — and give the copyright bar proper
   breathing room at the very bottom. */
.footer { padding-top: 3.5rem; }
.footer .footer__body { padding-top: 0 !important; }
/* The main-footer section carries a NEGATIVE margin-top (= -var(--footer-pad-top)) that cancelled
   every top-padding attempt; zero it so the footer's padding-top actually shows. Its bottom margin is
   zeroed too (it tracked --footer-pad-top and widened the columns → copyright gap). */
.footer .footer-section--main-footer { margin-top: 0 !important; margin-bottom: 0 !important; }
.footer .footer-section--copyright { padding-top: 1rem !important; padding-bottom: 2.25rem !important; }