/* =============================================================
   VERIROO BRAND THEME (formerly "editorial")
   Activated by html[data-style="editorial"] — now the ONLY style.
   Re-coloured from the prior gold palette to the app's green->blue
   "verify" identity (src/theme-tokens.ts). Selectors are unchanged
   from the original editorial sheet so specificity/layout are
   identical — only colour values changed. Dark is the default;
   light is opt-in via [data-theme="light"]. The Studio style and
   the style switcher have been retired.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;600&display=swap');


/* ---- Brand dark (default) ---- */
html[data-style="editorial"] {
  --vr-primary:        #46BD62;
  --vr-primary-hover:  #3DAE4E;
  --vr-accent:         #46BD62;
  --vr-accent-teal:    #52A6E6;
  --vr-accent-soft:    rgba(70,189,98,0.14);
  --vr-teal:           #52A6E6;

  --vr-gradient-brand: linear-gradient(135deg, #A4C83C 0%, #3DAE4E 45%, #1C6FA8 100%);

  --vr-bg:                   #0D1411;
  --vr-bg-soft:              #121A16;
  --vr-surface:              rgba(22,32,27,0.96);
  --vr-surface-raised:       rgba(31,42,35,0.98);
  --vr-surface-subtle:       rgba(255,255,255,0.04);
  --vr-surface-subtle-hover: rgba(255,255,255,0.07);
  --vr-surface-warm:         rgba(70,189,98,0.06);
  --vr-card:                 #16201B;
  --vr-thumb-bg:             rgba(70,189,98,0.08);

  --vr-text:           #EAF2EC;
  --vr-text-muted:     #93A39A;
  --vr-text-faint:     #62716A;
  --vr-muted:          #93A39A;

  --vr-border:         #26322B;
  --vr-border-strong:  rgba(255,255,255,0.14);

  --vr-kicker:         #46BD62;
  --vr-kicker-light:   #3DAE4E;

  --vr-danger:         #E05252;
  --vr-danger-bg:      rgba(224,82,82,0.10);
  --vr-success:        #5FC57C;
  --vr-success-bg:     rgba(95,197,124,0.10);
  --vr-warning:        #E0A23C;
  --vr-warning-bg:     rgba(224,162,60,0.10);
  --vr-warn:           #E0A23C;
  --vr-link:           #52A6E6;

  --vr-shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --vr-shadow-sm: 0 2px 8px rgba(0,0,0,0.50), 0 1px 2px rgba(0,0,0,0.30);
  --vr-shadow-md: 0 4px 16px rgba(0,0,0,0.60), 0 2px 6px rgba(0,0,0,0.35);
  --vr-shadow-lg: 0 12px 40px rgba(0,0,0,0.75), 0 4px 12px rgba(0,0,0,0.40);
  --vr-shadow-1:  var(--vr-shadow-sm);
  --vr-shadow-2:  var(--vr-shadow-md);

  --vr-radius-sm: 4px;
  --vr-radius-md: 6px;
  --vr-radius-lg: 8px;
  --vr-btn-radius: 4px;

  --vr-control-bg:           rgba(255,255,255,0.04);
  --vr-control-border:       rgba(255,255,255,0.12);
  --vr-control-border-focus: rgba(70,189,98,0.65);
  --vr-control-text:         rgba(234,242,236,0.92);
  --vr-control-placeholder:  rgba(234,242,236,0.35);

  --vr-overlay:     rgba(0,0,0,0.60);
  --vr-tray-bg:     rgba(13,20,17,0.96);
  --vr-tray-border: rgba(255,255,255,0.08);

  --vr-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --vr-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
}


/* ---- Brand light ---- */
html[data-style="editorial"][data-theme="light"] {
  color-scheme: light;

  --vr-primary:        #2E9E4F;
  --vr-primary-hover:  #257F40;
  --vr-accent:         #2E9E4F;
  --vr-accent-soft:    rgba(46,158,79,0.10);
  --vr-accent-teal:    #1C6FA8;
  --vr-teal:           #1C6FA8;

  --vr-bg:                   #F4F8F5;
  --vr-bg-soft:              #FBFDFB;
  --vr-surface:              #FBFDFB;
  --vr-surface-raised:       #FFFFFF;
  --vr-surface-subtle:       rgba(19,36,26,0.04);
  --vr-surface-subtle-hover: rgba(19,36,26,0.08);
  --vr-surface-warm:         rgba(46,158,79,0.07);
  --vr-card:                 #FFFFFF;
  --vr-card2:                rgba(255,255,255,0.85);
  --vr-thumb-bg:             #E8F1EB;

  --vr-text:           #13241A;
  --vr-text-muted:     #566B5E;
  --vr-text-faint:     #8A988F;
  --vr-muted:          rgba(19,36,26,0.55);

  --vr-border:         #D8E6DD;
  --vr-border-strong:  rgba(19,36,26,0.20);

  --vr-kicker:         #2E9E4F;

  --vr-danger:         #C0392B;
  --vr-danger-bg:      rgba(192,57,43,0.08);
  --vr-success:        #1E8E3E;
  --vr-success-bg:     rgba(30,142,62,0.08);
  --vr-warning:        #C07A12;
  --vr-warning-bg:     rgba(192,122,18,0.10);
  --vr-warn:           #C07A12;
  --vr-link:           #1C6FA8;

  --vr-shadow-xs: 0 1px 2px rgba(19,36,26,0.06);
  --vr-shadow-sm: 0 1px 3px rgba(19,36,26,0.05), 0 4px 14px rgba(19,36,26,0.07);
  --vr-shadow-md: 0 2px 8px rgba(19,36,26,0.07), 0 8px 28px rgba(19,36,26,0.10);
  --vr-shadow-lg: 0 8px 24px rgba(19,36,26,0.10), 0 24px 56px rgba(19,36,26,0.14);
  --vr-shadow-1:  var(--vr-shadow-sm);
  --vr-shadow-2:  var(--vr-shadow-md);

  --vr-control-bg:           rgba(255,255,255,0.92);
  --vr-control-border:       rgba(19,36,26,0.14);
  --vr-control-border-focus: rgba(46,158,79,0.60);
  --vr-control-text:         rgba(19,36,26,0.90);
  --vr-control-placeholder:  rgba(19,36,26,0.38);

  --vr-overlay:     rgba(19,36,26,0.28);
  --vr-tray-bg:     rgba(251,253,251,0.98);
  --vr-tray-border: rgba(19,36,26,0.10);
}


/* ---- Brand typography ---- */
html[data-style="editorial"] body {
  font-family: var(--vr-font-body, 'DM Sans', system-ui, sans-serif);
}

html[data-style="editorial"]:not([data-theme="light"]) body {
  background: #0D1411;
}

html[data-style="editorial"][data-theme="light"] body {
  background: #F4F8F5;
}

html[data-style="editorial"] h1,
html[data-style="editorial"] h2,
html[data-style="editorial"] h3,
html[data-style="editorial"] h4 {
  font-family: var(--vr-font-heading, 'Playfair Display', Georgia, serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

html[data-style="editorial"] h1 {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

html[data-style="editorial"] h2 {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}

html[data-style="editorial"] .vr-kicker,
html[data-style="editorial"] .vr-hero-kicker,
html[data-style="editorial"] .vr-section-kicker {
  font-family: var(--vr-font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vr-accent);
  font-weight: 500;
}

html[data-style="editorial"] .vr-logo {
  font-family: var(--vr-font-heading);
  font-weight: 400;
  letter-spacing: 0.02em;
}


/* ---- Brand surface overrides — sharp corners ---- */
html[data-style="editorial"] .vr-card,
html[data-style="editorial"] .vr-role-card,
html[data-style="editorial"] .vr-verify-card,
html[data-style="editorial"] .vr-hero-card,
html[data-style="editorial"] .vr-showcase-card,
html[data-style="editorial"] .mc-card,
html[data-style="editorial"] .vr-tray,
html[data-style="editorial"] .vr-tray-card,
html[data-style="editorial"] button.vr-tray-card,
html[data-style="editorial"] a.vr-tray-card {
  border-radius: 0;
}

html[data-style="editorial"] .vr-showcase-image-inner {
  border-radius: 0;
}

html[data-style="editorial"] .vr-btn,
html[data-style="editorial"] .vr-button,
html[data-style="editorial"] .vr-button-primary {
  border-radius: 2px;
}

html[data-style="editorial"] .vr-btn-primary,
html[data-style="editorial"] .vr-button-primary {
  background: var(--vr-gradient-brand);
  border-color: transparent;
  color: #06130A;
}

html[data-style="editorial"]:not([data-theme="light"]) .vr-header {
  background: linear-gradient(to bottom, rgba(13,20,17,0.98), rgba(13,20,17,0.92), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

html[data-style="editorial"][data-theme="light"] .vr-header {
  background: linear-gradient(to bottom, rgba(244,248,245,0.98), rgba(244,248,245,0.94), transparent);
  border-bottom: 1px solid rgba(19,36,26,0.08);
}

html[data-style="editorial"] :focus-visible {
  outline-color: var(--vr-accent);
}


/* ============================================================
   BRAND FORM CONTROLS — input & textarea
   site.css .vr-main input/textarea rules use hardcoded Studio
   blue tones (rgba(30,41,59)) that CSS vars can't override.
   These rules beat them with the brand palette + sharp radius.
   ============================================================ */

/* --- Dark: inputs & textareas --- */
html[data-style="editorial"]:not([data-theme="light"]) .vr-main input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
html[data-style="editorial"]:not([data-theme="light"]) .vr-main textarea {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(234,242,236,0.92) !important;
  border-radius: 6px !important;
}

html[data-style="editorial"]:not([data-theme="light"]) .vr-main input::placeholder,
html[data-style="editorial"]:not([data-theme="light"]) .vr-main textarea::placeholder {
  color: rgba(234,242,236,0.35) !important;
}

html[data-style="editorial"]:not([data-theme="light"]) .vr-main input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
html[data-style="editorial"]:not([data-theme="light"]) .vr-main textarea:focus {
  border-color: rgba(70,189,98,0.70) !important;
  box-shadow: 0 0 0 3px rgba(70,189,98,0.18), 0 6px 18px rgba(0,0,0,0.55) !important;
}

/* --- Light: inputs & textareas --- */
html[data-style="editorial"][data-theme="light"] .vr-main input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
html[data-style="editorial"][data-theme="light"] .vr-main textarea {
  background: #FBFDFB !important;
  border-color: rgba(19,36,26,0.14) !important;
  color: rgba(19,36,26,0.90) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(19,36,26,0.05) !important;
}

html[data-style="editorial"][data-theme="light"] .vr-main input::placeholder,
html[data-style="editorial"][data-theme="light"] .vr-main textarea::placeholder {
  color: rgba(19,36,26,0.38) !important;
}

html[data-style="editorial"][data-theme="light"] .vr-main input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
html[data-style="editorial"][data-theme="light"] .vr-main textarea:focus {
  border-color: rgba(46,158,79,0.65) !important;
  box-shadow: 0 0 0 3px rgba(46,158,79,0.14), 0 1px 3px rgba(19,36,26,0.05) !important;
}

/* Also fix the vr-form-profile inputs used on account page */
html[data-style="editorial"]:not([data-theme="light"]) .vr-form-profile .vr-form-field input[type="text"],
html[data-style="editorial"]:not([data-theme="light"]) .vr-form-profile .vr-form-field input[type="email"],
html[data-style="editorial"]:not([data-theme="light"]) .vr-form-profile .vr-form-field textarea {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(234,242,236,0.92) !important;
  border-radius: 6px !important;
}

html[data-style="editorial"][data-theme="light"] .vr-form-profile .vr-form-field input[type="text"],
html[data-style="editorial"][data-theme="light"] .vr-form-profile .vr-form-field input[type="email"],
html[data-style="editorial"][data-theme="light"] .vr-form-profile .vr-form-field textarea {
  background: #FBFDFB !important;
  border-color: rgba(19,36,26,0.14) !important;
  color: rgba(19,36,26,0.90) !important;
  border-radius: 6px !important;
}


/* ---- Brand select / dropdown colours ---- */
/* Override site.css which hardcodes Studio blue tones for selects */
html[data-style="editorial"]:not([data-theme="light"]) select,
html[data-style="editorial"]:not([data-theme="light"]) .vr-select,
html[data-style="editorial"]:not([data-theme="light"]) .field select,
html[data-style="editorial"]:not([data-theme="light"]) .vr-main select,
html[data-style="editorial"]:not([data-theme="light"]) .vr-upload-meta select {
  background: rgba(255,255,255,0.04) !important;
  color: #EAF2EC !important;
  border-color: rgba(255,255,255,0.12) !important;
  border-radius: 6px !important;
  color-scheme: dark;
}

html[data-style="editorial"]:not([data-theme="light"]) select option,
html[data-style="editorial"]:not([data-theme="light"]) .field select option {
  background-color: #16201B !important;
  color: #EAF2EC !important;
}

html[data-style="editorial"]:not([data-theme="light"]) select:focus,
html[data-style="editorial"]:not([data-theme="light"]) .vr-select:focus,
html[data-style="editorial"]:not([data-theme="light"]) .vr-main select:focus {
  border-color: rgba(70,189,98,0.65) !important;
  box-shadow: 0 0 0 3px rgba(70,189,98,0.18) !important;
}

/* Brand light select */
html[data-style="editorial"][data-theme="light"] select,
html[data-style="editorial"][data-theme="light"] .vr-select,
html[data-style="editorial"][data-theme="light"] .field select,
html[data-style="editorial"][data-theme="light"] .vr-main select,
html[data-style="editorial"][data-theme="light"] .vr-upload-meta select {
  background: #FBFDFB !important;
  color: #13241A !important;
  border-color: rgba(19,36,26,0.14) !important;
  border-radius: 6px !important;
  color-scheme: light;
}

html[data-style="editorial"][data-theme="light"] select option,
html[data-style="editorial"][data-theme="light"] .field select option {
  background-color: #FBFDFB !important;
  color: #13241A !important;
}

html[data-style="editorial"][data-theme="light"] select:focus,
html[data-style="editorial"][data-theme="light"] .vr-select:focus,
html[data-style="editorial"][data-theme="light"] .vr-main select:focus {
  border-color: rgba(46,158,79,0.60) !important;
  box-shadow: 0 0 0 3px rgba(46,158,79,0.14) !important;
}


/* ============================================================
   APPEARANCE ROW — inside mobile nav (.vr-nav-appearance)
   Holds the light/dark mode toggle on mobile. (The Studio/
   Editorial style switcher has been removed from the markup.)
   Visible only when hamburger menu is open on mobile.
   Hidden on desktop (>768px).
   ============================================================ */
.vr-nav-appearance {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 1.1rem 8px;
  border-top: 1px solid var(--vr-border);
  margin-top: 4px;
  flex-wrap: wrap;
}

.vr-nav-appearance-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.55;
  white-space: nowrap;
}

/* Nav theme toggle */
.vr-theme-toggle--nav {
  border-radius: 999px;
  border: 1px solid var(--vr-border);
  background: var(--vr-surface-subtle);
  color: var(--vr-text);
  padding: 6px 10px;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}

/* Mobile: show appearance row when nav open;
   hide ONLY the header-bar toggle (.vr-theme-toggle--header),
   NOT the nav toggle (.vr-theme-toggle--nav) */
@media (max-width: 768px) {
  body[data-nav-open="true"] .vr-nav-appearance {
    display: flex;
  }

  .vr-theme-toggle--header {
    display: none;
  }
}