/*
Theme Name: ExBeauty
Theme URI: https://exbeauty.co.uk
Author: ExBeauty
Author URI: https://exbeauty.co.uk
Description: The site-wide header, footer and design system for exbeauty.co.uk, a medical tourism directory for UK patients. All page content (destinations, treatments, clinic listings, checkout, etc.) is supplied by the companion "ExBeauty Medical Tourism Directory" plugin — this theme provides the shell every page renders inside, and is designed to be used together with that plugin, not standalone.
Version: 1.1.3
License: GPL-2.0+
Text Domain: emt-theme
*/

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — shared with the ExBeauty plugin's own stylesheet,
   which styles the content (cards, forms, grids) this theme's
   header/footer wrap around. Keeping them here means one place to
   change the site's colours/spacing for both.
   ═══════════════════════════════════════════════════════════════ */
:root{
	--emt-primary:#0f6e63;
	--emt-primary-dark:#0a4f47;
	--emt-accent:#e8873a;
	--emt-ink:#122622;
	--emt-muted:#5b6b68;
	--emt-line:#e3e9e7;
	--emt-bg:#f6f9f8;
	--emt-white:#ffffff;
	--emt-star:#f5a623;
	--emt-radius:14px;
	--emt-shadow:0 4px 20px rgba(15,110,99,.08);
	--emt-shadow-lg:0 12px 40px rgba(15,110,99,.14);
}

/* ── Reset & base type ── */
*{box-sizing:border-box;}
body.emt-site{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--emt-ink);background:var(--emt-bg);line-height:1.55;}
img{max-width:100%;display:block;}
a{color:var(--emt-primary);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-weight:700;line-height:1.2;color:var(--emt-ink);}
h1{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:0 0 12px;}
h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:40px 0 18px;}
h3{font-size:1.1rem;margin:0 0 6px;}
.emt-container{max-width:1180px;margin:0 auto;padding:32px 20px 64px;}
.emt-intro{color:var(--emt-muted);font-size:1.05rem;max-width:760px;}

/* ── Header ── */
.emt-header{position:sticky;top:0;z-index:50;background:var(--emt-white);border-bottom:1px solid var(--emt-line);}
.emt-header__inner{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:24px;position:relative;}
.emt-logo{font-weight:800;font-size:1.35rem;color:var(--emt-primary-dark);letter-spacing:-.02em;}
.emt-logo:hover{text-decoration:none;}
.emt-logo img{height:36px;width:auto;display:block;}
.emt-nav{flex:1;}
.emt-nav__list{list-style:none;display:flex;gap:22px;margin:0;padding:0;}
.emt-nav__list a{color:var(--emt-ink);font-weight:600;font-size:.95rem;}
.emt-nav__list a:hover{color:var(--emt-primary);text-decoration:none;}
.emt-header__cta{white-space:nowrap;}
.emt-nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.emt-nav-toggle span{display:block;width:22px;height:2px;background:var(--emt-ink);margin:4px 0;}

/* ── Buttons (shared component used throughout plugin content too) ── */
.emt-btn{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:700;font-size:.95rem;cursor:pointer;border:2px solid transparent;transition:.15s;}
.emt-btn--primary{background:var(--emt-primary);color:#fff;}
.emt-btn--primary:hover{background:var(--emt-primary-dark);color:#fff;text-decoration:none;}
.emt-btn--outline{border-color:var(--emt-primary);color:var(--emt-primary);background:transparent;}
.emt-btn--outline:hover{background:var(--emt-primary);color:#fff;text-decoration:none;}
.emt-btn--lg{padding:16px 32px;font-size:1.05rem;}

/* ── Breadcrumb (used at the top of every plugin content page) ── */
.emt-breadcrumb{margin:20px 0 4px;font-size:.85rem;color:var(--emt-muted);}
.emt-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;}
.emt-breadcrumb li:not(:last-child)::after{content:"›";margin-left:6px;color:#bcc9c6;}

/* ── Form-submission notices ── */
.emt-notice{padding:14px 18px;border-radius:10px;margin:20px 0;font-weight:600;}
.emt-notice--success{background:#e6f6ed;color:#1a7a41;}
.emt-notice--error{background:#fdecec;color:#b3261e;}

/* ── 404 ── */
.emt-hero--404{background:linear-gradient(135deg,var(--emt-primary-dark),var(--emt-primary));color:#fff;padding:80px 20px;text-align:center;}
.emt-hero--404 h1{color:#fff;}
.emt-hero--404 p{max-width:520px;margin:0 auto 24px;opacity:.9;}
.emt-404__code{font-size:4rem;font-weight:800;opacity:.5;}

/* ── Footer ── */
.emt-footer{background:var(--emt-primary-dark);color:#dcece8;margin-top:40px;}
.emt-footer__inner{max-width:1180px;margin:0 auto;padding:48px 20px;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:32px;}
.emt-footer__brand p{font-size:.88rem;opacity:.85;}
.emt-footer .emt-logo{color:#fff;}
.emt-footer h4{color:#fff;font-size:.95rem;margin:0 0 12px;}
.emt-footer ul{list-style:none;margin:0;padding:0;}
.emt-footer li{margin-bottom:8px;}
.emt-footer a{color:#c3d9d4;font-size:.88rem;}
.emt-footer a:hover{color:#fff;}
.emt-footer__bottom{border-top:1px solid rgba(255,255,255,.15);padding:18px 20px;max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;}
.emt-footer__legal a{margin-left:14px;}

.emt-search-results{list-style:none;margin:0;padding:0;}
.emt-search-result{padding:20px 0;border-bottom:1px solid var(--emt-line);}
.emt-search-result h3{margin:0 0 6px;}
.emt-search-result p{color:var(--emt-muted);margin:0;}

@media (max-width:640px){
	.emt-nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--emt-line);display:none;}
	.emt-nav.is-open{display:block;}
	.emt-nav__list{flex-direction:column;padding:16px 20px;gap:14px;}
	/* .emt-nav normally has flex:1, which pushes the toggle button to
	 * the far right by filling the space between it and the logo —
	 * but on mobile .emt-nav becomes position:absolute (it's a
	 * dropdown, not an inline flex item), taking it out of the flex
	 * layout entirely. Without that spacer, the toggle button was
	 * left sitting immediately next to the logo instead of on the
	 * right edge. margin-left:auto recreates that same push using
	 * the flex container's own remaining space. */
	.emt-nav-toggle{display:block;margin-left:auto;}
	.emt-header__cta{display:none;}
	.emt-footer__inner{grid-template-columns:1fr;}
}