/*
 * `saqf` (سقف, «ceiling») — the theme of a drywall and false-ceiling
 * contractor. Fetched, not compiled.
 *
 * Subject and visitor: a firm that designs and builds drywall, stretch
 * ceilings, tile grids and partitions; a home owner or a shop's builder in
 * Isfahan choosing who will build a living-room ceiling, who reads the
 * finished work before anything else and then asks for a site visit.
 * Tone: architectural, lit — a finished ceiling at night, not a hardware
 * catalogue.
 * The detail only this subject has: the hidden light. A false ceiling is a
 * stepped box with an LED in its cove, and that is the whole signature here:
 * every dark band opens with the stepped profile of a ceiling drop and a line
 * of cyan light beneath it, headings carry the same lit step, and the one
 * accent is the light itself.
 *
 * Plaster white and a deep ceiling-void navy, square edges, EstedadFD for
 * display and VazirmatnFD for body. Never letter-spaced.
 *
 * Plain CSS, copied to `public/themes/kanaf.css` by
 * `scripts/build/sync-theme-assets.mjs`; it selects only the hooks the builder
 * publishes (`sb-*`, `data-sb-*`, `data-part`).
 */

@font-face {
  font-family: 'EstedadFD';
  src: url('fonts/estedad/Estedad-FD-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EstedadFD';
  src: url('fonts/estedad/Estedad-FD-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root.theme-kanaf {
  --background: #f3f1ec;
  --foreground: #12202b;
  --card: #ffffff;
  --card-foreground: #12202b;
  --popover: #ffffff;
  --popover-foreground: #12202b;
  --primary: #0878a8;
  --primary-foreground: #ffffff;
  --secondary: #e7e4dc;
  --secondary-foreground: #12202b;
  --muted: #e7e4dc;
  --muted-foreground: #5b6670;
  --accent: #e7e4dc;
  --accent-foreground: #0b1f2e;
  --destructive: #b3261e;
  --destructive-foreground: #ffffff;
  --border: #ddd8cf;
  --input: #cfc9be;
  --ring: #1bb6ea;

  --primary-50: #eef8fc;
  --primary-100: #d4eef8;
  --primary-200: #a8dcf1;
  --primary-300: #6cc6e8;
  --primary-400: #2fabdc;
  --primary-500: #0f91c3;
  --primary-600: var(--brand-primary, #0878a8);
  --primary-700: #0a6189;
  --primary-800: #0d4d6c;
  --primary-900: #0f3d55;
  --primary-950: #0b2738;

  /* The light in the cove: the owner's second colour when they set one. */
  --brand-accent: var(--brand-secondary, #1bb6ea);
  --brand-accent-foreground: var(--brand-secondary-foreground, #04121c);
  /* The ceiling void the dark bands are cut from. */
  --chrome-ink: #0b1f2e;
  --chrome-ink-foreground: #e7eef3;

  --surface-page: #f3f1ec;
  --surface-alt: #e7e4dc;
  --surface-input: #ffffff;
  --surface-panel: #ebe8e1;
  --ink-secondary: #3a4752;

  --radius-step-sm: 0px;
  --radius-step-md: 0px;
  --radius-step-lg: 2px;
  --radius-step-xl: 2px;

  --saqf-glow: var(--brand-accent);
  --saqf-void: #0b1f2e;
  --saqf-step: 1.75rem;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light).theme-kanaf {
    --background: #0a1620;
    --foreground: #e7eef3;
    --card: #102231;
    --card-foreground: #e7eef3;
    --popover: #102231;
    --popover-foreground: #e7eef3;
    --primary: #3cc3f0;
    --primary-foreground: #04121c;
    --secondary: #0f1d29;
    --secondary-foreground: #e7eef3;
    --muted: #0f1d29;
    --muted-foreground: #93a4b3;
    --accent: #0f1d29;
    --accent-foreground: #e7eef3;
    --border: #22384a;
    --input: #2c4558;
    --ring: #3cc3f0;
    --brand-accent: var(--brand-secondary, #3cc3f0);
    --brand-accent-foreground: var(--brand-secondary-foreground, #04121c);
    --chrome-ink: #050d14;
    --chrome-ink-foreground: #e7eef3;
    --surface-page: #0a1620;
    --surface-alt: #0f1d29;
    --surface-input: #102231;
    --surface-panel: #0f1d29;
    --ink-secondary: #c5d1da;
    --saqf-void: #050d14;
    --primary-50: #0b2738;
    --primary-100: #0f3d55;
    --primary-200: #0d4d6c;
    --primary-300: #0a6189;
    --primary-400: #0878a8;
    --primary-500: #0f91c3;
    --primary-600: #2fabdc;
    --primary-700: #6cc6e8;
    --primary-800: #a8dcf1;
    --primary-900: #d4eef8;
    --primary-950: #eef8fc;
  }
}

/* Same palette as the media query above — change both. */
:root.dark.theme-kanaf {
  --background: #0a1620;
  --foreground: #e7eef3;
  --card: #102231;
  --card-foreground: #e7eef3;
  --popover: #102231;
  --popover-foreground: #e7eef3;
  --primary: #3cc3f0;
  --primary-foreground: #04121c;
  --secondary: #0f1d29;
  --secondary-foreground: #e7eef3;
  --muted: #0f1d29;
  --muted-foreground: #93a4b3;
  --accent: #0f1d29;
  --accent-foreground: #e7eef3;
  --border: #22384a;
  --input: #2c4558;
  --ring: #3cc3f0;
  --brand-accent: var(--brand-secondary, #3cc3f0);
  --brand-accent-foreground: var(--brand-secondary-foreground, #04121c);
  --chrome-ink: #050d14;
  --chrome-ink-foreground: #e7eef3;
  --surface-page: #0a1620;
  --surface-alt: #0f1d29;
  --surface-input: #102231;
  --surface-panel: #0f1d29;
  --ink-secondary: #c5d1da;
  --saqf-void: #050d14;
  --primary-50: #0b2738;
  --primary-100: #0f3d55;
  --primary-200: #0d4d6c;
  --primary-300: #0a6189;
  --primary-400: #0878a8;
  --primary-500: #0f91c3;
  --primary-600: #2fabdc;
  --primary-700: #6cc6e8;
  --primary-800: #a8dcf1;
  --primary-900: #d4eef8;
  --primary-950: #eef8fc;
}

/* ── Type: EstedadFD black for display ───────────────────────────────────── */

.theme-kanaf :is(h1, h2, h3, .sb-cta-title, .sb-stat-value, .sb-chrome-logo > span) {
  font-family: 'EstedadFD', var(--app-font-display, inherit);
}

.theme-kanaf :is(h1, .sb-section h2, .sb-cta-title, .sb-stat-value) {
  font-weight: 900;
  line-height: 1.35;
}

.theme-kanaf h1 {
  font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
}

/* EstedadFD draws Persian digits and its Latin is a fallback's: an English
   page sets its display type in the platform's Poppins. */
.theme-kanaf:not(:lang(fa)) :is(h1, h2, h3, .sb-cta-title, .sb-stat-value, .sb-chrome-logo > span) {
  font-family: 'Poppins', var(--app-font-display, inherit);
}

/* Built sections only: a module page's own h2 (a post card, a form) keeps its size. */
.theme-kanaf .sb-section h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
}

.theme-kanaf :is(h3, h4) {
  font-weight: 700;
}

/* The lit step: a section heading carries the profile of a ceiling drop. */
.theme-kanaf .sb-section h2::before {
  content: '';
  display: block;
  width: 5.5rem;
  height: 0.75rem;
  margin-block-end: 0.75rem;
  background:
    linear-gradient(var(--saqf-glow), var(--saqf-glow)) 0 100% / 30% 2px no-repeat,
    linear-gradient(var(--saqf-glow), var(--saqf-glow)) 30% 0 / 2px 100% no-repeat,
    linear-gradient(var(--saqf-glow), var(--saqf-glow)) 30% 0 / 40% 2px no-repeat,
    linear-gradient(var(--saqf-glow), var(--saqf-glow)) 70% 0 / 2px 100% no-repeat,
    linear-gradient(var(--saqf-glow), var(--saqf-glow)) 100% 100% / 30% 2px no-repeat;
  filter: drop-shadow(0 0 4px var(--saqf-glow));
}

.theme-kanaf :is(.sb-cta, .sb-slide, .sb-quote) h2::before {
  display: none;
}

/* ── Dark bands: cut from the ceiling void, opening on a lit step ────────── */

.theme-kanaf .sb-section[data-sb-background='color'],
.theme-kanaf .sb-section[data-sb-background='image'] {
  position: relative;
}

.theme-kanaf .sb-section[data-sb-background='color']::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: var(--saqf-step);
  background: var(--background);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 78% 100%, 78% 0, 22% 0, 22% 100%, 0 100%);
  pointer-events: none;
}

.theme-kanaf .sb-section[data-sb-background='color']::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: var(--saqf-step);
  height: 2px;
  background: linear-gradient(90deg, var(--saqf-glow) 0 22%, transparent 22% 78%, var(--saqf-glow) 78% 100%);
  box-shadow: 0 0 14px var(--saqf-glow);
  pointer-events: none;
}

.theme-kanaf .sb-section[data-sb-background='color'] .sb-section-inner {
  padding-block-start: calc(var(--saqf-step) + 1.5rem);
}

/* A hero picture ends on the light strip of its cove. */
.theme-kanaf .sb-section[data-sb-background='image']::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  background: var(--saqf-glow);
  box-shadow: 0 0 18px 2px var(--saqf-glow);
  pointer-events: none;
}

.theme-kanaf .sb-section[data-sb-background='muted'] {
  background-color: var(--surface-panel);
}

/* ── The header: a void top bar over a plaster row ───────────────────────── */

.theme-kanaf .sb-chrome-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.theme-kanaf .sb-chrome-header .sb-section:first-child {
  background: var(--chrome-ink);
  color: var(--chrome-ink-foreground);
  font-size: 0.8125rem;
}

.theme-kanaf .sb-chrome-header .sb-section:first-child :is(a, p, span) {
  color: inherit;
}

.theme-kanaf .sb-chrome-header .sb-section-inner {
  align-items: center;
}

.theme-kanaf .sb-chrome-header .sb-column {
  align-self: center;
  flex-wrap: nowrap;
  gap: 0.375rem;
}

.theme-kanaf .sb-chrome-header .sb-section .sb-column:last-child {
  justify-content: flex-end;
}

.theme-kanaf .sb-chrome-logo > span {
  font-size: 1.1875rem;
  font-weight: 900;
  line-height: 1.25;
  color: var(--foreground);
}

/* The menu takes the width the name and the actions leave, not a fixed half:
   a customer's eight items overflowed six of twelve columns and ran under the
   search and dark-mode buttons. */
.theme-kanaf .sb-chrome-header .sb-section-inner:has(> .sb-column nav.sb-chrome-menu) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.theme-kanaf .sb-chrome-header .sb-section-inner:has(> .sb-column nav.sb-chrome-menu) > .sb-column {
  grid-column: auto;
}

.theme-kanaf .sb-chrome-header nav.sb-chrome-menu > ul {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0;
}

.theme-kanaf .sb-chrome-header .sb-chrome-menu-link {
  padding: 0.5rem 0.625rem;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  color: var(--foreground);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: border-color 150ms, color 150ms;
}

@media (max-width: 1279px) {
  .theme-kanaf .sb-chrome-header .sb-chrome-menu-link {
    padding-inline: 0.4rem;
    font-size: 0.875rem;
  }
}

.theme-kanaf .sb-chrome-header .sb-chrome-menu-link:hover,
.theme-kanaf .sb-chrome-header .sb-chrome-menu-link[aria-current='page'] {
  color: var(--primary);
  border-bottom-color: var(--saqf-glow);
}

.theme-kanaf .sb-chrome-header :is(a.sb-chrome-search, button.sb-chrome-search, .sb-chrome-account, .sb-chrome-theme, button.sb-chrome-locale) {
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--foreground);
  transition: border-color 150ms;
}

.theme-kanaf .sb-chrome-header .sb-section:first-child button.sb-chrome-locale {
  border-color: rgb(231 238 243 / 0.3);
  color: inherit;
}

.theme-kanaf .sb-chrome-header :is(a.sb-chrome-search, button.sb-chrome-search, .sb-chrome-account, .sb-chrome-theme, button.sb-chrome-locale):hover {
  border-color: var(--saqf-glow);
}

:root[lang='en'].theme-kanaf .sb-chrome-header .sb-chrome-menu-link {
  padding-inline: 0.4rem;
  font-size: 0.8125rem;
}

/* The call for a site visit: the one lit thing in the header. */
.theme-kanaf .sb-chrome-header .sb-button {
  background: var(--brand-accent);
  color: var(--brand-accent-foreground);
  border-color: var(--brand-accent);
  box-shadow: 0 0 20px -6px var(--saqf-glow);
}

/* ── Buttons, figures and cards ──────────────────────────────────────────── */

.theme-kanaf .sb-button {
  border-radius: var(--radius-step-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: transform 150ms, box-shadow 150ms, filter 150ms;
}

.theme-kanaf .sb-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.theme-kanaf .sb-button:active {
  transform: translateY(0);
}

.theme-kanaf .sb-button:focus-visible,
.theme-kanaf a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Figures glow like the cove they stand under. */
.theme-kanaf .sb-stat-value {
  color: var(--saqf-glow);
  font-variant-numeric: tabular-nums;
}

.theme-kanaf .sb-stat-label {
  color: inherit;
  opacity: 0.85;
}

.theme-kanaf .sb-stat + .sb-stat {
  border-inline-start: 1px solid color-mix(in oklab, currentColor 18%, transparent);
}

.theme-kanaf .sb-feature {
  border-top: 2px solid var(--foreground);
  padding-block-start: 1rem;
}

.theme-kanaf .sb-post {
  border-radius: 0;
}

.theme-kanaf .sb-post:hover .sb-post-title {
  color: var(--primary);
}

.theme-kanaf .sb-quote::before {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  margin-block-end: 1.25rem;
  background: var(--saqf-glow);
  box-shadow: 0 0 10px var(--saqf-glow);
}

.theme-kanaf :is(.sb-icon-box, .sb-testimonial, .sb-team-member, .sb-cta, .sb-image-img, .sb-post-image, .sb-gallery-img, .sb-gallery-item, .sb-image-box-figure) {
  border-radius: 0;
}

.theme-kanaf .sb-image-box {
  transition: transform 200ms;
}

.theme-kanaf .sb-image-box:hover {
  transform: translateY(-2px);
}

.theme-kanaf .sb-testimonial {
  border: 1px solid var(--border);
  background: var(--card);
}

.theme-kanaf .sb-accordion-item {
  border-radius: 0;
}

/* The portfolio's cards: the picture first, square, the kind lit. */
.theme-kanaf .sb-resume-project {
  border-radius: 0;
}

.theme-kanaf .sb-resume-project-kind {
  color: var(--primary);
}

/* ── The footer: the void, opening on the stepped light ──────────────────── */

.theme-kanaf .sb-chrome-footer {
  position: relative;
  margin-block-start: 0;
  background: var(--chrome-ink);
  color: var(--chrome-ink-foreground);
}

.theme-kanaf .sb-chrome-footer::before {
  content: '';
  display: block;
  height: var(--saqf-step);
  background: var(--background);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 78% 100%, 78% 0, 22% 0, 22% 100%, 0 100%);
}

.theme-kanaf .sb-chrome-footer::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: var(--saqf-step);
  height: 2px;
  background: linear-gradient(90deg, var(--saqf-glow) 0 22%, transparent 22% 78%, var(--saqf-glow) 78% 100%);
  box-shadow: 0 0 14px var(--saqf-glow);
}

.theme-kanaf .sb-chrome-footer a {
  color: inherit;
  opacity: 0.85;
}

.theme-kanaf .sb-chrome-footer a:hover {
  opacity: 1;
  color: var(--saqf-glow);
}

.theme-kanaf .sb-chrome-footer .sb-chrome-logo > span {
  color: inherit;
}

.theme-kanaf .sb-chrome-copyright {
  border-top: 1px solid rgb(231 238 243 / 0.14);
  padding-top: 1rem;
  opacity: 0.7;
}

@media (max-width: 40rem) {
  .theme-kanaf {
    --saqf-step: 1.125rem;
  }

  .theme-kanaf .sb-chrome-logo > span {
    font-size: 1rem;
  }

  .theme-kanaf .sb-chrome-header .sb-section:first-child .sb-column:first-child {
    display: none;
  }

  .theme-kanaf .sb-stat + .sb-stat {
    border-inline-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-kanaf *,
  .theme-kanaf *::before,
  .theme-kanaf *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}