/* Tailwind v4 site stylesheet. Single source of truth for design + custom CSS.
 *
 * At draft time, this is read inline into a <style type="text/tailwindcss"> block.
 * At publish time, the Tailwind CLI compiles this file (plus templates) into
 * dist/styles.css. Every directive works here: @theme, @layer, @utility,
 * @apply, @keyframes, plus plain CSS. Do NOT write <style> blocks in PHP
 * templates for theme CSS — put it here so it lands in the compiled bundle.
 *
 * functions.php also parses the @theme block at runtime to register the
 * palette + font sizes with Gutenberg via add_theme_support().
 *
 * Conventions:
 *   1. @theme: tokens only (--color-*, --font-*, --text-*, --radius-*). No
 *      selectors, no @apply. Tokens auto-generate matching utilities.
 *   2. Plain CSS: outside @theme, inside @layer. Prefer utility classes in
 *      templates first; only write CSS here when utilities cannot express it.
 *      @layer base { h1 { font-size: var(--text-2xl); } }
 *      @layer components { .card { padding: --spacing(6); } }
 *   3. New reusable utilities: prefer @utility over @apply.
 *      @utility content-auto { content-visibility: auto; }
 *   4. Custom web fonts: load via <link> in template-parts/head.php, then
 *      reference here via --font-*.
 *
 * Token naming (Tailwind v4):
 *   --color-{slug}        → bg-{slug}, text-{slug}, border-{slug}
 *   --color-{slug}-{NN}   → numeric shades (skipped in the Gutenberg palette)
 *   --font-{slug}         → font-{slug}
 *   --text-{slug}         → text-{slug}
 *   --radius-{slug}       → rounded-{slug}
 */

@theme {
	--color-primary: #2563eb;
	--color-primary-50:  #eff6ff;
	--color-primary-100: #dbeafe;
	--color-primary-500: #3b82f6;
	--color-primary-600: #2563eb;
	--color-primary-700: #1d4ed8;
	--color-primary-900: #1e3a8a;

	--color-secondary: #475569;
	--color-secondary-50:  #f8fafc;
	--color-secondary-100: #f1f5f9;
	--color-secondary-200: #e2e8f0;
	--color-secondary-300: #cbd5e1;
	--color-secondary-500: #64748b;
	--color-secondary-600: #475569;
	--color-secondary-700: #334155;
	--color-secondary-900: #0f172a;

	--color-neutral: #171717;
	--color-background: #ffffff;

	--font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: Georgia, "Times New Roman", serif;
	--font-mono:  ui-monospace, "SF Mono", Menlo, monospace;

	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;
	--text-4xl:  2.25rem;
	--text-5xl:  3rem;
}

/* Element-level defaults. Reach for utility classes in templates first; put
 * a rule here only when the same styling needs to apply across every instance
 * of an element (e.g. body font features). Keep this layer small. */
@layer base {
	/* body { font-feature-settings: "ss01", "ss02"; } */
}

/* Reusable component classes. Use for compound patterns that recur and need
 * a name (e.g. .card, .hero-heading, .divider). Reference tokens via var();
 * @apply works but is finicky — prefer var() + utility classes in templates. */
@layer components {
	/* .hero-heading em { font-style: italic; color: var(--color-primary); } */
}

