@import url("./ui-patterns.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-cyrillic-variable.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* AhaDrobe theme: calm ivory surfaces, ink navy, and restrained champagne. */
  --color-text: #11233b;
  --color-text-soft: #5d6878;
  --color-text-muted: #7b8490;
  --color-text-faint: #8b98a7;
  --color-text-inverse: #f8fbfd;
  --color-accent: #0a2540;
  --color-champagne: #d8b36c;
  --color-champagne-strong: #9a711f;
  --color-champagne-soft: #fbf4e6;
  --color-danger: #b14f4f;

  /* Shared base surface for every site page. */
  --site-page-bg: #faf8f4;
  --marketing-band-blue: linear-gradient(115deg, #e7eef6 0%, #f0f4f8 100%);
  --marketing-band-champagne: linear-gradient(112deg, #f8f1e6 0%, #f3e8d7 52%, #f9f3e9 100%);
  --app-page-bg: var(--site-page-bg);
  --app-surface: #ffffff;
  --app-surface-subtle: #f5f3ed;
  --app-text: #11233b;
  --app-text-secondary: #5d6878;
  --app-text-muted: #7b8490;
  --app-divider: #e3dfd5;
  --app-divider-soft: #ece8df;
  --app-control-border: #cec7b8;
  --app-control-border-hover: #a99d88;
  --app-accent: #0a2540;
  --app-accent-strong: #061a2e;
  --app-accent-soft: #edf2f5;
  --app-focus: #4c7fb7;
  --app-success: #237a57;
  --app-status-info: #175cd3;
  --app-status-info-bg: #eff8ff;
  --app-status-success: #067647;
  --app-status-success-bg: #ecfdf3;
  --app-status-warning: #b54708;
  --app-status-warning-bg: #fffaeb;
  --app-status-error: #b42318;
  --app-status-error-bg: #fef3f2;

  /* Shared workspace navigation theme: dashboard, onboarding and Clerk's
     account panel use the same sidebar language. */
  --workspace-sidebar-surface: #09233d;
  --workspace-sidebar-surface-deep: #061a2e;
  --workspace-sidebar-text: #f7f9fc;
  --workspace-sidebar-text-muted: #bdc9d7;
  --workspace-sidebar-divider: rgb(231 239 247 / 16%);
  --workspace-sidebar-hover: rgb(255 255 255 / 8%);
  --workspace-sidebar-active: rgb(224 187 113 / 14%);
  --workspace-sidebar-active-text: #f2cd82;

  --color-border: rgba(17, 35, 59, 0.12);

  --shadow-shell: 0 22px 54px rgba(6, 26, 46, 0.08);
  --shadow-button: 0 10px 22px rgba(10, 37, 64, 0.18);
  --shadow-soft: 0 14px 30px rgba(17, 35, 59, 0.075);

  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 30px;
  --space-9: 36px;
  --space-10: 44px;
  /* Fixed layout rhythm for card-based content across public and workspace pages. */
  --app-card-gap: var(--space-5);
  --app-card-section-gap: var(--space-9);
  --workspace-shell-max-width: 1380px;
  --public-content-max-width: 1400px;
  --public-readable-width: 70ch;

  --app-sidebar-width: var(--side-nav-width);
  --app-sidebar-gap: 48px;
  --app-page-padding-x: 32px;
  --app-page-padding-x-tablet: 24px;
  --app-page-padding-x-mobile: 16px;
  --app-page-bottom-padding: 32px;
  --app-page-bottom-padding-mobile: 18px;
  --site-footer-gap: 32px;
  --site-footer-gap-mobile: 24px;
  --app-title-subtitle-gap: 6px;
  --app-page-header-gap: var(--app-title-subtitle-gap);
  --app-section-header-margin: 24px;
  /* Shared application/workspace hierarchy. Dashboard, onboarding and
     form panels use these roles instead of defining independent title scales. */
  --workspace-page-title-size: var(--type-page-title);
  --workspace-page-title-line-height: 1.23;
  --workspace-page-title-letter-spacing: -0.035em;
  --workspace-page-description-size: var(--type-body);
  --workspace-page-description-line-height: 20px;
  --workspace-heading-content-gap: var(--app-section-header-margin);
  --workspace-panel-title-size: var(--type-section-title);
  --workspace-panel-title-line-height: var(--line-height-snug);
  --workspace-panel-copy-size: var(--type-body);
  --workspace-panel-copy-line-height: var(--line-height-relaxed);
  /* Public marketing rhythm: every content section uses this spacing and
     typography scale, independent of whether it contains a visual, metrics,
     an FAQ, or a contact callout. */
  --marketing-section-space: clamp(var(--space-8), 3.5vw, var(--space-10));
  /* Full-width bands use the same top and bottom rhythm as plain sections. */
  --marketing-section-padding-block: var(--marketing-section-space);
  --marketing-section-content-gap: clamp(var(--space-6), 3vw, 48px);
  --marketing-centered-content-gap: var(--marketing-section-content-gap);
  --marketing-heading-gap: var(--space-3);
  --marketing-action-gap: var(--space-5);
  --marketing-card-padding: clamp(var(--space-6), 3vw, var(--space-8));
  /* Compact desktop CTA/callout convention: 24px vertical, 32px horizontal. */
  --marketing-contact-callout-padding: var(--space-7) var(--space-8);
  --marketing-heading-size: clamp(2rem, 3.25vw, 3.15rem);
  --marketing-copy-size: clamp(1rem, 1.2vw, 1.125rem);
  --marketing-callout-heading-size: clamp(1.25rem, 1.6vw, 1.5rem);
  --app-control-height: 42px;
  /* Spacious hit areas keep compact icon controls usable on touch devices. */
  --site-touch-target-size: 44px;
  --app-control-radius: var(--radius-md);
  --app-popover-radius: var(--radius-lg);
  --app-icon-stroke-width: 1.7;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scrollbar-gutter: stable;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--site-page-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  line-height: var(--line-height-body);
}

/* Every page shell has the same natural footer behavior: short pages fill the
   viewport, while long pages continue to place the footer after their content. */
body > main {
  flex: 1 0 auto;
}

a,
button,
input,
textarea {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-title-xl);
  line-height: var(--line-height-tight);
  letter-spacing: -0.03em;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--type-page-title);
  line-height: var(--line-height-snug);
  letter-spacing: -0.02em;
}

