/**
 * Yoga Studio Edition — "Studio Journal"
 *
 * Aesthetic direction: a boutique studio's printed timetable. Warm ivory paper, ink type,
 * a high-contrast serif display face, hairline rules, and one plum accent used sparingly.
 * Deliberately not SaaS: no rounded gradient blobs, no evenly-distributed colour, no drop
 * shadows doing the work that typography and white space should do.
 *
 * Everything is scoped to [data-customer="yoga"], so the default and EMS sites are untouched.
 * The selector matches the LOWERCASED data-customer attribute written by _Layout.cshtml —
 * CSS compares attribute values case-sensitively and the raw header value is "Yoga".
 *
 * Tradeoff: the display face is pulled with @import rather than a <link> in the shared layout,
 * which costs one extra round-trip on this tenant only. The layout already preconnects to
 * fonts.googleapis.com / fonts.gstatic.com, which covers most of it.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,0..100,0..1;1,9..144,300..700,0..100,0..1&display=swap');

/* ===================================================================
   1. Tokens
   =================================================================== */

[data-theme="light"][data-customer="yoga"] {
  /* Paper and ink */
  --yg-paper: #FBF6EF;
  --yg-paper-2: #F3EADF;
  --yg-card: #FFFDFA;
  --yg-ink: #221C24;
  --yg-ink-soft: #5F5665;
  --yg-line: rgba(34, 28, 36, 0.14);
  --yg-line-strong: rgba(34, 28, 36, 0.34);

  /* One accent, used sparingly, plus a warm secondary for decoration only */
  --yg-plum: #6D4C7D;
  --yg-plum-deep: #4A2F57;
  --yg-clay: #B4795F;

  /* Mapped onto the base design system */
  --font-heading: 'Fraunces', 'Iowan Old Style', Georgia, serif;

  --color-brand-primary: var(--yg-plum);
  --color-brand-primary-hover: var(--yg-plum-deep);
  --color-brand-deep-1: var(--yg-plum);
  --color-brand-deep-2: var(--yg-plum-deep);
  --color-brand-deep-3: #3A2445;

  --color-text-primary: var(--yg-ink);
  --color-text-secondary: var(--yg-ink-soft);
  --color-text-tertiary: #8C8391;

  --color-bg-primary: var(--yg-paper);
  --color-bg-secondary: var(--yg-paper-2);
  --color-bg-tertiary: #F8F1E8;
  --color-bg-accent: #E3D4E7;

  --color-border: var(--yg-line);
  --color-border-solid: var(--yg-line);

  --color-accent-orange: var(--yg-clay);
  --color-accent-selection: var(--yg-clay);

  /* Print does not glow. Shadows stay tight and warm. */
  --shadow-card: 0 1px 2px rgba(69, 48, 85, 0.05);
  --shadow-card-hover: 0 10px 30px rgba(69, 48, 85, 0.10);
  --shadow-button: none;
  --shadow-nav: none;
  --shadow-focus: 0 0 0 3px rgba(109, 76, 125, 0.18);
}

[data-theme="dark"][data-customer="yoga"] {
  --yg-paper: #17131A;
  --yg-paper-2: #1F1A23;
  --yg-card: #221C26;
  --yg-ink: #F3EBE2;
  --yg-ink-soft: #B6ABBB;
  --yg-line: rgba(243, 235, 226, 0.16);
  --yg-line-strong: rgba(243, 235, 226, 0.36);

  --yg-plum: #C7ABD4;
  --yg-plum-deep: #DCC6E5;
  --yg-clay: #D9A184;

  --font-heading: 'Fraunces', 'Iowan Old Style', Georgia, serif;

  --color-brand-primary: var(--yg-plum);
  --color-brand-primary-hover: var(--yg-plum-deep);
  --color-brand-deep-1: #B294C2;
  --color-brand-deep-2: #A282B4;
  --color-brand-deep-3: #8E6BA1;

  --color-text-primary: var(--yg-ink);
  --color-text-secondary: var(--yg-ink-soft);
  --color-text-tertiary: #9B8FA4;

  --color-bg-primary: var(--yg-paper);
  --color-bg-secondary: var(--yg-paper-2);
  --color-bg-tertiary: #1B1620;
  --color-bg-accent: #4A3853;

  --color-border: var(--yg-line);
  --color-border-solid: var(--yg-line);

  --color-accent-orange: var(--yg-clay);
  --color-accent-selection: var(--yg-clay);

  /* dark.css keeps its whole neutral family in a blue-grey; anything not overridden here
     leaks that blue into the tenant (placeholders, hairlines, social icons, inverse text) */
  --color-text-inverse: #17131A;
  --color-border-dark: rgba(243, 235, 226, 0.35);
  --color-social-facebook: var(--yg-plum);
  --color-social-twitter: var(--yg-plum);
  --color-social-pinterest: var(--yg-plum);
  --color-social-dark: var(--yg-ink-soft);

  /* dark.css leaves these on the default blue; focus rings and card shadows follow the brand */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-button: none;
  --shadow-nav: none;
  --shadow-focus: 0 0 0 3px rgba(199, 171, 212, 0.28);
}

