/*
Theme Name: Alphech Food Truck
Theme URI: https://alphechglobal.com/
Author: Codex
Description: Custom Elementor-first theme for the Alphech Global Food Truck pages.
Version: 1.2.2
Text Domain: alphech-foodtruck
*/

:root {
  --ft-bg: #f5efe3;
  --ft-paper: #fff8ee;
  --ft-ink: #1f1a17;
  --ft-muted: #6c5f55;
  --ft-accent: #b85c38;
  --ft-accent-2: #2f6f68;
  --ft-border: rgba(31, 26, 23, 0.12);
  --ft-heading: "Cormorant Garamond", Georgia, serif;
  --ft-body: "Inter", "Segoe UI", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(184, 92, 56, 0.12), transparent 26%),
    radial-gradient(circle at top right, rgba(47, 111, 104, 0.12), transparent 22%),
    var(--ft-bg);
  color: var(--ft-ink);
  font-family: var(--ft-body);
}

a {
  color: inherit;
}

.ft-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px 24px;
  box-sizing: border-box;
}

.ft-site-header,
.ft-site-footer {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

.ft-topbar,
.ft-footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ft-nav {
  display: flex;
  gap: 28px;
  font-size: 0.95rem;
  color: #4f463f;
}

.ft-logo {
  font-family: var(--ft-heading);
  font-size: 2rem;
  letter-spacing: 0.02em;
}

.ft-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 18px;
  background: #264247;
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
}

.ft-hero,
.ft-section {
  background: var(--ft-paper);
  border: 1px solid var(--ft-border);
  border-radius: 24px;
  box-shadow: 0 16px 45px rgba(34, 26, 20, 0.08);
  overflow: hidden;
}

.ft-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 760px;
}

.ft-hero-copy {
  padding: clamp(34px, 4.5vw, 64px) 48px 48px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.ft-kicker,
.ft-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  color: var(--ft-accent);
  font-weight: 700;
}

.ft-title,
.ft-section-title {
  margin: 0;
  font-family: var(--ft-heading);
  line-height: 0.92;
  letter-spacing: 0.03em;
}

.ft-title-accent {
  font-size: 1em;
}

.ft-title-accent-2 {
  color: #d9b26e;
}

.ft-title {
  font-size: clamp(4.6rem, 9.4vw, 8rem);
}

.ft-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ft-photo,
.ft-map,
.ft-placeholder {
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 40px rgba(22, 17, 13, 0.18);
}

.ft-photo {
  min-height: 170px;
}

.ft-photo.large {
  min-height: 230px;
}

.ft-photo.dark {
  background: linear-gradient(135deg, #181818, #3b2a18);
}

.ft-photo.food1 {
  background: linear-gradient(135deg, #33231d, #8d5a2b);
}

.ft-photo.food2 {
  background: linear-gradient(135deg, #e9ddcf, #c28f58);
}

.ft-photo.food3 {
  background: linear-gradient(135deg, #855838, #d6a978);
}

.ft-photo.food4 {
  background: linear-gradient(135deg, #d8d0bf, #77a54f);
}

.ft-photo.food5 {
  background: linear-gradient(135deg, #e6e0d5, #9b5b31);
}

.ft-photo.food6 {
  background: linear-gradient(135deg, #d9a957, #2f91aa);
}

.ft-statbar {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 18px 0 0;
  border-top: 1px solid var(--ft-border);
}

.ft-stat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #5d534b;
  font-size: 0.95rem;
}

.ft-stat > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ft-stat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 8px;
  background: #d9b26e;
  flex: 0 0 auto;
}

.ft-stat strong {
  display: block;
  color: var(--ft-ink);
  margin-bottom: 0;
}

.ft-text {
  max-width: 54ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ft-muted);
}

.ft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ft-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  font-weight: 700;
}

.ft-button.primary {
  background: var(--ft-ink);
  color: var(--ft-paper);
}

.ft-button.secondary {
  border-color: var(--ft-border);
  background: rgba(255, 255, 255, 0.5);
}

.ft-button.highlight {
  background: #d9b26e;
  color: #1f1a17;
  margin-top: 14px;
}

.ft-hero-art {
  min-height: 760px;
  background: #fff;
  position: relative;
}

.ft-hero-art::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 20px;
}

.ft-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ft-grid.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ft-grid.testimonials {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.ft-grid.menu {
  grid-template-columns: 1.05fr 0.95fr 1.05fr;
}

.ft-menu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 24px;
}

.ft-menu-tab {
  padding: 12px 22px;
  border: 1px solid rgba(31, 26, 23, 0.16);
  background: rgba(255,255,255,0.9);
  color: var(--ft-ink);
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ft-menu-tab.active,
.ft-menu-tab:hover {
  background: var(--ft-accent);
  color: white;
  border-color: transparent;
}

.ft-menu-panels {
  display: block;
}

.ft-menu-panel {
  display: none;
}

.ft-menu-panel.active,
.ft-menu-panel:target {
  display: block;
}

.ft-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 24px;
}

.ft-menu-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ft-border);
  border-radius: 24px;
  overflow: hidden;
  background: white;
  box-shadow: 0 12px 34px rgba(34, 26, 20, 0.08);
}