/* Shared header: also loaded by the migrated pages and enquiry templates. */
header.nav-wrap,header.seo-nav{display:none!important}
#sm-site-shell{display:block;position:relative;z-index:60;width:100%;font-family:Arial,sans-serif;line-height:1.4;letter-spacing:normal;color:#171535}
#sm-site-shell *{box-sizing:border-box}
#sm-site-shell .sm-site-header{display:block;position:relative;width:100%;max-width:none;margin:0;padding:0;border:0;border-bottom:1px solid #e7e4eb;background:#fff}
#sm-site-shell .sm-header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1208px;min-height:96px;padding:14px 24px;margin:0 auto}
#sm-site-shell .sm-logo{display:block;position:relative;overflow:hidden;flex:0 0 172px;width:172px;height:68px;border-radius:4px;background:#111033}
#sm-site-shell .sm-logo img{position:absolute;display:block;left:50%;top:50%;width:236px;height:236px;max-width:none;max-height:none;margin:0;object-fit:contain;transform:translate(-50%,-50%)}
#sm-site-shell .sm-main-menu{display:flex;align-items:center;justify-content:center;gap:22px;margin:0;padding:0;flex:1;background:none}
#sm-site-shell .sm-main-menu a{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:6px 0;border:0;border-bottom:2px solid transparent;color:#171535;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;line-height:1.4}
#sm-site-shell .sm-main-menu a:hover,#sm-site-shell .sm-main-menu a[aria-current]{border-bottom-color:#ff5a12}
#sm-site-shell .sm-header-call{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;padding:11px 15px;border:1px solid #171535;border-radius:6px;background:#171535;color:#fff;text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap}
#sm-site-shell .sm-menu-toggle{display:none}
#sm-site-shell a:focus-visible,#sm-site-shell button:focus-visible{outline:3px solid #da4b0a;outline-offset:4px}
#sm-site-shell .sm-contact{margin:0}
@media(max-width:1100px){
 #sm-site-shell .sm-header-inner{gap:18px;flex-wrap:wrap;min-height:90px}
 #sm-site-shell .sm-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:9px 13px;margin:0 0 0 auto;border:1px solid #d6d1df;border-radius:6px;background:#fff;color:#171535;font:700 14px/1.4 Arial,sans-serif;cursor:pointer}
 #sm-site-shell .sm-main-menu{display:none;order:4;flex:0 0 100%;width:100%;gap:0;border-top:1px solid #e7e4eb;padding:8px 0 0}
 #sm-site-shell .sm-main-menu.is-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #sm-site-shell .sm-main-menu a{padding:10px 8px;white-space:normal}
}
@media(max-width:600px){
 #sm-site-shell .sm-header-inner{padding:12px 16px;gap:12px;min-height:84px}
 #sm-site-shell .sm-logo{flex-basis:152px;width:152px;height:60px}
 #sm-site-shell .sm-logo img{width:209px;height:209px}
 #sm-site-shell .sm-header-call{display:none}
 #sm-site-shell .sm-contact-copy{display:none}
 #sm-site-shell .sm-contact{padding:10px 16px}
 #sm-site-shell .sm-contact-actions{width:100%}
}

/* Prominent calls to action on every page, including a persistent contact dock. */
.sm-contact{box-sizing:border-box;background:#171535;color:#fff;font:16px/1.4 Arial,sans-serif;padding:20px 24px;width:100%;position:relative;z-index:40}
.sm-contact *{box-sizing:border-box}
.sm-contact-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.sm-contact-copy{font-size:20px;font-weight:700}.sm-contact-copy small{display:block;font-size:13px;font-weight:400;color:#e2dfeb;margin-top:5px}
.sm-contact-actions{display:flex;gap:12px;align-items:center}
.sm-contact a.sm-contact-link{display:inline-flex;gap:11px;align-items:center;justify-content:center;min-height:56px;min-width:216px;padding:14px 22px;border-radius:8px;background:#ff5a12;color:#171535;border:2px solid #ff5a12;font:700 16px/1.3 Arial,sans-serif;text-decoration:none;text-align:center;white-space:nowrap;box-shadow:0 3px 0 #0002}
.sm-contact a.sm-contact-whatsapp{background:#fff;color:#171535;border-color:#fff}
.sm-contact-link svg{width:24px;height:24px;flex:0 0 24px}
.sm-contact a.sm-contact-link:hover{background:#ff7438;border-color:#ff7438}.sm-contact a.sm-contact-whatsapp:hover{background:#fff2eb;border-color:#ff5a12}
.sm-contact a:focus-visible{outline:3px solid #ffad88;outline-offset:4px}
.sm-contact-footer{margin:40px 0 0;padding:36px 24px;border-top:4px solid #ff5a12}
.sm-contact.sm-contact-dock{position:fixed;bottom:0;left:0;right:0;z-index:80;padding:12px 24px calc(12px + env(safe-area-inset-bottom));border-top:3px solid #ff5a12;box-shadow:0 -5px 24px #17153525}
.sm-contact-dock .sm-contact-copy{font-size:18px}
body:has(.sm-contact-dock){padding-bottom:calc(90px + env(safe-area-inset-bottom))!important}
.mobile-bar{display:none!important}
.cookie-reopen{bottom:calc(104px + env(safe-area-inset-bottom))!important}
.cookie-banner,[aria-label="Cookie preferences"]{bottom:calc(104px + env(safe-area-inset-bottom))!important;z-index:90!important}
.sm-contact.sm-contact-inline{max-width:1160px;width:calc(100% - 48px);margin:36px auto;border-radius:12px;border-left:5px solid #ff5a12;padding:28px}
@media(max-width:800px){
 .sm-contact-inner{flex-direction:column;align-items:stretch;gap:14px}
 .sm-contact-copy{text-align:center}
 .sm-contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
 .sm-contact a.sm-contact-link{min-width:0;white-space:normal;padding:12px 10px;font-size:14px}
 .sm-contact-dock .sm-contact-copy{display:none}
 .sm-contact.sm-contact-dock{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
 .sm-contact.sm-contact-inline{width:calc(100% - 32px);padding:22px 16px}
}
@media(max-width:380px){
 .sm-contact a.sm-contact-link{font-size:12px;gap:6px}
 .sm-contact-link svg{width:20px;height:20px;flex-basis:20px}
}