/* Xrif Cruz: visual identity on top of Blocksy. Colours come from the mural on the shop facade. */
:root:root {
	--xc-red: #d9412b;
	--xc-red-dark: #b4321f;
	--xc-yellow: #f4c21b;
	--xc-blue: #1e5bb8;
	--xc-green: #2e9e5b;
	--xc-ink: #1d1b2f;
	--xc-text: #3a3546;
	--xc-sand: #fbf6ec;
	--xc-sand-2: #f4eadb;
	--xc-line: #e8dcc6;
	--xc-radius: 18px;
	--xc-font-head: "Baloo Bhaijaan 2", "Cairo", system-ui, sans-serif;
	--xc-font-body: "Cairo", system-ui, sans-serif;

	--theme-palette-color-1: var(--xc-red);
	--theme-palette-color-2: var(--xc-red-dark);
	--theme-palette-color-3: var(--xc-text);
	--theme-palette-color-4: var(--xc-ink);
	--theme-palette-color-5: var(--xc-line);
	--theme-palette-color-6: var(--xc-sand-2);
	--theme-palette-color-7: var(--xc-sand);
	--theme-palette-color-8: #fff;
	--theme-font-family: var(--xc-font-body);
	--theme-font-size: 17px;
	--theme-line-height: 1.7;
}

