/* Corporate template stylesheet.
   Consumes the --ct-* custom properties emitted by Services/DesignTokens.cs
   (rendered inline per-request by Pages/Shared/_Layout.cshtml), so colors,
   radius, spacing, shadow and typography all come from the tenant's chosen
   design preset — this file only defines structure/layout. */

/* Self-hosted: this was loading from fonts.googleapis.com, the exact CDN
   the main Raymon app's own site.css deliberately stopped depending on
   ("frequently slow or unreachable from Iran") — every storefront built
   on this template inherited that same dependency on every single page
   load. Vendored from the same two files the main app already ships,
   split the same way (Arabic-script range vs Latin/punctuation), so a
   customer's site no longer needs fonts.googleapis.com to be reachable
   at all to render its own body text. */
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/vazirmatn-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/vazirmatn-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

:root {
  --ct-bg: #f7f8fa;
  --ct-surface: #ffffff;
  --ct-text: #1c2230;
  --ct-text-muted: #6b7280;
  --ct-border: #e5e7eb;

  --ct-font-body: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ct-font-mono: 'Vazirmatn', ui-monospace, 'Courier New', monospace;

  /* Fallbacks — always overridden per-request by the design-token block,
     kept here only so the page never renders unstyled if that block is
     ever missing. */
  --ct-radius: 14px;
  --ct-gap: 14px;
  --ct-pad: 16px;
  --ct-tilt: 0deg;
  --ct-shadow: 0 10px 26px -16px rgba(0,0,0,0.35);
  --ct-heading-weight: 700;
  --ct-body-weight: 500;
  --ct-tracking: normal;
  --ct-font: var(--ct-font-body);
  --ct-accent: #2f5aa0;
  --ct-accent-2: #5c6b84;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ct-bg);
  color: var(--ct-text);
}

body {
  font-family: var(--ct-font-body);
  font-weight: var(--ct-body-weight);
  letter-spacing: var(--ct-tracking);
  line-height: 1.7;
}

h1, h2, h3, h4 {
  font-family: var(--ct-font);
  font-weight: var(--ct-heading-weight);
  letter-spacing: var(--ct-tracking);
  margin: 0 0 0.6em;
  color: var(--ct-text);
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; color: var(--ct-text); }

a { color: var(--ct-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.ltr { direction: ltr; unicode-bidi: isolate; text-align: left; }
.ct-muted { color: var(--ct-text-muted); font-size: 0.9em; }

.ct-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.ct-section { padding: 56px 0; }
.ct-section-narrow { max-width: 720px; }

/* ---- Header / nav ---- */

.ct-header {
  background: var(--ct-surface);
  border-bottom: 1px solid var(--ct-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.ct-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-gap);
  padding: 16px 20px;
  /* Installed as a standalone PWA there's no browser chrome left to clear
     the notch/status bar for us — env() resolves to 0 in an ordinary
     browser tab, so this only ever adds space, never removes it. Requires
     viewport-fit=cover on the <meta name="viewport"> tag (see _Layout). */
  padding-top: max(16px, env(safe-area-inset-top));
}

.ct-brand {
  font-family: var(--ct-font);
  font-weight: var(--ct-heading-weight);
  font-size: 1.2rem;
  color: var(--ct-text);
}
.ct-brand:hover { text-decoration: none; color: var(--ct-accent); }

.ct-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.ct-nav a {
  color: var(--ct-text);
  font-weight: 600;
}
.ct-nav a:hover { color: var(--ct-accent); text-decoration: none; }

/* ---- Hero ---- */

.ct-hero {
  padding: 88px 0;
  text-align: center;
  background: linear-gradient(180deg, var(--ct-surface), var(--ct-bg));
  border-bottom: 1px solid var(--ct-border);
}

.ct-hero h1 { font-size: 2.6rem; }

.ct-hero-tagline {
  font-size: 1.15rem;
  color: var(--ct-text-muted);
  max-width: 640px;
  margin: 0 auto 1.6em;
}

/* ---- Hero variants (Services/HeroVariants.cs) ---- */

.ct-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ct-hero-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ct-accent);
  margin-bottom: 10px;
}

/* Image variant — a big photo hero with a dark scrim so white text stays
   readable over any uploaded image. Falls back to the plain Classic
   gradient background when no HeroImageUrl is set (see
   Pages/Shared/Hero/_HeroImage.cshtml). */
.ct-hero-cinematic {
  min-height: 46vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  position: relative;
}
.ct-hero-cinematic.ct-hero-has-image {
  color: #fff;
  border-bottom: none;
}
.ct-hero-cinematic.ct-hero-has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.6));
}
.ct-hero-cinematic.ct-hero-has-image .ct-container { position: relative; z-index: 1; }
.ct-hero-cinematic.ct-hero-has-image .ct-hero-tagline { color: rgba(255,255,255,0.9); }