/* ===================================================================
   2. Paper — grain and a warm vignette so the ground is not flat
   =================================================================== */

[data-customer="yoga"] body {
  background-color: var(--yg-paper);
  background-image:
    radial-gradient(120% 80% at 12% -10%, rgba(109, 76, 125, 0.09) 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(180, 121, 95, 0.10) 0%, transparent 50%);
  background-attachment: fixed;
}

[data-customer="yoga"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

[data-theme="dark"][data-customer="yoga"] body::before {
  mix-blend-mode: screen;
  opacity: 0.35;
}

[data-customer="yoga"] main,
[data-customer="yoga"] nav,
[data-customer="yoga"] footer {
  position: relative;
  z-index: 1;
}

/* ===================================================================
   3. Typography — serif display, tight leading, optical sizing
   =================================================================== */

[data-customer="yoga"] h1,
[data-customer="yoga"] h2,
[data-customer="yoga"] h3,
[data-customer="yoga"] .display-5 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 28, 'WONK' 1;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.08;
}

[data-customer="yoga"] .hero-banner h1 {
  font-size: clamp(46px, 6.4vw, 88px);
  letter-spacing: -0.028em;
  line-height: 0.98;
  max-width: 13ch;
  margin-bottom: 0;
}

/* Signature: a drawn rule under the headline, the way a studio underlines a timetable date */
[data-customer="yoga"] .hero-banner h1::after {
  content: "";
  display: block;
  width: min(340px, 62%);
  height: 16px;
  margin: 24px 0 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 16'%3E%3Cpath d='M3 11C58 4 118 13 178 7c50-5 100 2 159 4' fill='none' stroke='%236D4C7D' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}

[data-theme="dark"][data-customer="yoga"] .hero-banner h1::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 16'%3E%3Cpath d='M3 11C58 4 118 13 178 7c50-5 100 2 159 4' fill='none' stroke='%23C7ABD4' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-customer="yoga"] .lead {
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.65;
  color: var(--yg-ink-soft);
}

[data-customer="yoga"] .hero-banner p.lead {
  max-width: 46ch;
}

/* Centred section subtitles need a measure too, but centred rather than ragged-left */
[data-customer="yoga"] .text-center > .lead {
  max-width: 58ch;
  margin-inline: auto;
}

/* Small-caps eyebrows and labels — the print detail that carries the whole thing */
[data-customer="yoga"] .navbar-nav .nav-link,
[data-customer="yoga"] .box-btn,
[data-customer="yoga"] .btn-primary,
[data-customer="yoga"] .btn-secondary,
[data-customer="yoga"] .badge,
[data-customer="yoga"] .article-tag {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.78rem;
  font-weight: 600;
}

/* ===================================================================
   4. Navigation — hairline rule instead of a shadow
   =================================================================== */

[data-customer="yoga"] .navbar {
  background-color: transparent;
  border-bottom: 1px solid var(--yg-line);
  box-shadow: none;
}

[data-customer="yoga"] .navbar-nav .nav-link {
  color: var(--yg-ink-soft);
  padding-inline: 0.85rem;
}

[data-customer="yoga"] .navbar-nav .nav-link:hover,
[data-customer="yoga"] .navbar-nav .nav-link.active {
  color: var(--yg-ink);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--yg-plum);
}

