/*
 * Kebabia — Elementor pages. Loaded only when Elementor is active. Colours and
 * spacing that people are likely to change live in Elementor's own settings;
 * this file covers typography and component styling.
 */

/* Type and colour come from the theme, not Elementor's kit. */
.elementor-widget-heading .elementor-heading-title { font-family: var(--kb-display); font-weight: 400; line-height: 0.98; letter-spacing: 0.005em; text-transform: uppercase; color: inherit; text-wrap: balance; }
.elementor-widget-text-editor { color: inherit; font-family: var(--kb-text); }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
h1.elementor-heading-title { font-size: clamp(56px, 9vw, 132px); }
h2.elementor-heading-title { font-size: clamp(42px, 6vw, 84px); }
h3.elementor-heading-title { font-size: clamp(26px, 2.6vw, 34px); }
.kb-dark, .kb-red, .kb-hero { color: var(--kb-cream); }
.kb-eyebrow p { margin: 0; }
.kb-center { text-align: center; align-items: center; }
.kb-center .kb-lead { margin-inline: auto; }

/* Buttons: chunky stickers with a hard shadow */
.kb-btn .elementor-button {
	font-family: var(--kb-text); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2;
	padding: 15px 26px; border-radius: 10px; border: 2px solid var(--kb-ink);
	background: var(--kb-red); color: var(--kb-cream); box-shadow: 4px 4px 0 var(--kb-ink);
	transition: transform 0.2s var(--kb-ease), box-shadow 0.2s var(--kb-ease), background-color 0.2s;
}
.kb-btn .elementor-button:hover, .kb-btn .elementor-button:focus-visible { color: var(--kb-cream); background: var(--kb-red-2); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--kb-ink); }
.kb-btn .elementor-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--kb-ink); }
.kb-btn-outline .elementor-button { background: transparent; color: var(--kb-ink); }
.kb-btn-outline .elementor-button:hover { background: var(--kb-flame); color: var(--kb-ink); }
.kb-dark .kb-btn .elementor-button, .kb-red .kb-btn .elementor-button { box-shadow: 4px 4px 0 var(--kb-flame); }
.kb-dark .kb-btn-outline .elementor-button, .kb-red .kb-btn-outline .elementor-button { color: var(--kb-cream); border-color: var(--kb-cream); }
.kb-dark .kb-btn-outline .elementor-button:hover, .kb-red .kb-btn-outline .elementor-button:hover { color: var(--kb-ink); border-color: var(--kb-ink); }

/* Hero: flame photo under a charcoal wash, text on the left, spinning seal on the right */
.kb-hero { position: relative; overflow: hidden; }
.kb-hero::before, .e-con.kb-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(28, 23, 21, 0.95) 0%, rgba(28, 23, 21, 0.78) 42%, rgba(28, 23, 21, 0.15) 100%); }
/* Elementor containers use ::before for their own background overlay, so the selectors
   below also name .e-con to win over it. */
