/* ==========================================================================
   FROZLY EGYPT — COMPONENTS
   ========================================================================== */

/* ---------- Header / Navigation ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--dur-med) var(--ease-editorial), height var(--dur-med) var(--ease-editorial), border-color var(--dur-med) var(--ease-editorial);
  border-bottom: 1px solid transparent;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.site-header.is-scrolled,
.site-header.is-solid {
  background: rgba(244,240,231,0.92);
  backdrop-filter: blur(10px);
  height: 68px;
  border-bottom-color: var(--color-grey-line);
}
body.page-has-dark-hero .site-header:not(.is-scrolled) { color: var(--color-ivory); }
body.page-has-dark-hero .site-header:not(.is-scrolled) .nav-link { color: var(--color-ivory); }

.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.brand-mark { width: 26px; height: 26px; flex-shrink: 0; }

.nav-primary { display: flex; align-items: center; gap: var(--space-l); }
.nav-links { display: flex; align-items: center; gap: var(--space-l); }
.nav-link {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  position: relative;
  padding-block: var(--space-3xs);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-fast) var(--ease-editorial);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { right: 0; }

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

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  padding: var(--space-2xs);
}
.menu-toggle span { display: block; width: 100%; height: 1.5px; background: currentColor; transition: transform var(--dur-fast) var(--ease-editorial), opacity var(--dur-fast) var(--ease-editorial); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-dark);
  color: var(--color-ivory);
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) var(--container-pad);
  transform: translateY(-100%);
  transition: transform var(--dur-med) var(--ease-editorial);
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav ul { display: flex; flex-direction: column; gap: var(--space-m); }
.mobile-nav a { font-size: clamp(1.8rem, 6vw + 1rem, 3rem); font-family: var(--font-display); font-weight: 800; }
.mobile-nav .btn { margin-top: var(--space-l); align-self: flex-start; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-editorial), color var(--dur-fast) var(--ease-editorial), border-color var(--dur-fast) var(--ease-editorial), transform var(--dur-fast) var(--ease-editorial);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-strawberry); color: var(--color-white); }
.btn-primary:hover { background: var(--color-strawberry-dark); }
.btn-secondary { background: transparent; color: var(--color-dark); border-color: var(--color-dark); }
.btn-secondary:hover { background: var(--color-dark); color: var(--color-ivory); }
.btn-on-dark { background: transparent; color: var(--color-ivory); border-color: rgba(244,240,231,0.5); }
.btn-on-dark:hover { background: var(--color-ivory); color: var(--color-dark); border-color: var(--color-ivory); }
.btn-ghost { background: transparent; color: var(--color-strawberry); padding-inline: 0; letter-spacing: var(--ls-label); }
.btn-ghost::after { content: '→'; margin-left: var(--space-2xs); transition: transform var(--dur-fast) var(--ease-editorial); display: inline-block; }
.btn-ghost:hover::after { transform: translateX(4px); }
.btn[disabled], .btn.is-loading { opacity: 0.6; pointer-events: none; }
.btn-block { width: 100%; }

/* ---------- Eyebrow link / breadcrumbs ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); font-size: var(--fs-small); color: var(--color-grey); }
.breadcrumbs a:hover { color: var(--color-strawberry); }
.breadcrumbs .sep { opacity: 0.5; }
.breadcrumbs [aria-current="page"] { color: var(--color-dark); font-weight: 600; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--color-ivory);
  background: var(--color-dark);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media svg { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(27,26,23,0.15) 0%, rgba(27,26,23,0.05) 40%, rgba(27,26,23,0.78) 100%);
}
.hero-content { position: relative; z-index: 2; padding-block: var(--space-3xl) var(--space-2xl); width: 100%; }
.hero-kicker { display: flex; align-items: center; gap: var(--space-s); margin-bottom: var(--space-m); flex-wrap: wrap; }
.hero-title { max-width: 18ch; }
.hero-sub { max-width: 42ch; margin-top: var(--space-m); }
.hero-actions { display: flex; gap: var(--space-m); margin-top: var(--space-l); flex-wrap: wrap; }
.hero-facts { display: flex; gap: var(--space-l); margin-top: var(--space-2xl); flex-wrap: wrap; border-top: 1px solid rgba(244,240,231,0.2); padding-top: var(--space-m); }
.hero-fact dt { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--color-grey); }
.hero-fact dd { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); margin-top: 4px; }

.page-hero {
  padding-top: calc(var(--header-h) + var(--space-2xl));
  padding-bottom: var(--space-2xl);
  background: var(--color-dark);
  color: var(--color-ivory);
}
.page-hero--ivory { background: var(--color-ivory-2); color: var(--color-dark); }

/* ---------- Editorial image block ---------- */
.media-frame { position: relative; overflow: hidden; background: var(--color-ivory-2); }
.media-frame img, .media-frame svg { width: 100%; height: 100%; object-fit: cover; }
.media-ratio-square { aspect-ratio: 1/1; }
.media-ratio-portrait { aspect-ratio: 4/5; }
.media-ratio-wide { aspect-ratio: 16/9; }
.media-ratio-tall { aspect-ratio: 3/4; }
.media-caption { display: flex; justify-content: space-between; gap: var(--space-s); margin-top: var(--space-xs); font-size: var(--fs-meta); color: var(--color-grey); text-transform: uppercase; letter-spacing: var(--ls-label); }