h3 {
  font-family: var(--font-display);
  font-size: var(--type-section-title);
  line-height: var(--line-height-snug);
  letter-spacing: -0.02em;
}


.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  min-width: 0;
  padding: 10px max(28px, calc((100% - var(--public-content-max-width)) / 2));
  border-bottom: 1px solid var(--app-divider);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: none;
}

.header-primary {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.site-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-inline-size: 0;
  min-height: var(--app-control-height);
  padding: 8px var(--space-4);
  border: 1px solid var(--app-accent);
  border-radius: 8px;
  background: var(--app-accent);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-button);
  font-size: var(--type-control);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.site-menu-toggle:hover,
.site-menu-toggle:focus-visible,
.site-header.is-menu-open .site-menu-toggle {
  border-color: var(--app-accent-strong);
  background: var(--app-accent-strong);
  color: var(--color-text-inverse);
}

.site-menu-toggle:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 3px;
}

.site-menu-toggle-icon {
  flex: 0 0 auto;
  width: var(--ui-icon-size, 16px);
  height: var(--ui-icon-size, 16px);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: var(--app-icon-stroke-width);
}

.site-menu-toggle > span {
  min-width: 0;
  line-height: 1.1;
  white-space: nowrap;
}

.brand {
  font-family: var(--font-display);
  font-size: var(--type-brand);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-text);
  white-space: nowrap;
  text-decoration: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  justify-content: flex-end;
}

/* Header ownership stays here: the shared select pattern supplies the visual
   control, while this rule supplies only its place in the site header. */
.site-header .header-language-selector {
  flex: 0 0 120px;
  width: 120px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--color-text-soft);
  font-size: var(--type-navigation);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: color 140ms ease;
}

/* Payment-dependent controls start hidden in static markup. This explicit
   display rule keeps component styles from overriding the browser's [hidden]
   default before runtime availability is known. */
[data-payments-only][hidden],
[data-payments-disabled][hidden],
[data-home-workspace-action][hidden] {
  display: none !important;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--color-champagne);
}

.site-nav a[aria-current="page"] {
  color: var(--color-champagne-strong);
  font-weight: var(--font-weight-bold);
}

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-champagne);
}