/* ===================================================================
   5. Buttons — squared, letterspaced, no gloss
   =================================================================== */

[data-customer="yoga"] .box-btn,
[data-customer="yoga"] .btn-primary {
  background-color: var(--yg-plum);
  /* token, not a literal: in dark mode the brand tone is light, so the label has to go dark */
  color: var(--color-text-inverse);
  border: 1px solid var(--yg-plum);
  border-radius: 3px;
  padding: 17px 34px;
  line-height: 1;
  box-shadow: none;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

[data-customer="yoga"] .box-btn:hover,
[data-customer="yoga"] .btn-primary:hover {
  background-color: var(--yg-plum-deep);
  border-color: var(--yg-plum-deep);
  transform: translateY(-2px);
  box-shadow: none;
}

[data-customer="yoga"] .btn-secondary {
  background-color: transparent;
  color: var(--yg-ink);
  border: 1px solid var(--yg-line-strong);
  border-radius: 3px;
  padding: 16px 32px;
  line-height: 1;
}

[data-customer="yoga"] .btn-secondary:hover {
  background-color: transparent;
  color: var(--yg-plum);
  border-color: var(--yg-plum);
}

/* ===================================================================
   6. Hero — an open spread, not a filled card
   =================================================================== */

[data-customer="yoga"] .hero-banner {
  background-color: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--yg-line);
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 88px);
  margin-bottom: 0 !important;
}

[data-customer="yoga"] .hero-banner .carousel {
  border-radius: 6px !important;
  box-shadow: 0 24px 60px rgba(69, 48, 85, 0.12) !important;
  border: 1px solid var(--yg-line);
}

[data-customer="yoga"] .hero-banner .mt-3.text-muted.small {
  margin-top: 1.75rem !important;
}

[data-customer="yoga"] .hero-banner .mt-3.text-muted.small strong {
  display: inline-block;
  max-width: 34ch;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  line-height: 1.7;
  color: var(--yg-ink-soft);
}

/* ===================================================================
   7. Metrics — figures set in the display face, divided by hairlines
   =================================================================== */

[data-customer="yoga"] section.bg-theme-secondary:has(.display-5) {
  background-color: transparent;
  border-bottom: 1px solid var(--yg-line);
}

[data-customer="yoga"] .display-5 {
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 400;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  color: var(--yg-ink);
}

[data-customer="yoga"] .display-5 + p {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--yg-ink-soft);
  margin-top: 0.5rem !important;
}

@media (min-width: 768px) {
  [data-customer="yoga"] section:has(> .container > .row > .col-md-3 .display-5) .col-md-3 + .col-md-3 {
    border-left: 1px solid var(--yg-line);
  }
}

/* ===================================================================
   8. Section bands and cards
   =================================================================== */

[data-customer="yoga"] .bg-theme-secondary {
  background-color: var(--yg-paper-2);
}

[data-customer="yoga"] .service-block {
  background-color: var(--yg-card);
  border: 1px solid var(--yg-line);
  border-radius: 4px;
  box-shadow: none;
  padding: 36px;
}

[data-customer="yoga"] .service-block:hover {
  transform: none;
  border-color: var(--yg-line-strong);
  box-shadow: var(--shadow-card-hover);
}

/* Old way / new way tags — muted, set like margin notes rather than status pills */
[data-customer="yoga"] .badge.bg-danger,
[data-customer="yoga"] .badge.bg-success {
  background-color: transparent !important;
  border-radius: 0;
  padding: 0 0 5px 0;
  border-bottom: 1.5px solid currentColor;
}

[data-customer="yoga"] .badge.bg-danger {
  color: var(--yg-clay) !important;
}

[data-customer="yoga"] .badge.bg-success {
  color: var(--yg-plum) !important;
}

/* Pull quote — the mark hangs in the margin, as it would in print */
[data-customer="yoga"] .blockquote {
  position: relative;
  background-color: transparent !important;
  border-left: 1px solid var(--yg-line-strong);
  border-radius: 0;
  padding: 4px 0 4px 42px !important;
  text-align: left !important;
  max-width: 62ch;
  margin-inline: auto;
}