.kb-hero > * { position: relative; z-index: 1; }
/* The hero text lines up with the header; the seal sits at the right of that same box. */
.kb-hero > .e-con-inner { position: relative; }
.kb-hero__text { max-width: 760px; }
.kb-hero h1.elementor-heading-title { font-size: clamp(64px, 11vw, 168px); line-height: 0.9; }
.kb-hero .kb-outline { -webkit-text-stroke: 2px var(--kb-flame); color: transparent; }
.kb-hero .aku-open { color: rgba(251, 239, 217, 0.85); }
.kb-hero__seal { position: absolute !important; right: clamp(20px, 7vw, 120px); bottom: clamp(90px, 12vw, 160px); width: clamp(120px, 14vw, 180px) !important; }
.kb-seal { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.kb-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kb-seal text { font: 700 15px var(--kb-text); letter-spacing: 0.22em; text-transform: uppercase; fill: var(--kb-cream); }
.kb-seal span { width: 54%; aspect-ratio: 1; border-radius: 50%; background: var(--kb-red); border: 2px solid var(--kb-flame); display: grid; place-items: center; font-family: var(--kb-display); font-size: clamp(20px, 2.2vw, 30px); text-transform: uppercase; color: var(--kb-cream); }
.kb-hero--short h1.elementor-heading-title { font-size: clamp(56px, 8vw, 120px); }
.kb-hero--short::before, .e-con.kb-hero--short::before { background: linear-gradient(90deg, rgba(28, 23, 21, 0.92) 0%, rgba(28, 23, 21, 0.6) 60%, rgba(28, 23, 21, 0.35) 100%); }
@media (max-width: 767px) {
	/* On phones the text covers the whole photo, so the shade covers it too. */
	.kb-hero::before, .e-con.kb-hero::before { background: linear-gradient(180deg, rgba(28, 23, 21, 0.86) 0%, rgba(28, 23, 21, 0.8) 45%, rgba(28, 23, 21, 0.95) 100%); }
	.kb-hero__seal { right: 16px; bottom: 20px; width: 84px !important; opacity: 0.9; }
}

/* Crossed offer bands */
.kb-bands { position: relative !important; z-index: 3; margin-top: -96px; margin-bottom: -20px; height: 220px !important; min-height: 220px; overflow: hidden !important; pointer-events: none; }
.kb-bands > .elementor-widget-html { position: absolute !important; left: -10%; width: 120% !important; max-width: none !important; }
.kb-bands > .elementor-widget-html:first-child { top: 62px; transform: rotate(-3deg); z-index: 2; }
.kb-bands > .elementor-widget-html:last-child { top: 104px; transform: rotate(2deg); }
.kb-band { padding: 14px 0; border-block: 3px solid var(--kb-ink); overflow: hidden; }
.kb-band .kb-marquee__words { font-family: var(--kb-display); font-size: clamp(24px, 2.6vw, 36px); text-transform: uppercase; line-height: 1; letter-spacing: 0.02em; }
.kb-band--red { background: var(--kb-red); color: var(--kb-cream); }
.kb-band--flame { background: var(--kb-flame); color: var(--kb-ink); }
@media (max-width: 767px) { .kb-bands { margin-top: -70px; height: 150px !important; min-height: 150px; } .kb-bands > .elementor-widget-html:first-child { top: 40px; } .kb-bands > .elementor-widget-html:last-child { top: 78px; } }

/* Section heads with a button on the right */
.kb-head { align-items: flex-end; }
.kb-head .kb-buttons { flex: none; width: auto !important; justify-content: flex-end; }
.kb-head > .e-con:first-child { flex: 1 1 auto; width: auto !important; }
@media (max-width: 767px) { .kb-head .kb-buttons { justify-content: flex-start; } }

/* Story: photo with a red block behind it */
.kb-photo-stack { position: relative; }
.kb-photo-stack::before, .e-con.kb-photo-stack::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; background: var(--kb-red); border-radius: var(--kb-radius); transform: rotate(2.5deg); transition: transform 0.6s var(--kb-bounce); }
.kb-photo-stack:hover::before { transform: rotate(-1.5deg); }
.kb-photo-stack .elementor-widget-image { position: relative; overflow: hidden; border-radius: var(--kb-radius); border: 3px solid var(--kb-ink); }
.kb-photo-stack img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kb-facts-row { border-block: 2px dashed var(--kb-line); }
.kb-facts-row h3.elementor-heading-title { font-size: clamp(44px, 4.6vw, 64px); color: var(--kb-red); }
.kb-facts-row p { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--kb-muted); }
@media (max-width: 767px) {
	.e-con.kb-facts-row { flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; }
	.e-con.kb-facts-row > .kb-fact { width: 33.33% !important; flex: 1 1 0; min-width: 0; }
	.kb-facts-row h3.elementor-heading-title { font-size: 36px; }
	.kb-facts-row p { font-size: 11px; }
	.kb-photo-stack::before, .e-con.kb-photo-stack::before { inset: 14px -10px -14px 10px; }
}

/* Delivery steps */
.kb-step { display: grid !important; grid-template-columns: 76px 1fr; gap: 2px 18px; padding: 16px 0 !important; border-bottom: 1px dashed var(--kb-line-dark); }
.kb-step > .elementor-element { width: auto !important; }
.kb-step__no { grid-row: span 2; font-family: var(--kb-display); font-size: 58px; line-height: 1; }
.kb-step .kb-step__no p, .kb-step__no p { color: transparent !important; -webkit-text-stroke: 2px var(--kb-flame); }
.kb-step h3.elementor-heading-title { font-size: 30px; }
.kb-step p { color: rgba(251, 239, 217, 0.75); }
.kb-steps__media .elementor-widget-image { overflow: hidden; border-radius: var(--kb-radius); border: 3px solid var(--kb-flame); transform: rotate(-2deg); transition: transform 0.6s var(--kb-bounce); }
.kb-steps__media .elementor-widget-image:hover { transform: rotate(1deg) scale(1.02); }
.kb-steps__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kb-order { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; }