/* Clerk renders its account popover outside the site header. Keep its actions
   aligned with the header navigation without giving them the active-page rule. */
.clerk-site-menu-action {
  min-height: 42px;
  border-radius: var(--radius-md);
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-text-soft) !important;
  font-family: var(--font-ui);
  font-size: var(--type-navigation);
  font-weight: var(--font-weight-medium);
  text-decoration: none !important;
  transition: color 140ms ease;
}

.clerk-site-menu-action:hover,
.clerk-site-menu-action:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-champagne) !important;
  text-decoration: none !important;
}

.clerk-site-menu-action svg,
.clerk-site-workspace-nav-icon,
.clerk-site-workspace-nav-icon svg {
  width: 18px !important;
  height: 18px !important;
}

/* Clerk exposes the UserProfile navigation as an appearance element, but its
   desktop title is an internal heading. The scoped class keeps that heading
   aligned with the dashboard sidebar without touching profile content. */
.clerk-site-account-nav {
  background: linear-gradient(160deg, var(--workspace-sidebar-surface) 0%, var(--workspace-sidebar-surface-deep) 100%) !important;
  border-inline-end: 1px solid var(--workspace-sidebar-divider) !important;
  color: var(--workspace-sidebar-text) !important;
}

.clerk-site-account-nav h1 {
  color: var(--workspace-sidebar-text) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--side-nav-title-size) !important;
  font-weight: 750 !important;
  line-height: var(--side-nav-title-line-height) !important;
  letter-spacing: -0.025em !important;
}

/* The Clerk profile uses the same workspace divider as dashboard sections. */
.clerk-site-profile-section {
  border-top-color: var(--app-divider) !important;
}

.clerk-site-profile-section--first {
  border-top-width: 0 !important;
}

.header-cta {
  order: 2;
}

.header-cta[hidden] {
  display: none !important;
}

/* The localized dashboard labels have different lengths. Reserve one stable
   desktop slot so changing the site language never shifts the header actions. */
#header-dashboard {
  flex: 0 0 132px;
  width: 132px;
}

@media (min-width: 961px) {
  .header-account.is-reserved:empty {
    display: flex;
    visibility: hidden;
  }
}

.header-account {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 42px;
  min-height: 42px;
  flex: 0 0 42px;
}

.header-account:empty {
  display: none;
}

@keyframes workspace-loading-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* The header switches before its links can become a second, cramped row.
   Page content keeps its own smaller-phone breakpoint below. */
@media (max-width: 960px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 120px) max-content;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    min-height: 64px;
    padding: 10px 14px;
  }

  .header-primary {
    display: contents;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-menu-toggle {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    padding-inline: var(--space-4);
  }

  .header-actions {
    display: contents;
  }

  .site-header .header-language-selector {
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    flex: initial;
  }

  .header-actions > :not(.header-language-selector) {
    display: none;
  }

  .site-nav {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--app-divider-soft);
  }

  .site-header.is-menu-open .site-nav {
    display: grid;
  }

  .site-header.is-menu-open .header-actions > .header-cta:not([hidden]) {
    display: inline-flex;
    /* Keep the account action directly below the language picker. This makes
       the dashboard/avatar spacing match the language/menu spacing above. */
    grid-column: 2;
    grid-row: 3;
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }

  .site-header.is-menu-open #header-dashboard {
    flex-basis: auto;
    width: 100%;
    max-width: none;
  }

  .site-header.is-menu-open .header-actions > .header-account:not(:empty) {
    display: flex;
    grid-column: 3;
    grid-row: 3;
  }

  .site-header.is-menu-open .header-actions > #header-sign-in:not([hidden]) {
    grid-column: 2 / -1;
  }

  .site-nav a {
    justify-content: flex-start;
    min-height: 44px;
    padding-inline: var(--space-3);
    border-bottom: 1px solid var(--app-divider-soft);
  }

  .site-nav a:last-child { border-bottom: 0; }

  .site-nav a[aria-current="page"]::after {
    right: auto;
    bottom: 0;
    width: 3px;
    height: 100%;
    border-radius: 0;
  }

  .header-cta {
    width: auto;
  }

  #header-dashboard {
    flex-basis: auto;
    min-width: 0;
    width: 100%;
  }

  .header-account {
    justify-content: flex-end;
  }

  .site-page-shell:not(.partners-page),
  .hero,
  .legal-hero {
    padding-inline: var(--app-page-padding-x-tablet);
  }
}