.ft-menu-image {
  min-height: 220px;
  background-size: cover;
  background-position: center;
}

.ft-menu-card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ft-menu-card-body h3 {
  margin: 0;
  font-size: 1.3rem;
}

.ft-menu-card-body p {
  margin: 0;
  color: var(--ft-muted);
  line-height: 1.7;
}

.ft-menu-price {
  margin-top: auto;
  font-weight: 700;
  color: var(--ft-ink);
}

.ft-menu-image-halloumi { background: linear-gradient(135deg, #f7d4b4, #e3a166); }
.ft-menu-image-tzatziki { background: linear-gradient(135deg, #edf4e8, #c0d9c2); }
.ft-menu-image-feta { background: linear-gradient(135deg, #f3e5d4, #d8b67d); }
.ft-menu-image-souvlaki { background: linear-gradient(135deg, #b05026, #902f16); }
.ft-menu-image-lamb { background: linear-gradient(135deg, #7e3f2e, #3c1d14); }
.ft-menu-image-vegan { background: linear-gradient(135deg, #b8d8a2, #5a8a4f); }
.ft-menu-image-chips { background: linear-gradient(135deg, #efd9b6, #d3a15d); }
.ft-menu-image-salad { background: linear-gradient(135deg, #cee0c2, #8fa56e); }
.ft-menu-image-bread { background: linear-gradient(135deg, #f7e0c4, #c48f58); }

@media (max-width: 960px) {
  .ft-menu-grid {
    grid-template-columns: 1fr;
  }
}

.ft-banner {
  background: #0d0d0d;
  color: #f6f0e6;
  border-radius: 16px;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ft-block {
  margin-top: 24px;
}

.ft-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ft-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}

.ft-menu-page {
  display: grid;
  gap: 32px;
}

.ft-menu-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 28px;
  padding: clamp(32px, 3.5vw, 56px);
  background: #212121;
  border-radius: 28px;
  overflow: hidden;
}

.ft-menu-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

.ft-menu-hero-pill {
  background: rgba(217, 178, 110, 0.12);
  color: #d9b26e;
  border: 1px solid rgba(217, 178, 110, 0.25);
}

.ft-menu-hero-title {
  color: #fff;
  max-width: 10ch;
}

.ft-menu-hero .ft-text {
  max-width: 46ch;
  color: rgba(255,255,255,0.82);
}

.ft-menu-hero .ft-button.primary {
  background: #d9b26e;
  color: #1f1a17;
}

.ft-menu-hero-images {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-rows: repeat(2, minmax(180px, 1fr));
  gap: 18px;
}

.ft-menu-hero-column {
  display: grid;
  gap: 18px;
}

.ft-menu-hero-img {
  min-height: 230px;
  background-size: cover;
  background-position: center;
  border-radius: 22px;
}

.ft-menu-section-head {
  align-items: flex-end;
}

.ft-menu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 32px 0 24px;
}

.ft-menu-tab {
  border-color: transparent;
  background: transparent;
  color: var(--ft-ink);
}

.ft-menu-tab.active,
.ft-menu-tab:hover {
  background: rgba(217, 178, 110, 0.12);
  color: #d9b26e;
  border-color: rgba(217, 178, 110, 0.24);
}

.ft-menu-page .ft-menu-grid {
  grid-template-columns: 1fr;
}

.ft-menu-page .ft-menu-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.3fr);
  gap: 18px;
  align-items: stretch;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
}

.ft-menu-page .ft-menu-card-body {
  background: #fff;
  padding: 28px 28px 28px 24px;
  border: 1px solid var(--ft-border);
  border-radius: 0 24px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ft-menu-page .ft-menu-image {
  min-height: 280px;
  border-radius: 24px 0 0 24px;
}

.ft-menu-page .ft-menu-card h3 {
  margin-top: 0;
  font-size: 1.5rem;
}

.ft-menu-page .ft-menu-card-body p,
.ft-menu-page .ft-menu-price {
  color: var(--ft-muted);
}

.ft-menu-page .ft-menu-card-body .ft-menu-price {
  margin-top: auto;
  font-weight: 700;
  color: var(--ft-ink);
}

.ft-menu-page .ft-menu-grid {
  counter-reset: ft-menu-item;
}

.ft-menu-page .ft-menu-card::before {
  counter-increment: ft-menu-item;
  content: counter(ft-menu-item, decimal-leading-zero);
  position: absolute;
  top: 22px;
  left: 22px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #d9b26e;
  color: #1f1a17;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}
  font-size: 3.4rem;
}

.ft-section-title-wide {
  font-size: 3.6rem;
}

.ft-feature-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background: #f7f2e8;
}

.ft-banner em {
  font-family: var(--ft-heading);
  font-size: 1.8rem;
  font-style: italic;
}

.ft-schedule,
.ft-map,
.ft-cta-panel,
.ft-testimonial,
.ft-photo-tile {
  border: 1px solid var(--ft-border);
  border-radius: 22px;
  background: rgba(255,255,255,0.8);
  overflow: hidden;
}

.ft-schedule {
  padding: 22px;
}

.schedule-layout {
  grid-template-columns: 0.95fr 1.05fr;
}

.ft-schedule-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(31, 26, 23, 0.08);
}

.ft-schedule-item:last-child {
  border-bottom: 0;
}

.ft-map {
  min-height: 500px;
  background: linear-gradient(180deg, #d7c3a7, #f4dfbf);
  position: relative;
}

.ft-map::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 52%, rgba(61, 53, 47, 0.55) 0 3px, transparent 4px),
    radial-gradient(circle at 47% 58%, rgba(61, 53, 47, 0.42) 0 36px, transparent 37px),
    radial-gradient(circle at 67% 30%, rgba(61, 53, 47, 0.36) 0 44px, transparent 45px),
    radial-gradient(circle at 22% 40%, rgba(61, 53, 47, 0.32) 0 46px, transparent 47px);
  opacity: 0.9;
}

.ft-map-pin {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 0;
  background: #ef5a58;
  transform-origin: center;
  rotate: -45deg;
  box-shadow: 0 0 0 10px rgba(239, 90, 88, 0.18);
}

.ft-map-card {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: white;
  border-radius: 14px;
  padding: 14px 16px;
  min-width: 220px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.16);
}

.ft-testimonial {
  padding: 22px;
  background: #f7f7f5;
}

.ft-testimonial.alt {
  background: #f0ebe5;
}

.ft-testimonial.featured {
  background: #bababa;
  color: #fff;
}

.ft-ig-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.ft-photo-tile {
  min-height: 110px;
  background: linear-gradient(135deg, #4c341f, #d9b26e);
}

.ft-cta-panel {
  padding: 32px 28px;
  text-align: center;
  background: #f7f2eb;
  box-shadow: 0 22px 60px rgba(37, 29, 23, 0.1);
}

.ft-actions-center {
  justify-content: center;
  margin-top: 18px;
}

.ft-mini {
  font-size: 0.9rem;
  color: var(--ft-muted);
}

.ft-footer-grid {
  align-items: flex-start;
  padding-top: 24px;
  border-top: 1px solid var(--ft-border);
}

.ft-section {
  padding: clamp(22px, 3.2vw, 34px);
}

.ft-block + .ft-block {
  margin-top: 22px;
}

.ft-section-title {
  font-size: clamp(2.6rem, 6vw, 5rem);
  margin-bottom: 10px;
}

.ft-card {
  border: 1px solid var(--ft-border);
  border-radius: 22px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.64);
}

.ft-card h3 {
  margin-top: 0;
  font-family: var(--ft-heading);
  font-size: 2rem;
  letter-spacing: 0.04em;
}

.ft-card p {
  margin-bottom: 0;
  color: var(--ft-muted);
  line-height: 1.65;
}

.ft-contact-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 30px;
  align-items: start;
}

.ft-contact-section-label,
.ft-contact-label {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  color: #b5943a;
  margin-bottom: 14px;
}

.ft-contact-summary-panel {
  display: grid;
  gap: 18px;
}

.ft-contact-summary-card {
  border: 1px solid rgba(31, 26, 23, 0.08);
  border-radius: 24px;
  padding: 24px 26px;
  background: rgba(255,255,255,0.96);
}

.ft-contact-summary-card h2,
.ft-contact-summary-card p {
  margin: 0;
}

.ft-contact-summary-card .ft-contact-heading {
  display: block;
  font-weight: 700;
  color: var(--ft-ink);
  margin-bottom: 10px;
}

.ft-contact-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 30px;
  margin-top: 32px;
}

.ft-contact-form,
.ft-contact-panel {
  background: white;
  border: 1px solid var(--ft-border);
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 18px 52px rgba(22, 17, 13, 0.08);
}

.ft-contact-form .ft-form-field {
  display: grid;
  gap: 10px;
}

.ft-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ft-form-grid.ft-form-grid-full {
  grid-template-columns: 1fr;
}

.ft-form-field span {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ft-ink);
}

.ft-contact-form input,
.ft-contact-form select,
.ft-contact-form textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(31, 26, 23, 0.12);
  border-radius: 16px;
  font-family: var(--ft-body);
  font-size: 0.95rem;
  color: var(--ft-ink);
  background: #fff;
  box-sizing: border-box;
}

.ft-contact-form textarea {
  min-height: 180px;
  resize: vertical;
}

.ft-form-field-full {
  grid-column: 1 / -1;
}

.ft-contact-form .ft-button {
  margin-top: 20px;
  width: auto;
  background: #b5943a;
  color: #fff;
  border-color: transparent;
  padding: 16px 36px;
  font-size: 0.95rem;
  border-radius: 10px;
}

.ft-contact-note {
  margin-top: 18px;
  color: var(--ft-muted);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ft-contact-note-icon::before {
  content: '⏱';
  display: inline-block;
  font-size: 1rem;
}

.ft-contact-panel {
  display: grid;
  gap: 0;
}

.ft-contact-card {
  border: 1px solid rgba(31, 26, 23, 0.08);
  border-radius: 24px;
  padding: 28px;
  background: white;
}

.ft-contact-card-title {
  margin: 0 0 10px;
  font-family: var(--ft-heading);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ft-ink);
}

.ft-contact-form-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.ft-contact-detail-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: flex-start;
  margin-top: 24px;
}

.ft-contact-social {
  margin-top: 24px;
}

.ft-contact-social .ft-contact-label {
  margin-bottom: 14px;
}

.ft-contact-instagram-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.ft-contact-view-all {
  color: var(--ft-accent);
  text-decoration: none;
  font-size: 0.95rem;
}

.ft-instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.ft-instagram-grid-item {
  min-height: 90px;
  border-radius: 12px;
}

.ft-contact-card-intro p {
  margin: 18px 0 0;
  color: var(--ft-muted);
  line-height: 1.75;
}

.ft-contact-detail-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
}

.ft-contact-hours {
  color: #b5943a;
  font-size: 0.875rem;
  margin: 4px 0 0;
}

.ft-contact-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(181, 148, 58, 0.1);
  color: #b5943a;
  flex-shrink: 0;
}

.ft-contact-detail-row p,
.ft-contact-detail-row a {
  margin: 0;
  color: var(--ft-ink);
  line-height: 1.6;
}

.ft-contact-detail-row a {
  color: var(--ft-accent);
  text-decoration: none;
}

.ft-contact-form-head {
  display: grid;
  gap: 18px;
  margin-top: 32px;
  margin-bottom: 12px;
}

.ft-contact-social {
  padding-top: 10px;
}

.ft-contact-social .ft-contact-label {
  margin-bottom: 18px;
}

.ft-social-icons {
  display: flex;
  gap: 12px;
}

.ft-social-icons a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(31, 26, 23, 0.14);
  border-radius: 50%;
  text-decoration: none;
  color: var(--ft-ink);
  background: #fff;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ft-social-icons a:hover {
  border-color: #b5943a;
  color: #b5943a;
}

.ft-contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  gap: 32px;
  padding: 36px;
  background: linear-gradient(180deg, #171717 0%, #111 100%);
  border-radius: 32px;
  color: #fff;
  overflow: hidden;
}

.ft-contact-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.ft-contact-hero-pill {
  background: rgba(255, 255, 255, 0.12);
  color: #f6e8c1;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 10px 18px;
}

.ft-contact-hero-title {
  font-size: clamp(3.8rem, 5vw, 5.8rem);
  line-height: 0.95;
  max-width: 13ch;
}

.ft-contact-hero-text {
  max-width: 54ch;
  color: rgba(255,255,255,0.82);
}

.ft-contact-hero-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-content: center;
}

.ft-contact-hero-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.ft-contact-hero-image {
  min-height: 240px;
  border-radius: 28px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 56px rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.15);
}

.ft-contact-hero-image.large {
  min-height: 100%;
}

.ft-contact-panel {
  display: grid;
  gap: 20px;
}

.ft-contact-view-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 960px) {
  .ft-contact-head,
  .ft-contact-layout,
  .ft-form-grid {
    grid-template-columns: 1fr;
  }

  .ft-contact-summary-card,
  .ft-contact-form,
  .ft-contact-panel {
    padding: 24px;
  }
}

