/* =============================================================
   EDITORIAL THEME TOKENS
   Activated by html[data-style="editorial"]
   Both dark (default) and light variants included.
   Palette sourced directly from veriroo.com landing page.
   ============================================================= */

@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');


/* ---- Editorial dark (default) ---- */
html[data-style="editorial"] {
  --vr-primary:        #C4A050;
  --vr-primary-hover:  #a8893e;
  --vr-accent:         #C4A050;
  --vr-accent-teal:    #C4A050;
  --vr-accent-soft:    rgba(196,160,80,0.14);
  --vr-teal:           #C4A050;

  --vr-bg:                   #0e0d0b;
  --vr-bg-soft:              #141310;
  --vr-surface:              rgba(31,29,25,0.96);
  --vr-surface-raised:       rgba(37,35,30,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(196,160,80,0.06);
  --vr-card:                 #1f1d19;
  --vr-thumb-bg:             rgba(196,160,80,0.08);

  --vr-text:           #f2ede4;
  --vr-text-muted:     rgba(242,237,228,0.55);
  --vr-text-faint:     rgba(242,237,228,0.30);
  --vr-muted:          rgba(242,237,228,0.55);

  --vr-border:         rgba(255,255,255,0.07);
  --vr-border-strong:  rgba(255,255,255,0.14);

  --vr-kicker:         #C4A050;
  --vr-kicker-light:   #a8893e;

  --vr-danger:         #e05252;
  --vr-danger-bg:      rgba(224,82,82,0.10);
  --vr-success:        #6aaf7e;
  --vr-success-bg:     rgba(106,175,126,0.10);
  --vr-warning:        #C4A050;
  --vr-warning-bg:     rgba(196,160,80,0.10);
  --vr-warn:           #C4A050;
  --vr-link:           #C4A050;

  --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(196,160,80,0.65);
  --vr-control-text:         rgba(242,237,228,0.92);
  --vr-control-placeholder:  rgba(242,237,228,0.35);

  --vr-overlay:     rgba(0,0,0,0.60);
  --vr-tray-bg:     rgba(20,19,16,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;
}


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

  --vr-primary:        #8a6a1e;
  --vr-primary-hover:  #6e5318;
  --vr-accent:         #8a6a1e;
  --vr-accent-soft:    rgba(138,106,30,0.10);
  --vr-accent-teal:    #8a6a1e;
  --vr-teal:           #8a6a1e;

  --vr-bg:                   #f5f0e8;
  --vr-bg-soft:              #faf7f2;
  --vr-surface:              #faf7f2;
  --vr-surface-raised:       #ffffff;
  --vr-surface-subtle:       rgba(26,18,8,0.04);
  --vr-surface-subtle-hover: rgba(26,18,8,0.08);
  --vr-surface-warm:         rgba(196,160,80,0.07);
  --vr-card:                 #ffffff;
  --vr-card2:                rgba(255,255,255,0.85);
  --vr-thumb-bg:             #ede8df;

  --vr-text:           #1a1208;
  --vr-text-muted:     #6b5e4a;
  --vr-text-faint:     #9a8a76;
  --vr-muted:          rgba(26,18,8,0.55);

  --vr-border:         rgba(26,18,8,0.10);
  --vr-border-strong:  rgba(26,18,8,0.20);

  --vr-kicker:         #8a6a1e;

  --vr-danger:         #b43030;
  --vr-danger-bg:      rgba(180,48,48,0.08);
  --vr-success:        #2e6e42;
  --vr-success-bg:     rgba(46,110,66,0.08);
  --vr-warning:        #8a6a1e;
  --vr-warning-bg:     rgba(138,106,30,0.10);
  --vr-warn:           #8a6a1e;
  --vr-link:           #8a6a1e;

  --vr-shadow-xs: 0 1px 2px rgba(26,18,8,0.06);
  --vr-shadow-sm: 0 1px 3px rgba(26,18,8,0.05), 0 4px 14px rgba(26,18,8,0.07);
  --vr-shadow-md: 0 2px 8px rgba(26,18,8,0.07), 0 8px 28px rgba(26,18,8,0.10);
  --vr-shadow-lg: 0 8px 24px rgba(26,18,8,0.10), 0 24px 56px rgba(26,18,8,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(26,18,8,0.14);
  --vr-control-border-focus: rgba(138,106,30,0.60);
  --vr-control-text:         rgba(26,18,8,0.90);
  --vr-control-placeholder:  rgba(26,18,8,0.38);

  --vr-overlay:     rgba(26,18,8,0.28);
  --vr-tray-bg:     rgba(250,247,242,0.98);
  --vr-tray-border: rgba(26,18,8,0.10);
}


/* ---- Editorial 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: #0e0d0b;
}

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

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


/* ---- Editorial 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-accent);
  border-color: transparent;
  color: #0e0d0b;
}

html[data-style="editorial"]:not([data-theme="light"]) .vr-header {
  background: linear-gradient(to bottom, rgba(14,13,11,0.98), rgba(14,13,11,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(245,240,232,0.98), rgba(245,240,232,0.94), transparent);
  border-bottom: 1px solid rgba(26,18,8,0.08);
}

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


/* ============================================================
   EDITORIAL 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 editorial palette + sharp radius.
   ============================================================ */

/* --- Editorial 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(242,237,228,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(242,237,228,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(196,160,80,0.70) !important;
  box-shadow: 0 0 0 3px rgba(196,160,80,0.18), 0 6px 18px rgba(0,0,0,0.55) !important;
}

/* --- Editorial 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: #faf7f2 !important;
  border-color: rgba(26,18,8,0.14) !important;
  color: rgba(26,18,8,0.90) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(26,18,8,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(26,18,8,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(138,106,30,0.65) !important;
  box-shadow: 0 0 0 3px rgba(138,106,30,0.14), 0 1px 3px rgba(26,18,8,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(242,237,228,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: #faf7f2 !important;
  border-color: rgba(26,18,8,0.14) !important;
  color: rgba(26,18,8,0.90) !important;
  border-radius: 6px !important;
}


/* ---- Editorial 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: #f2ede4 !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: #1f1d19 !important;
  color: #f2ede4 !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(196,160,80,0.65) !important;
  box-shadow: 0 0 0 3px rgba(196,160,80,0.18) !important;
}

/* Editorial 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: #faf7f2 !important;
  color: #1a1208 !important;
  border-color: rgba(26,18,8,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: #faf7f2 !important;
  color: #1a1208 !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(138,106,30,0.60) !important;
  box-shadow: 0 0 0 3px rgba(138,106,30,0.14) !important;
}


/* ============================================================
   STYLE SWITCHER — desktop header (.vr-style-switch)
   ============================================================ */
.vr-style-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--vr-border);
  background: var(--vr-surface-subtle);
}