@media (max-width: 720px) {
  .site-page-shell:not(.partners-page),
  .hero,
  .legal-hero {
    padding-inline: var(--app-page-padding-x-mobile);
  }

  .site-page {
    padding-bottom: var(--site-footer-gap-mobile);
  }
}

@media (max-width: 560px) {
  .site-header {
    /* Keep both localized controls readable before giving the brand the
       remaining width. The previous 124px language slot left too little
       room for the Menu label on narrow phones. */
    grid-template-columns: minmax(0, 1fr) 108px max-content;
    column-gap: 6px;
    padding-inline: 8px;
  }

  .site-header .header-language-selector .ui-select__trigger {
    padding-inline: 8px 30px;
    background-position: right 8px center;
    font-size: 13px;
  }

  .site-menu-toggle {
    inline-size: auto;
    min-width: 80px;
    padding-inline: 8px;
    font-size: 13px;
  }

}

@media (max-width: 360px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) 104px max-content;
    min-height: 56px;
    column-gap: 4px;
    padding-inline: 6px;
  }

  .site-menu-toggle {
    min-width: 76px;
    gap: 5px;
    padding-inline: 7px;
    font-size: 12px;
  }

  .site-menu-toggle-icon {
    width: 14px;
    height: 14px;
  }
}

/* Public site footer: a single grounded surface that closes the light product shell. */
.site-footer {
  margin-top: 0;
  border-top: 3px solid rgba(216, 179, 108, 0.75);
  background:
    radial-gradient(circle at 12% 0%, rgba(216, 179, 108, 0.14), transparent 24rem),
    linear-gradient(125deg, #071b30, #0a2540);
  color: #d9e1ec;
}

.site-footer-inner {
  display: grid;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--workspace-shell-max-width);
  padding: var(--space-7) var(--app-page-padding-x) var(--space-5);
  margin: 0 auto;
}

.site-footer-main {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr);
  align-items: start;
  gap: var(--space-9);
}

.site-footer-link-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(128px, 1fr));
  gap: var(--space-6);
}

.site-footer-brand {
  display: grid;
  gap: 6px;
}

.site-footer-wordmark {
  width: fit-content;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.site-footer-brand p,
.site-footer-meta {
  color: #aebdce;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body);
}

.site-footer-nav {
  display: grid;
  align-content: start;
  gap: 2px;
}

.site-footer-heading {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-footer-nav a {
  color: #d9e1ec;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: color 140ms ease;
}

.site-footer-nav a:hover,
.site-footer-nav a:focus-visible,
.site-footer-wordmark:hover,
.site-footer-wordmark:focus-visible {
  color: var(--color-champagne);
}

.site-footer-nav a:focus-visible,
.site-footer-wordmark:focus-visible {
  outline: 2px solid var(--color-champagne);
  outline-offset: 4px;
}

.site-footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}

.site-footer-social-link svg {
  flex: 0 0 auto;
  width: var(--ui-icon-size, 16px);
  height: var(--ui-icon-size, 16px);
  fill: currentColor;
}

.site-footer-social-link[href*="facebook.com"] svg {
  color: #4f8fea;
}

.site-footer-social-link[href*="instagram.com"] svg {
  color: #e26a89;
}

.site-footer-meta {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(217, 225, 236, 0.16);
  text-align: center;
}

.site-footer-meta p {
  margin: 0;
}

/* Footer layout follows the same site-wide responsive contract as the header
   and workspace: wide desktop, a compact middle range, then phone. */
@media (max-width: 1180px) {
  .site-footer-inner {
    padding-inline: var(--app-page-padding-x-tablet);
  }

  .site-footer-main {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .site-footer-link-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

@media (max-width: 640px) {
  .site-footer-inner {
    align-items: start;
    gap: var(--space-4);
    padding: var(--space-6) var(--app-page-padding-x-mobile);
  }

  .site-footer-main {
    gap: var(--space-5);
  }

  .site-footer-link-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
  }

  .site-footer-nav {
    gap: var(--space-2);
  }

  .site-footer-meta {
    text-align: left;
  }
}

.site-footer-wordmark::before { color: var(--color-champagne); }