body { background: var(--xc-sand); color: var(--xc-text); font-family: var(--xc-font-body); }
h1, h2, h3, h4, .wp-block-heading, .site-title { font-family: var(--xc-font-head); color: var(--xc-ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15; font-weight: 800; margin-top: 2.5rem; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; }
a { color: var(--xc-blue); }
strong { color: var(--xc-ink); }

/* Buttons */
.wp-block-button__link, .ct-button, .xc-menu-cta > a {
	background: var(--xc-red); color: #fff; border-radius: 999px; padding: 0.8em 1.6em;
	font-family: var(--xc-font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.2;
	box-shadow: 0 4px 0 var(--xc-red-dark); transition: transform .15s, box-shadow .15s;
}
.wp-block-button__link:hover, .xc-menu-cta > a:hover { background: var(--xc-red); color: #fff; transform: translateY(2px); box-shadow: 0 2px 0 var(--xc-red-dark); }
.wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link { background: var(--xc-ink); box-shadow: 0 4px 0 #000; }
.wp-block-button__link[href*="wa.me"]::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-inline-end: .5em; vertical-align: -0.18em;
	background: currentColor; -webkit-mask: var(--xc-wa) center/contain no-repeat; mask: var(--xc-wa) center/contain no-repeat; }
:root { --xc-wa: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.4 14.2c-.2.6-1.3 1.2-1.8 1.3-.5 0-1 .3-3.4-.7-2.8-1.1-4.6-4-4.8-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .5l-.4.6-.4.4c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.2.5.1.6 0l.9-1c.2-.3.4-.2.6-.1l2 1c.3.1.5.2.5.3.1.2.1.7-.1 1.4Z"/></svg>'); }

/* Header */
.ct-header [data-row="middle"] { background: rgba(251, 246, 236, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--xc-line); }
.ct-header [data-row="bottom"], .ct-header [data-row="top"] { display: none; }
.ct-header .site-logo-container img { max-height: 64px !important; width: auto; }
.ct-header .menu > li > a { font-family: var(--xc-font-head); font-weight: 700; font-size: 1rem; text-transform: none; color: var(--xc-ink); }
.ct-header .menu > li.current-menu-item > a { color: var(--xc-red); }
.ct-header .menu > li.xc-menu-cta > a { padding: .55em 1.2em; margin-inline-start: .5em; height: auto; }
.ct-header .menu > li.xc-menu-cta > a::before { display: none; }

/* Full-width sections */
.xc-hero { position: relative; min-height: min(82vh, 760px); display: grid; align-items: end; overflow: hidden; margin-top: 0 !important; margin-bottom: 0; isolation: isolate; }
.xc-hero > .wp-block-image { position: absolute; inset: 0; margin: 0; z-index: -2; }
.xc-hero > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.xc-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(29,27,47,0) 30%, rgba(29,27,47,.82) 100%); }
.xc-hero__content { padding: 4rem 1.5rem 3.5rem; color: #fff; }
.xc-hero__content h1, .xc-hero__content p, .xc-hero__content strong { color: #fff; }
.xc-hero__content h1 { max-width: 14ch; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.xc-hero__content p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 60ch; }
.xc-kicker { display: inline-block; background: var(--xc-yellow); color: var(--xc-ink) !important; font-family: var(--xc-font-head); font-weight: 700;
	padding: .2em .8em; border-radius: 999px; font-size: .95rem !important; transform: rotate(-2deg); }

.xc-band { padding: 3.5rem 1.5rem; margin-top: 0 !important; margin-bottom: 0 !important; }
.xc-band > * { margin-inline: auto; max-width: 1160px; }
.xc-band--sand { background: var(--xc-sand-2); }
.xc-band--yellow { background: var(--xc-yellow); }
.xc-band--ink { background: var(--xc-ink); color: #e9e6f2; }
.xc-band--ink h2, .xc-band--ink h3, .xc-band--ink strong { color: #fff; }
.xc-band--ink a { color: var(--xc-yellow); }
.xc-band > h2:first-child { margin-top: 0; }

/* Cards */
.xc-cards { gap: 1.5rem; }
.xc-cards > .wp-block-column { background: #fff; border-radius: var(--xc-radius); overflow: hidden; box-shadow: 0 1px 0 var(--xc-line), 0 12px 30px -18px rgba(29,27,47,.35);
	border-top: 6px solid var(--xc-red); padding-bottom: 1.25rem; }
.xc-cards > .wp-block-column:nth-child(2) { border-top-color: var(--xc-green); }
.xc-cards > .wp-block-column:nth-child(3) { border-top-color: var(--xc-blue); }
.xc-cards > .wp-block-column > * { margin-inline: 1.25rem; }
.xc-cards > .wp-block-column > .wp-block-image { margin: 0 0 1rem; }
.xc-cards > .wp-block-column > .wp-block-image img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* Reviews */
.xc-reviews { gap: 1.5rem; }
.xc-reviews > .wp-block-column { background: #fff; border-radius: var(--xc-radius); padding: 1.5rem; box-shadow: 0 10px 0 -4px var(--xc-red); }
.xc-stars { font-size: 1.6rem; letter-spacing: .1em; color: var(--xc-ink); margin: 0; }

/* Lists, tables, FAQ */
.entry-content ul.wp-block-list { padding-inline-start: 1.2em; }
.entry-content ul.wp-block-list li::marker { color: var(--xc-red); }
.wp-block-table { border-radius: var(--xc-radius); overflow: hidden; background: #fff; box-shadow: 0 1px 0 var(--xc-line); }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th { background: var(--xc-ink); color: #fff; font-family: var(--xc-font-head); text-align: start; }
.wp-block-table th, .wp-block-table td { border: 0; border-bottom: 1px solid var(--xc-line); padding: .7em 1em; }
.wp-block-table tbody tr:nth-child(even) { background: var(--xc-sand); }
.wp-block-table td:not(:first-child), .wp-block-table th:not(:first-child) { text-align: center; white-space: nowrap; }
.wp-block-details { background: #fff; border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: .75rem; box-shadow: 0 1px 0 var(--xc-line); }
.wp-block-details summary { font-family: var(--xc-font-head); font-weight: 700; color: var(--xc-ink); cursor: pointer; font-size: 1.1rem; }
.wp-block-details[open] summary { color: var(--xc-red); margin-bottom: .5rem; }
.wp-block-image img { border-radius: var(--xc-radius); }
.xc-hero .wp-block-image img { border-radius: 0; }
.wp-block-separator { border: 0; height: 6px; max-width: 120px !important; margin: 3rem auto; background: linear-gradient(90deg, var(--xc-red) 0 25%, var(--xc-yellow) 25% 50%, var(--xc-green) 50% 75%, var(--xc-blue) 75%); border-radius: 6px; opacity: 1; }
iframe[src*="google.com/maps"] { border-radius: var(--xc-radius); }

/* Footer */
.ct-footer { background: var(--xc-ink); color: #cfcbe0; }
.ct-footer a { color: var(--xc-yellow); }
.ct-footer .ct-footer-copyright { color: #9d98b3; }
.xc-footer { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.xc-footer h4 { color: #fff; font-family: var(--xc-font-head); font-size: 1.2rem; margin: 0 0 .5rem; }
.xc-footer p { margin: 0 0 .4rem; }

/* Arabic (RTL) */
html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { letter-spacing: 0; }
html[dir="rtl"] .xc-kicker { transform: rotate(2deg); }

@media (max-width: 689px) {
	.xc-hero { min-height: 78vh; }
	.xc-hero__content { padding: 3rem 1.25rem 2.5rem; }
	.xc-band { padding: 2.5rem 1.25rem; }
}

/* ---- v1.0.1 fixes ---- */
.xc-hero__content { width: 100%; max-width: 1160px; margin-inline: auto; box-sizing: border-box; }
.ct-header .site-logo-container img { max-height: 80px !important; }

/* Reel cards (link to Instagram, no embed script) */
.xc-reels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.xc-reel { position: relative; display: block; aspect-ratio: 4/5; border-radius: var(--xc-radius); overflow: hidden; color: #fff !important; text-decoration: none; isolation: isolate; }
.xc-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; border-radius: 0; transition: transform .4s; }
.xc-reel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(29,27,47,.1) 40%, rgba(29,27,47,.85)); }
.xc-reel:hover img { transform: scale(1.05); }
.xc-reel__play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%; background: var(--xc-red);
	display: grid; place-items: center; font-size: 1.5rem; padding-inline-start: 4px; box-shadow: 0 4px 0 var(--xc-red-dark); }
.xc-reel__cap { position: absolute; inset-inline: 1.1rem; bottom: 1rem; font-family: var(--xc-font-head); font-weight: 700; font-size: 1.2rem; line-height: 1.2; }
.xc-reel__cap small { display: block; font-family: var(--xc-font-body); font-weight: 600; font-size: .85rem; color: var(--xc-yellow); margin-top: .2rem; }

/* FAQ spacing */
.wp-block-details { padding: .9rem 1.25rem; }
.wp-block-details > summary { margin: 0; }
.wp-block-details > p { margin: .6rem 0 .2rem; }

/* Footer: dark band, full-width grid */
.ct-footer, .ct-footer [data-row] { background: var(--xc-ink) !important; }
.ct-footer [data-row="middle"] > .ct-container { grid-template-columns: 1fr !important; }
.ct-footer [data-row="bottom"] { border-top: 1px solid rgba(255,255,255,.1); }
.ct-footer .xc-footer p { color: #cfcbe0; }

/* Hero sits right under the header */
body:has(.xc-hero) .ct-container-full { padding-top: 0 !important; }
body:has(.xc-hero) .entry-content > .xc-hero:first-child { margin-top: 0 !important; }

/* Floating WhatsApp button: icon only on phones, icon + label from 782px. Sits on the left in Arabic. */
.xc-wa-float { position: fixed; z-index: 99; bottom: 20px; inset-inline-end: 20px; display: flex; align-items: center; gap: .5rem;
	padding: 13px; border-radius: 999px; background: #25d366; color: #fff !important; text-decoration: none;
	font-family: var(--xc-font-head); font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.2); transition: transform .2s; }
.xc-wa-float:hover { transform: translateY(-2px); }
.xc-wa-float span { display: none; }
@media (min-width: 782px) { .xc-wa-float { padding-block: 12px; padding-inline: 16px 20px; } .xc-wa-float span { display: inline; } }