/* Slider variant — native scroll-snap track, auto-advanced by
   wwwroot/js/hero-slider.js. Same mechanism/markup as
   Raymon.RestaurantTemplate's own .rt-hero-slider. */
.ct-hero-slider { position: relative; background: var(--ct-bg); }
.ct-hero-slider-track {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  min-height: 220px;
  max-height: 380px;
  background: var(--ct-surface);
}

/* Slides stack on top of each other (touch-swipe/dot/timer-driven class
   toggle in hero-slider.js) and cross-fade — smoother and more uniform
   across devices than a scroll-snap "physically slide" approach. The slow
   opacity+scale transition below is the entire animation; the script only
   ever adds/removes .is-active. */
.ct-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s ease, transform 6s ease-out;
  pointer-events: none;
}
.ct-hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.ct-hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55));
}
.ct-hero-slide-content {
  position: relative;
  z-index: 1;
  padding: 24px var(--ct-pad) 28px;
  width: 100%;
}
.ct-hero-slide-content h2 { color: #fff; font-size: 1.4rem; margin: 0 0 4px; }
.ct-hero-slide-content p { color: rgba(255,255,255,0.9); margin: 0 0 14px; }
.ct-hero-slider-dots {
  position: absolute;
  bottom: 14px;
  inset-inline-end: 0;
  inset-inline-start: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.ct-hero-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0;
  transition: width 0.35s ease, border-radius 0.35s ease, background 0.35s ease;
}
.ct-hero-slider-dot.is-active { background: #fff; width: 20px; border-radius: 4px; }

/* Testimonial variant — a quote-led hero, the trust-signal alternative to
   leading with the company's own words. */
.ct-hero-testimonial-inner { max-width: 720px; margin: 0 auto; }
.ct-hero-testimonial-quote {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 24px;
}
.ct-hero-testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}
.ct-hero-testimonial-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ct-hero-testimonial-author div { text-align: start; display: flex; flex-direction: column; }
.ct-hero-testimonial-brand { font-size: 1.3rem; color: var(--ct-text-muted); margin: 0 0 20px; }

/* Stats/Achievements variant — big numbers as the trust signal. */
.ct-hero-stats-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin: 24px 0 32px;
}
.ct-hero-stat { display: flex; flex-direction: column; align-items: center; }
.ct-hero-stat strong { font-size: 2.2rem; color: var(--ct-accent); line-height: 1; }
.ct-hero-stat span { color: var(--ct-text-muted); font-size: 0.9rem; margin-top: 6px; }

@media (max-width: 720px) {
  .ct-hero-cinematic { min-height: 38vh; }
  .ct-hero-testimonial-quote { font-size: 1.2rem; }
  .ct-hero-stats-row { gap: 24px; }
  .ct-hero-stat strong { font-size: 1.7rem; }
}

/* ---- Buttons / links ---- */

.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--ct-radius);
  border: 1px solid transparent;
  font-family: var(--ct-font);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ct-btn:hover { text-decoration: none; transform: translateY(-1px); }

.ct-btn-primary {
  background: var(--ct-accent);
  color: #fff;
  box-shadow: var(--ct-shadow);
}
.ct-btn-primary:hover { box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--ct-accent) 60%, transparent); }

.ct-btn-ghost {
  background: transparent;
  border-color: var(--ct-border);
  color: var(--ct-text);
}
.ct-btn-ghost:hover { border-color: var(--ct-accent); color: var(--ct-accent); }

.ct-link { color: var(--ct-accent); font-weight: 600; }

/* ---- Cards / grids ---- */

.ct-card {
  background: var(--ct-surface);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  padding: var(--ct-pad);
  box-shadow: var(--ct-shadow);
  transform: rotate(var(--ct-tilt));
}

/* ---- Testimonials ---- */

.ct-testimonials { background: var(--ct-surface); }

.ct-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ct-gap);
  margin-top: 24px;
}

.ct-testimonial-quote { font-size: 1.02rem; }

.ct-testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}
.ct-testimonial-author span { color: var(--ct-text-muted); font-size: 0.9rem; }

/* ---- Blog ---- */

.ct-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ct-gap);
  margin-top: 24px;
}

.ct-blog-card { display: flex; flex-direction: column; gap: 10px; }
.ct-blog-card img { border-radius: calc(var(--ct-radius) - 4px); aspect-ratio: 16 / 9; object-fit: cover; }

.ct-blog-hero-image {
  width: 100%;
  border-radius: var(--ct-radius);
  aspect-ratio: 16 / 7;
  object-fit: cover;
  margin-bottom: 24px;
}

.ct-blog-content { max-width: 720px; margin: 0 auto; white-space: pre-line; }

/* ---- FAQ ---- */