/* The base styles leave a stray rule running off the end of the quote; only the hanging
   left rule belongs to this design. */
[data-customer="yoga"] .blockquote,
[data-customer="yoga"] .blockquote * {
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  background-image: none !important;
}

[data-customer="yoga"] .blockquote {
  border-left: 1px solid var(--yg-line-strong) !important;
}

[data-customer="yoga"] .blockquote p {
  margin-bottom: 0.9rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.4;
  color: var(--yg-ink);
}

[data-customer="yoga"] .blockquote-footer {
  text-align: left !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--yg-ink-soft);
}

/* ===================================================================
   9. Feature cards — numbered entries, not filled blocks
   =================================================================== */

[data-customer="yoga"] body {
  counter-reset: yg-feature;
}

[data-customer="yoga"] .feature-block {
  counter-increment: yg-feature;
  background-color: var(--yg-card);
  color: var(--yg-ink);
  border: 1px solid var(--yg-line);
  border-top: 2px solid var(--yg-plum);
  border-radius: 4px;
  padding: 34px 30px 30px;
  align-items: flex-start;
  text-align: left;
  min-height: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

[data-customer="yoga"] .feature-block::before {
  content: counter(yg-feature, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--yg-plum);
  margin-bottom: 16px;
}

[data-customer="yoga"] .feature-block h3 {
  font-size: 1.45rem;
  margin-bottom: 10px;
  color: var(--yg-ink);
}

[data-customer="yoga"] .feature-block p {
  color: var(--yg-ink-soft);
  font-size: 0.97rem;
  line-height: 1.62;
  margin-bottom: 0;
}

[data-customer="yoga"] .feature-block:hover {
  transform: translateY(-3px);
  border-color: var(--yg-line-strong);
  border-top-color: var(--yg-plum-deep);
  box-shadow: var(--shadow-card-hover);
}

/* ===================================================================
   10. Remaining surfaces — keep other pages coherent
   =================================================================== */

[data-customer="yoga"] .theme-card,
[data-customer="yoga"] .pricing-card {
  background-color: var(--yg-card);
  border: 1px solid var(--yg-line);
  border-radius: 4px;
}

[data-customer="yoga"] .theme-card:hover {
  border-color: var(--yg-line-strong);
  box-shadow: var(--shadow-card-hover);
}

[data-customer="yoga"] .article-tag {
  border-radius: 2px;
}

[data-customer="yoga"] .accordion-item,
[data-customer="yoga"] .accordion-button {
  background-color: transparent;
  border-radius: 0;
}

[data-customer="yoga"] footer {
  background-color: transparent;
  border-top: 1px solid var(--yg-line);
}

/* The hero art is a drawn panel, so it needs a dark counterpart rather than a filter */
[data-theme="dark"][data-customer="yoga"] .hero-banner img[src*="hero-schedule"] {
  content: url("/images/customers/yoga/hero-schedule-dark.svg");
}

/* ===================================================================
   11. Motion — one orchestrated entrance, then restraint
   =================================================================== */

@media (prefers-reduced-motion: no-preference) {
  [data-customer="yoga"] .hero-banner h1,
  [data-customer="yoga"] .hero-banner p.lead,
  [data-customer="yoga"] .hero-banner .mt-4,
  [data-customer="yoga"] .hero-banner .mt-3,
  [data-customer="yoga"] .hero-banner .col-lg-6 > .p-4 {
    animation: yg-rise 0.75s cubic-bezier(0.22, 0.7, 0.24, 1) both;
  }

  [data-customer="yoga"] .hero-banner p.lead { animation-delay: 0.09s; }
  [data-customer="yoga"] .hero-banner .mt-4 { animation-delay: 0.18s; }
  [data-customer="yoga"] .hero-banner .mt-3 { animation-delay: 0.25s; }
  [data-customer="yoga"] .hero-banner .col-lg-6 > .p-4 { animation-delay: 0.14s; }

  [data-customer="yoga"] .hero-banner h1::after {
    animation: yg-draw 0.9s 0.5s cubic-bezier(0.22, 0.7, 0.24, 1) both;
  }
}

@keyframes yg-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes yg-draw {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}