/* ---------- Statement / editorial text block ---------- */
.statement { max-width: 22ch; }
.statement-lede { max-width: 46ch; }

/* ---------- Process / timeline ---------- */
.process-list { display: flex; flex-direction: column; }
.process-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-l);
  padding-block: var(--space-l);
  border-top: 1px solid var(--color-grey-line);
  align-items: start;
}
.process-item:last-child { border-bottom: 1px solid var(--color-grey-line); }
.process-index { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); color: var(--color-strawberry-tint); -webkit-text-stroke: 1px var(--color-strawberry); }
.process-item--dark { border-color: rgba(244,240,231,0.18); }
.process-item--dark:last-child { border-color: rgba(244,240,231,0.18); }
.process-item--dark .process-index { -webkit-text-stroke: 1px var(--color-ivory); color: transparent; }

/* ---------- Editorial product forms row ---------- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-xl);
}
.form-row:nth-child(even) { direction: rtl; }
.form-row:nth-child(even) > * { direction: ltr; }
.form-row + .form-row { border-top: 1px solid var(--color-grey-line); }
.form-tag { display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid var(--color-dark); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: var(--ls-label); margin-bottom: var(--space-s); }

/* ---------- Product portfolio (asymmetric) ---------- */
.portfolio-featured {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-xl);
  align-items: end;
  margin-bottom: var(--space-xl);
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
.portfolio-card { display: flex; flex-direction: column; gap: var(--space-s); }
.portfolio-card h3 { font-size: var(--fs-h4); }
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-s);
}
.status-badge--available { background: var(--color-green-tint); color: var(--color-green); }
.status-badge--featured { background: var(--color-strawberry); color: var(--color-white); }
.status-badge--tbc { background: var(--color-ivory-2); color: var(--color-grey); border: 1px solid var(--color-grey-line); }

/* ---------- Bulk / export dark banners ---------- */
.split-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
}
.split-banner-panel { padding: var(--space-2xl) var(--container-pad); display: flex; flex-direction: column; justify-content: center; }
.split-banner-media { position: relative; }
.split-banner-media svg { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

.pillar-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-l); }
.pillar { border-top: 1px solid rgba(244,240,231,0.2); padding-top: var(--space-m); }
.pillar h3 { margin-bottom: var(--space-xs); }

/* ---------- Spec table ---------- */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table caption { text-align: left; margin-bottom: var(--space-s); }
.spec-table tr { border-top: 1px solid var(--color-grey-line); }
.spec-table tr:last-child { border-bottom: 1px solid var(--color-grey-line); }
.spec-table th, .spec-table td { text-align: left; padding: var(--space-s) var(--space-s) var(--space-s) 0; vertical-align: top; }
.spec-table th { width: 38%; font-weight: 600; color: var(--color-grey); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-label); }
.spec-table td { font-size: var(--fs-body); }
.tbc { color: var(--color-grey); font-style: italic; }