.vr-style-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--vr-muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.vr-style-btn:hover {
  color: var(--vr-text);
}

.vr-style-btn.is-active,
.vr-style-btn[aria-pressed="true"] {
  background: var(--vr-bg-soft);
  color: var(--vr-text);
  box-shadow: var(--vr-shadow-xs);
}

html[data-theme="light"] .vr-style-switch {
  background: rgba(15,23,42,0.04);
  border-color: var(--vr-border);
}

html[data-theme="light"] .vr-style-btn.is-active,
html[data-theme="light"] .vr-style-btn[aria-pressed="true"] {
  background: #ffffff;
  color: var(--vr-text);
  box-shadow: var(--vr-shadow-xs);
}

html[data-style="editorial"] .vr-style-btn[aria-pressed="true"][data-style-switch="editorial"] {
  background: rgba(196,160,80,0.16);
  color: #C4A050;
}

/* Hide desktop style pill on small screens */
@media (max-width: 520px) {
  .vr-style-switch:not(.vr-style-switch--nav) {
    display: none;
  }
}

@media (max-width: 768px) {
  .vr-style-btn {
    padding: 4px 8px;
    font-size: 0.72rem;
  }
}


/* ============================================================
   APPEARANCE ROW — inside mobile nav (.vr-nav-appearance)
   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;
}

/* Larger touch targets in nav */
.vr-style-switch--nav .vr-style-btn {
  padding: 6px 14px;
  font-size: 0.82rem;
}

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