@media (max-width: 680px) {
  .ft-social-icons {
    justify-content: flex-start;
  }

  .ft-contact-form input,
  .ft-contact-form select,
  .ft-contact-form textarea {
    padding: 14px 15px;
  }
}

@media (max-width: 960px) {
  .ft-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ft-hero-art {
    min-height: 420px;
  }

  .ft-grid {
    grid-template-columns: 1fr;
  }

  .ft-grid.five,
  .ft-grid.menu,
  .ft-grid.testimonials,
  .ft-ig-row,
  .ft-statbar {
    grid-template-columns: 1fr;
  }

  .ft-topbar,
  .ft-footer-grid,
  .ft-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ft-section-head,
  .schedule-layout {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== Catch The Truck — schedule timeline (native Elementor widgets) ===== */
.ft-tl-day .elementor-heading-title { line-height: 1.1; }

/* Vertical connecting line drawn on each dot column (targeted by element id) */
.elementor-element-tldot001, .elementor-element-tldot002,
.elementor-element-tldot003, .elementor-element-tldot004 { position: relative; }
.elementor-element-tldot001 > .elementor-widget-wrap::before,
.elementor-element-tldot002 > .elementor-widget-wrap::before,
.elementor-element-tldot003 > .elementor-widget-wrap::before,
.elementor-element-tldot004 > .elementor-widget-wrap::before {
  content: ""; position: absolute; left: 8px; top: 0; bottom: 0;
  width: 2px; transform: translateX(-50%); background: #e7e3dc; z-index: 0;
}
.elementor-element-tldot001 > .elementor-widget-wrap::before { top: 9px; }
.elementor-element-tldot004 > .elementor-widget-wrap::before { bottom: auto; height: 9px; }

/* Dot sits on top of the line */
.ft-tl-dot { position: relative; z-index: 1; }
.ft-tl-dot .elementor-heading-title { line-height: 1; margin-top: 1px; text-align: left !important; }

/* Friday "Serving Now" pinned to the far right of its row */
.elementor-element-tlbody01, .elementor-element-tlbody02,
.elementor-element-tlbody03, .elementor-element-tlbody04 { position: relative; }
.elementor-element.ft-tl-badge { margin: -24px 0 0 0 !important; text-align: right; }
.ft-tl-badge .elementor-heading-title { display: inline; letter-spacing: .02em; }

/* Time row gets a clock icon */
.ft-tl-time .elementor-heading-title { display: inline-flex; align-items: center; gap: 7px; }
.ft-tl-time .elementor-heading-title::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238a8a8a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpolyline%20points='12%207%2012%2012%2015%2014'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============================================================
   Favorites "Soul of Cyprus" photo cards
   Native Elementor widgets + gradient overlay.
   Columns are targeted by element id because this Elementor
   build does not output custom CSS classes on columns.
   ============================================================ */
.elementor-element-a824f816 > .elementor-widget-wrap,
.elementor-element-c87dd760 > .elementor-widget-wrap,
.elementor-element-c6e6c84c > .elementor-widget-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.elementor-element-a824f816 > .elementor-widget-wrap,
.elementor-element-c87dd760 > .elementor-widget-wrap { min-height: 560px; }
.elementor-element-c6e6c84c > .elementor-widget-wrap { min-height: 240px; align-items: flex-start; }

/* gradient overlays */
.elementor-element-a824f816 > .elementor-widget-wrap::before,
.elementor-element-c87dd760 > .elementor-widget-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
}
.elementor-element-c6e6c84c > .elementor-widget-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
}
/* keep text/badges above the overlay */
.elementor-element-a824f816 > .elementor-widget-wrap > .elementor-element,
.elementor-element-c87dd760 > .elementor-widget-wrap > .elementor-element,
.elementor-element-c6e6c84c > .elementor-widget-wrap > .elementor-element {
  position: relative;
  z-index: 2;
}