/* Branch finder */
.kb-finder { display: block; width: min(100%, 520px); margin-top: 8px; }
.kb-finder input { width: 100%; font: 600 17px var(--kb-text); padding: 16px 20px 16px 52px; border: 3px solid var(--kb-ink); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e1b12' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") 18px center / 22px no-repeat; box-shadow: 5px 5px 0 var(--kb-flame); }
.kb-finder input:focus { outline: none; box-shadow: 7px 7px 0 var(--kb-red); }
.kb-finder__empty { margin-top: 14px; font-weight: 600; color: var(--kb-red); }
.kb-branches { margin-top: 18px; }
.kb-branch { background: #fff; border: 2px solid var(--kb-ink); border-radius: var(--kb-radius); overflow: hidden; box-shadow: 6px 6px 0 var(--kb-ink); transition: translate 0.35s var(--kb-bounce), rotate 0.35s var(--kb-bounce), box-shadow 0.35s, opacity 0.5s, transform 0.8s var(--kb-bounce); }
.kb-branch:hover { translate: -3px -4px; rotate: -0.8deg; box-shadow: 10px 10px 0 var(--kb-red); }
.kb-branch[hidden] { display: none !important; }
.kb-branch__img { overflow: hidden; border-bottom: 2px solid var(--kb-ink); }
.kb-branch__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.9s var(--kb-ease); }
.kb-branch:hover .kb-branch__img img { transform: scale(1.07); }
.kb-branch__note p { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kb-red); background: var(--kb-cream); padding: 4px 10px; border-radius: 999px; }
.kb-branch h3.elementor-heading-title { font-size: 32px; margin: 0; }
.kb-branch__address { font-weight: 600; margin-bottom: 8px !important; }
.kb-branch__hours { list-style: none; margin: 0 0 10px; padding: 0; font-size: 15px; }
.kb-branch__hours li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--kb-line); }
.kb-branch__hours li span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.kb-branch__phone { font-weight: 700; color: var(--kb-red); }

/* Gallery (Elementor's Basic Gallery): tilted polaroids */
.kb-gallery .gallery { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 10px 0 0 !important; }
.kb-gallery .gallery-item { width: auto !important; max-width: none !important; margin: 0 !important; padding: 8px !important; background: var(--kb-cream); border-radius: 8px; transition: rotate 0.5s var(--kb-bounce), scale 0.5s var(--kb-bounce), box-shadow 0.5s, opacity 0.9s var(--kb-ease), transform 1.1s var(--kb-ease); }
.kb-gallery .gallery-item:nth-child(odd) { rotate: -1.5deg; }
.kb-gallery .gallery-item:nth-child(even) { rotate: 1.5deg; }
.kb-gallery .gallery-item:hover { rotate: 0deg; scale: 1.04; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); z-index: 2; }
.kb-gallery .gallery-item img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border: 0 !important; border-radius: 4px; display: block; }
@media (max-width: 767px) { .kb-gallery .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Reviews on red: cream cards, slightly tilted */
.kb-review { background: var(--kb-cream); color: var(--kb-ink); border: 2px solid var(--kb-ink); border-radius: var(--kb-radius); padding: 28px 26px !important; box-shadow: 6px 6px 0 var(--kb-ink); transition: rotate 0.5s var(--kb-bounce), translate 0.5s var(--kb-bounce), opacity 0.9s var(--kb-ease), transform 0.9s var(--kb-ease); }
.kb-review:nth-child(odd) { rotate: -1.2deg; }
.kb-review:nth-child(even) { rotate: 1.2deg; }
.kb-review:hover { rotate: 0deg; translate: 0 -6px; }
.kb-review p { font-size: 19px; font-weight: 500; }
.kb-stars { color: var(--kb-flame); letter-spacing: 0.14em; font-size: 18px !important; margin-bottom: 8px !important; }
.kb-review__by p { font-size: 13px !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kb-red); }

/* Reserve */
.kb-reserve__form { background: var(--kb-ink-2); border: 2px solid var(--kb-line-dark); border-radius: var(--kb-radius); padding: 28px !important; }

/* Page headers in red with a slanted bottom edge */
.kb-page-hero { clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
.kb-page-hero h1.elementor-heading-title { font-size: clamp(64px, 10vw, 150px); }
.kb-page-hero .kb-lead { color: rgba(251, 239, 217, 0.9); }
.kb-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 6px 0 0; }
.kb-legend .aku-spice { color: var(--kb-cream); background: rgba(0, 0, 0, 0.2); padding: 6px 12px; border-radius: 999px; }
.kb-menu-page .aku-menu { gap: clamp(56px, 7vw, 96px); }

/* Branch cards from the [kebabia_branches] shortcode (block editor pages) */
.kb-finder-wrap { display: grid; justify-items: center; margin-bottom: 26px; }
.kb-branches--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 26px; }
.kb-branches--grid .kb-branch__body { padding: 20px 22px 24px; }
.kb-branches--grid .kb-branch h3 { font-size: 32px; margin: 8px 0; }
.kb-branch__note span { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kb-red); background: var(--kb-cream); padding: 4px 10px; border-radius: 999px; }