.ct-faq-list { display: flex; flex-direction: column; gap: var(--ct-gap); margin-top: 24px; }

.ct-faq-item {
  background: var(--ct-surface);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  padding: var(--ct-pad);
}
.ct-faq-item h3 { margin-bottom: 6px; }
.ct-faq-item p { margin: 0; color: var(--ct-text-muted); }

/* ---- Pricing ---- */

.ct-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ct-gap);
  margin-top: 24px;
  align-items: start;
}

.ct-pricing-card { text-align: center; }
.ct-pricing-card.ct-pricing-highlighted {
  border-color: var(--ct-accent);
  box-shadow: 0 20px 48px -16px color-mix(in srgb, var(--ct-accent) 45%, transparent);
}

.ct-pricing-price {
  font-family: var(--ct-font);
  font-size: 1.6rem;
  font-weight: var(--ct-heading-weight);
  color: var(--ct-accent);
  margin: 10px 0;
}

.ct-pricing-features {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ct-text-muted);
}

/* ---- Contact ---- */

.ct-contact-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 20px 0;
  color: var(--ct-text-muted);
}

.ct-alert {
  border-radius: var(--ct-radius);
  padding: 12px var(--ct-pad);
  margin-bottom: 20px;
}
.ct-alert-success {
  background: color-mix(in srgb, #16a34a 15%, transparent);
  border: 1px solid #16a34a;
  color: #15803d;
}

/* ---- Forms ---- */

.ct-form { display: flex; flex-direction: column; gap: var(--ct-gap); max-width: 560px; }

.ct-form-row { display: flex; flex-direction: column; gap: 6px; }
.ct-form-row label { font-weight: 600; font-size: 0.92rem; }

.ct-form-row input,
.ct-form-row textarea,
.ct-form-row select {
  font-family: var(--ct-font-body);
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: calc(var(--ct-radius) - 4px);
  border: 1px solid var(--ct-border);
  background: var(--ct-surface);
  color: var(--ct-text);
}
.ct-form-row input:focus,
.ct-form-row textarea:focus,
.ct-form-row select:focus {
  outline: none;
  border-color: var(--ct-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-accent) 20%, transparent);
}

.ct-form-row-checkbox { flex-direction: row; align-items: center; gap: 8px; }
.ct-form-row-checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 500; }

.ct-form-error { color: #dc2626; font-size: 0.85rem; }
.ct-form-success { color: #16a34a; font-size: 0.9rem; font-weight: 600; margin: 8px 0; }

.ct-auth-switch { margin-top: 16px; font-size: 0.9rem; }
.ct-auth-switch a { color: var(--ct-accent); font-weight: 600; }

.ct-newsletter-form { margin-top: 8px; }
.ct-newsletter-row { display: flex; gap: 8px; margin-top: 6px; }
.ct-newsletter-row input { flex: 1; min-width: 0; }
.ct-newsletter-message { margin-top: 8px; font-size: 0.9rem; color: var(--ct-text-muted); }

/* ---- Footer ---- */

.ct-footer {
  background: var(--ct-surface);
  border-top: 1px solid var(--ct-border);
  margin-top: 40px;
  padding: 40px 0;
}

.ct-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.ct-footer p { margin: 4px 0; }

.ct-social-links { display: flex; gap: 14px; }
.ct-social-links a { font-weight: 600; }

/* ---- Feature/status pills ---- */

.ct-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
}
.ct-pill-ok { background: color-mix(in srgb, #16a34a 15%, transparent); color: #15803d; border-color: #16a34a; }
.ct-pill-muted { background: color-mix(in srgb, var(--ct-text-muted) 15%, transparent); color: var(--ct-text-muted); border-color: var(--ct-border); }

/* ---- Admin shell ----
 * The sidebar/nav/table/stat-tile/feature-toggle shell now lives in
 * Raymon.AdminUI (adm- prefixed classes) — only the server-generated
 * trend chart SVG (see Services/TrendChart.cs, which hardcodes
 * class="trend-chart" directly in the markup it emits) still needs a
 * rule here. */

.trend-chart {
  width: 100%;
  height: 90px;
  display: block;
}

/* ---- Responsive ---- */

@media (max-width: 720px) {
  .ct-header-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .ct-nav { gap: 14px; }
  .ct-hero { padding: 56px 0; }
  .ct-hero h1 { font-size: 2rem; }
  .ct-section { padding: 40px 0; }
}

/* Responsive CSS backgrounds (see Raymon.PlatformShared.ResponsiveBackgroundTagHelper): smaller copy on narrow screens. */
@media (max-width: 900px) { .bg-resp { background-image: var(--bg-md) !important; } }
@media (max-width: 420px) and (max-resolution: 1.5dppx) { .bg-resp { background-image: var(--bg-sm, var(--bg-md)) !important; } }