/* pill badges (heading widget styled as a chip) */
.ft-badge .elementor-heading-title {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
}
.ft-badge-gold .elementor-heading-title {
  display: inline-block;
  background: rgba(201,168,76,0.9);
  color: #0a0a0a;
  padding: 4px 12px;
  border-radius: 999px;
}

/* Instagram grid tiles -> square crop (native Image widgets) */
.ft-ig-img img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  display: block;
  border-radius: 10px;
}

/* ===== CTA (Bringing the Truck to You) — center the two buttons as a group ===== */
.elementor-element-8e1cfc46 .elementor-inner-section > .elementor-container {
  justify-content: center !important;
  gap: 14px;
}
.elementor-element-8e1cfc46 .elementor-inner-section > .elementor-container > .elementor-column {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* ===== "Our Favorites" eyebrow — shrink pill to content width & center ===== */
.elementor-element.elementor-element-13560e74 {
  display: block;
  width: max-content !important;
  max-width: 100%;
  align-self: center;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 6px 20px;
}

/* ===== Hero buttons — reduce the gap, keep left-aligned ===== */
.elementor-element-8738e058 > .elementor-container {
  justify-content: flex-start !important;
  gap: 14px;
}
.elementor-element-8738e058 > .elementor-container > .elementor-column {
  width: auto !important;
  flex: 0 0 auto !important;
}
.elementor-element-8738e058 .elementor-button { white-space: nowrap; }

/* ===== Testimonials — masonry grid (tall sides, stacked middle) ===== */
.elementor-element-f38672fc > .elementor-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.elementor-element-f38672fc > .elementor-container > .elementor-column { width: auto !important; }
.elementor-element-cb7524d7 { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.elementor-element-dd00005  { grid-column: 2; grid-row: 1; align-self: start; }
.elementor-element-davecol01{ grid-column: 2; grid-row: 2; align-self: start; }
.elementor-element-5c385d6d { grid-column: 3; grid-row: 1 / span 2; align-self: start; }

/* ============================================================
   Hero photo cards — restore the tilt.
   Elementor's transform var (--e-transform-rotateZ) is set but not
   applied in this build, so apply the rotation directly by id.
   ============================================================ */
.elementor-7 .elementor-element.elementor-element-55f21e8e { transform: rotate(-4deg); }
.elementor-7 .elementor-element.elementor-element-0c936eb8 { transform: rotate(4deg); }
.elementor-7 .elementor-element.elementor-element-4afda467 { transform: rotate(-3deg); }

/* =================================================================
   Design Fix Overrides — matching Homepage.pdf
   ================================================================= */

/* ── 1. Body: plain warm-white, no gradient bleed between sections ── */
body {
  background: #f8f6f2 !important;
}

/* ── 2. WordPress admin-bar: hide it on the canvas template so it
        doesn't push or overlay page content during preview ────────── */
.elementor-template-canvas #wpadminbar {
  display: none !important;
}
.admin-bar body { margin-top: 0 !important; }
.admin-bar html { margin-top: 0 !important; }

/* ── 3. Eliminate any stray margin between top-level sections ──────── */
.elementor-7 > .elementor-section,
.elementor-7 > .e-con {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── 6. Hero section spacers: reduce 80 px top/bottom dead-space ─────
        Elementor spacers inside the hero are 80 px each — halve them
        so the hero height is closer to the compact PDF version.      */
.elementor-element-7d084a5c .elementor-element-eb3195eb .elementor-spacer-inner {
  height: 50px !important;
}
.elementor-element-7d084a5c .elementor-element-feb604f8 .elementor-spacer-inner {
  height: 50px !important;
}

/* ── 7. Favorites section: reduce 80 px padding to 60 px ─────────── */
.elementor-7 .elementor-element.elementor-element-741c5d79 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* ── 8. Schedule section: reduce 80 px padding to 60 px ─────────── */
.elementor-7 .elementor-element.elementor-element-4ec4c9af {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* ── 9. Testimonials section: tighten bottom padding ──────────────── */
.elementor-7 .elementor-element.elementor-element-7adff7e8 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* ── 10. Instagram / social section ─────────────────────────────── */
.elementor-7 .elementor-element.elementor-element-d913a34c {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* ── 11. CTA (Bringing the Truck to You): tighten to 60 px ─────────── */
.elementor-7 .elementor-element.elementor-element-8e1cfc46 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* ── 12. Footer: tighten top padding ─────────────────────────────── */
.elementor-7 .elementor-element.elementor-element-437a42da {
  padding-top: 48px !important;
}

/* ── 13. Container consistency on wide screens (> 1440 px) ──────────
        When the viewport exceeds the design width, align full-width
        sections by centering their inner content to the same
        max-width as boxed containers.                                 */
@media (min-width: 1441px) {
  .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-section.elementor-section-full_width > .elementor-container {
    max-width: 1440px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    box-sizing: border-box;
  }
  /* Pull hero left-column text to align with boxed container edge */
  .elementor-element-7d084a5c
  .elementor-element-4ae12a9a > .elementor-element-populated {
    padding-left: calc((100vw - 1440px) / 2) !important;
  }
}

/* ── 14. Prevent horizontal overflow — body excluded so fixed header works ── */
.elementor.elementor-7 {
  overflow-x: hidden;
}

/* =================================================================
   Common Site Header  (ft-site-header)
   Injected via wp_body_open — appears on every page before the
   Elementor canvas content.  The duplicate Elementor-built header
   sections are hidden below so only one header is ever visible.
   ================================================================= */

/* Hide the Elementor-built header on the homepage (ID 897a3e96)
   and on all inner pages that share the same section (ID 0b113dbf). */
.elementor-element.elementor-element-897a3e96,
.elementor-element.elementor-element-0b113dbf {
  display: none !important;
}

/* fixed so it always covers full viewport width regardless of overflow rules */
.ft-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100vw;
  min-width: 100vw;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

/* Push page content below the fixed header (90px ≈ logo + padding) */
body.elementor-template-canvas {
  padding-top: 55px;
}

 
.ft-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 60px;
  gap: 24px;
  box-sizing: border-box;
}

/* Logo */
.ft-header-logo a {
  display: block;
  line-height: 0;
}
.ft-header-logo img,
.ft-header-logo .custom-logo {
  width: 70px !important;
  height: auto !important;
  display: block;
}
.ft-logo-text-fallback {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
  white-space: nowrap;
}

/* Nav list */
.ft-header-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.ft-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 32px;
  align-items: center;
}
.ft-nav-list li {
  margin: 0;
  padding: 0;
}
.ft-nav-list li a {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.ft-nav-list li a:hover,
.ft-nav-list li.current-menu-item > a,
.ft-nav-list li.current-page-ancestor > a {
  color: #b5943a;
}

/* "Find Us" pill button */
.ft-header-find-us {
  display: inline-flex;
  align-items: center;
  padding: 9px 22px;
  background: #1a1a1a;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 100px;
  white-space: nowrap;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.ft-header-find-us:hover {
  background: #333333;
  color: #ffffff;
  text-decoration: none;
}

/* ── Hamburger button (hidden on desktop) ── */
.ft-ham-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #1a1a1a;
  padding: 8px;
  border-radius: 8px;
  flex-shrink: 0;
  margin-left: auto;
  line-height: 0;
  transition: background 0.15s;
}
.ft-ham-btn:hover { background: rgba(0,0,0,0.06); }

/* ── Mobile slide-in panel ── */
.ft-mob-panel {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 88vw;
  height: 100vh;
  background: #ffffff;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 40px rgba(0,0,0,0.14);
  transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.ft-mob-panel.ft-mob-open { right: 0; }

.ft-mob-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.ft-mob-panel-brand {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
}
.ft-mob-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #1a1a1a;
  padding: 6px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: background 0.15s;
}
.ft-mob-close:hover { background: rgba(0,0,0,0.06); }

.ft-mob-nav { flex: 1; }
.ft-mob-nav-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.ft-mob-nav-list li { margin: 0; padding: 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.ft-mob-nav-list li a {
  display: block;
  padding: 15px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.ft-mob-nav-list li a:hover,
.ft-mob-nav-list li.current-menu-item > a {
  background: #f8f4ee;
  color: #b5943a;
}

.ft-mob-panel-footer {
  padding: 20px 24px 60px;
  flex-shrink: 0;
}
.ft-mob-find-us {
  display: block;
  background: #1a1a1a;
  color: #ffffff;
  padding: 14px 22px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s;
}
.ft-mob-find-us:hover { background: #333333; color: #ffffff; }

/* Dark backdrop */
.ft-mob-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 999998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.ft-mob-overlay.ft-mob-open {
  opacity: 1;
  pointer-events: auto;
}

/* Lock body scroll when panel is open */
body.ft-mob-open { overflow: hidden !important; }

/* ── Mobile breakpoint ── */
@media (max-width: 768px) {
  .ft-header-inner {
    padding: 10px 20px;
    gap: 12px;
  }
  /* Hide desktop nav and Find Us on mobile */
  .ft-header-nav,
  .ft-header-find-us { display: none !important; }
  /* Show hamburger */
  .ft-ham-btn { display: flex !important; }
}

/* ── Tablet: slightly tighter padding ── */
@media (max-width: 1024px) and (min-width: 769px) {
  .ft-header-inner { padding: 8px 32px; }
}

/* =================================================================
   Common Site Footer  (ft-site-footer)
   Rendered via footer.php → template-parts/footer-bar.php on every page.
   ================================================================= */

.ft-site-footer {
  background: #f9f7f4;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-family: 'Inter', sans-serif;
}

.ft-footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 60px 0;
  box-sizing: border-box;
}

/* ── 4-column grid ── */
.ft-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr 1.3fr;
  gap: 48px;
  padding-bottom: 48px;
}

/* ── Logo ── */
.ft-footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  margin-bottom: 14px;
}
.ft-footer-logo span {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0a0a0a;
}

/* ── Brand description ── */
.ft-footer-desc {
  font-size: 0.82rem;
  line-height: 1.75;
  color: #6b6b6b;
  margin: 0 0 20px;
}

/* ── Social icons ── */
.ft-footer-social {
  display: flex;
  gap: 10px;
}
.ft-footer-social-link {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ft-footer-social-link:hover {
  border-color: #c9a84c;
  color: #c9a84c;
  background: rgba(201,168,76,0.06);
}

/* ── Column heading ── */
.ft-footer-heading {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #0a0a0a;
  margin: 0 0 16px;
}

/* ── Quick links ── */
.ft-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ft-footer-links li a {
  font-size: 0.83rem;
  color: #6b6b6b;
  text-decoration: none;
  transition: color 0.2s;
}
.ft-footer-links li a:hover { color: #0a0a0a; }

/* ── Address / hours ── */
.ft-footer-address,
.ft-footer-hours {
  font-size: 0.82rem;
  color: #6b6b6b;
  line-height: 1.75;
  margin: 0 0 12px;
}
.ft-footer-hours strong { color: #0a0a0a; }
.ft-footer-email {
  display: inline-block;
  font-size: 0.82rem;
  color: #c9a84c;
  text-decoration: none;
  margin-bottom: 12px;
  transition: opacity 0.2s;
}
.ft-footer-email:hover { opacity: 0.8; }

/* ── Newsletter ── */
.ft-footer-newsletter-intro {
  font-size: 0.82rem;
  color: #6b6b6b;
  line-height: 1.7;
  margin: 0 0 14px;
}
.ft-footer-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.ft-footer-input {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.83rem;
  color: #0a0a0a;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.ft-footer-input:focus { border-color: #c9a84c; }
.ft-footer-submit {
  background: #c9a84c;
  color: #0a0a0a;
  border: none;
  border-radius: 8px;
  padding: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.83rem;
  transition: background 0.2s;
}
.ft-footer-submit:hover { background: #b8963e; }
.ft-footer-note {
  font-size: 0.75rem;
  color: #aaa;
  margin: 0;
}

/* ── Bottom bar ── */
.ft-footer-bottom {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.ft-footer-copy {
  font-size: 0.76rem;
  color: #aaa;
}
.ft-footer-legal {
  display: flex;
  gap: 20px;
}
.ft-footer-legal a {
  font-size: 0.76rem;
  color: #aaa;
  text-decoration: none;
  transition: color 0.2s;
}
.ft-footer-legal a:hover { color: #6b6b6b; }

/* ── Tablet (769–1024px) ── */
@media (max-width: 1024px) and (min-width: 769px) {
  .ft-footer-inner { padding: 48px 32px 0; }
  .ft-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  .ft-footer-inner { padding: 40px 20px 0; }
  .ft-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }
  .ft-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 0 24px;
  }
  .ft-footer-legal { flex-wrap: wrap; gap: 12px; }
}