/* ---------- FAQ ---------- */
.faq-item { border-top: 1px solid var(--color-grey-line); }
.faq-item:last-child { border-bottom: 1px solid var(--color-grey-line); }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-m);
  padding-block: var(--space-m);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
}
.faq-icon { flex-shrink: 0; width: 18px; height: 18px; position: relative; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--color-dark); transition: transform var(--dur-fast) var(--ease-editorial); }
.faq-icon::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-icon::after { top: 0; left: 50%; height: 100%; width: 1.5px; transform: translateX(-50%); }
.faq-item[data-open="true"] .faq-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-editorial); }
.faq-answer p { padding-bottom: var(--space-m); max-width: 62ch; color: var(--color-dark); }
.faq-item[data-open="true"] .faq-answer { max-height: 400px; }

/* ---------- Documents ---------- */
.doc-list { display: flex; flex-direction: column; }
.doc-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding-block: var(--space-m); border-top: 1px solid var(--color-grey-line); }
.doc-item:last-child { border-bottom: 1px solid var(--color-grey-line); }
.doc-name { font-weight: 700; }
.doc-meta { color: var(--color-grey); font-size: var(--fs-small); }

/* ---------- Cards (used sparingly) ---------- */
.info-card { padding: var(--space-l); background: var(--color-white); border: 1px solid var(--color-grey-line); }
.info-card--dark { background: var(--color-dark-2); border-color: rgba(244,240,231,0.14); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m) var(--space-l); }
.field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field .req { color: var(--color-strawberry); }
.field input, .field select, .field textarea {
  border: 1px solid var(--color-grey-line);
  background: var(--color-white);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-s);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-editorial);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-strawberry); outline: none; }
.field textarea { resize: vertical; min-height: 120px; }
.field-hint { font-size: var(--fs-small); color: var(--color-grey); }
.field-error { font-size: var(--fs-small); color: var(--color-strawberry); display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-strawberry); }
.field.has-error .field-error { display: block; }
.field input[aria-invalid="true"] { border-color: var(--color-strawberry); }

.rfq-progress { display: flex; gap: var(--space-2xs); margin-bottom: var(--space-l); }
.rfq-progress .step { flex: 1; height: 3px; background: var(--color-grey-line); }
.rfq-progress .step.is-active, .rfq-progress .step.is-done { background: var(--color-strawberry); }
.rfq-step { display: none; }
.rfq-step.is-active { display: block; }
.rfq-step-label { margin-bottom: var(--space-m); }

.form-status { padding: var(--space-m); border-radius: var(--radius-s); margin-top: var(--space-m); display: none; font-size: var(--fs-small); }
.form-status.is-visible { display: block; }
.form-status--success { background: var(--color-green-tint); color: var(--color-green); }
.form-status--error { background: var(--color-strawberry-tint); color: var(--color-strawberry-dark); }
.form-status--config { background: var(--color-ivory-2); color: var(--color-grey); border: 1px dashed var(--color-grey-line); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background: var(--color-dark);
  color: var(--color-ivory);
  overflow: hidden;
}
.cta-band-media { position: absolute; inset: 0; opacity: 0.55; }
.cta-band-content { position: relative; z-index: 1; padding-block: var(--space-3xl); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-dark); color: var(--color-ivory); padding-top: var(--space-2xl); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-xl); padding-bottom: var(--space-2xl); }
.footer-brand p { max-width: 34ch; margin-top: var(--space-m); color: var(--color-grey); }
.footer-col h4 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-label); margin-bottom: var(--space-m); color: var(--color-grey); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-s); }
.footer-col a:hover { color: var(--color-strawberry-tint); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-m); padding-block: var(--space-m); border-top: 1px solid rgba(244,240,231,0.14); font-size: var(--fs-small); color: var(--color-grey); flex-wrap: wrap; }
.footer-legal { display: flex; gap: var(--space-m); flex-wrap: wrap; }

/* ---------- Badge/placeholder note ---------- */
.tbc-note { display: inline-block; font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--color-grey); border: 1px dashed var(--color-grey-line); padding: 0.2rem 0.5rem; border-radius: var(--radius-s); }

/* ---------- 404 ---------- */
.error-page { min-height: 100svh; display: flex; align-items: center; padding-top: var(--header-h); }
.error-actions { display: flex; gap: var(--space-m); flex-wrap: wrap; margin-top: var(--space-l); }