/* Coworkkings — shared design system layer. Loaded on every front-end page (before page-specific CSS).
   Tokens come from theme.json; this file only adds shared components so pages never duplicate them. */

:root {
	--cwk-radius-sm: 8px;      /* buttons, inputs, small chips */
	--cwk-radius-card: 16px;   /* cards, filters, panels inside a page */
	--cwk-radius-panel: 24px;  /* hero / CTA bands */
	--cwk-section-gap: clamp(56px, 8vw, 96px);
	--cwk-header-h: 76px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Body: guarantee brand body font + colours (the generated global body rule otherwise falls back to the heading font) */
html body {
	background: var(--wp--preset--color--offwhite);
	color: var(--wp--preset--color--text-dark);
	font-family: var(--wp--preset--font-family--body);
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* Typography hierarchy (fluid, scoped to page content so header/footer keep their own sizes) */
main h1, main h2, main h3 { font-family: var(--wp--preset--font-family--heading); font-weight: 400; color: var(--wp--preset--color--navy); text-wrap: balance; }
main h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.1; }
main h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; }
main h3 { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.25; }
main h4 { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--wp--preset--color--navy); }
main p { text-wrap: pretty; }

/* Focus (keyboard) */
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--wp--preset--color--navy); outline-offset: 3px; border-radius: 4px; }
:where(.cwk-home-hero, .cwk-lys-hero, .cwk-info-hero, .cwk-home-final-cta, .cwk-lys-final, .cwk-contact-cta, .cwk-footer, .is-menu-open) :focus-visible { outline-color: var(--wp--preset--color--cream); }

/* ---------- Header ---------- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.cwk-header { border-bottom: 1px solid var(--wp--preset--color--border); }
.cwk-header .wp-block-site-logo { margin: 0; flex: none; line-height: 0; }
.cwk-header .wp-block-site-logo a { display: block; }
/* Logo is an opaque JPEG on #F7F7F7; a slight brightness lift makes its background match the off-white header */
.cwk-header .wp-block-site-logo img { display: block; height: auto; filter: brightness(1.04); }
.cwk-header .wp-block-navigation { gap: 28px; }
.cwk-header .wp-block-navigation-item__content { font-weight: 600; font-size: 15px; padding: 6px 0; text-decoration: none; transition: color .2s ease; }
.cwk-header .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--navy); text-decoration: underline; text-underline-offset: 6px; }
.cwk-header-actions { gap: 20px !important; }
.cwk-header-contact { margin: 0; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--navy); white-space: nowrap; }
.cwk-header-contact a { color: inherit; text-decoration: none; }
.cwk-header-contact a:hover { color: var(--wp--preset--color--navy); text-decoration: underline; text-underline-offset: 3px; }
.cwk-header .wp-block-button__link { border-radius: var(--cwk-radius-sm); min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; transition: background .2s ease; }
.cwk-header .wp-block-button__link:hover { background: var(--wp--preset--color--navy-2); }
@media (max-width: 1199px) { .cwk-header-contact { display: none; } }
@media (max-width: 380px) { .cwk-header .wp-block-site-logo img { width: 104px !important; } }
@media (max-width: 782px) {
	.cwk-header .wp-block-site-logo img { width: 120px !important; }
	.cwk-header .wp-block-button__link { padding: 10px 16px; font-size: 14px; min-height: 44px; }
	.cwk-header .wp-block-navigation { gap: 16px; }
	.cwk-header-actions { gap: 12px !important; }
}
.cwk-header .wp-block-navigation__responsive-container.is-menu-open { padding: 24px; }
.cwk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 22px; font-family: var(--wp--preset--font-family--heading); font-weight: 400; color: var(--wp--preset--color--text-light); }
.cwk-header .wp-block-navigation__responsive-container-open, .cwk-header .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }

/* ---------- Footer ---------- */
.cwk-footer { color: var(--wp--preset--color--text-light); }
.cwk-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px 32px; }
.cwk-footer .wp-block-site-title { margin: 0 0 12px; font-size: 26px; line-height: 1; }
.cwk-footer .wp-block-site-title a { color: var(--wp--preset--color--text-light); text-decoration: none; }
.cwk-footer-about { margin: 0; max-width: 340px; font-size: 14px; line-height: 1.7; opacity: .78; }
.cwk-footer-heading { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.cwk-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cwk-footer-links a { color: var(--wp--preset--color--text-light); font-size: 14px; text-decoration: none; opacity: .85; transition: opacity .2s ease; }
.cwk-footer-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.cwk-footer-bottom { margin: 0; font-size: 13px; opacity: .65; }
.cwk-footer-bar { gap: 12px 32px; align-items: center; }
.cwk-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; font-size: 13px; }
.cwk-footer-legal a { color: var(--wp--preset--color--text-light); text-decoration: none; opacity: .8; }
.cwk-footer-legal a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.cwk-footer-contact { margin-top: 20px; }
.cwk-footer hr.wp-block-separator { border: 0; border-top: 1px solid rgba(245,241,232,.16); background: none; margin: 8px 0 0; }
@media (max-width: 900px) { .cwk-footer-grid { grid-template-columns: 1fr 1fr; } .cwk-footer-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .cwk-footer { padding-top: 48px !important; } }

/* ---------- Breadcrumbs ---------- */
.cwk-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; font-size: 13px; color: var(--wp--preset--color--text-muted); }
.cwk-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--wp--preset--color--border); }
.cwk-breadcrumbs a { color: var(--wp--preset--color--text-muted); text-decoration: none; }
.cwk-breadcrumbs a:hover { color: var(--wp--preset--color--navy); text-decoration: underline; text-underline-offset: 3px; }
.cwk-breadcrumbs [aria-current="page"] { color: var(--wp--preset--color--text-dark); font-weight: 600; }

/* ---------- Buttons ---------- */
.cwk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 28px; border-radius: var(--cwk-radius-sm); border: 1.5px solid transparent; font-family: inherit; font-weight: 600; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.cwk-btn-primary, .cwk-btn-navy { background: var(--wp--preset--color--navy); color: #fff; }
.cwk-btn-primary:hover, .cwk-btn-navy:hover { background: var(--wp--preset--color--navy-2); color: #fff; }
:is(.cwk-home-hero, .cwk-lys-hero, .cwk-info-hero, .cwk-home-final-cta, .cwk-lys-final, .cwk-contact-cta) .cwk-btn-primary:not(.cwk-home-search-btn) { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--navy); }
:is(.cwk-home-hero, .cwk-lys-hero, .cwk-info-hero, .cwk-home-final-cta, .cwk-lys-final, .cwk-contact-cta) .cwk-btn-primary:not(.cwk-home-search-btn):hover { background: #fff; color: var(--wp--preset--color--navy); }
.cwk-btn-outline { background: transparent; border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--navy); }
.cwk-btn-outline:hover { background: var(--wp--preset--color--navy); color: #fff; }
.cwk-btn-secondary { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--navy); }
.cwk-btn-secondary:hover { background: #fff; color: var(--wp--preset--color--navy); }
.cwk-btn-ghost { background: transparent; border-color: rgba(245,241,232,.55); color: var(--wp--preset--color--text-light); }
.cwk-btn-ghost:hover { background: var(--wp--preset--color--text-light); color: var(--wp--preset--color--navy); }
.cwk-btn-sm { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.cwk-btn.is-placeholder { border-style: dashed; }
.cwk-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }

/* ---------- Navy / hero surfaces (shared) ---------- */
.cwk-home-hero, .cwk-lys-hero { background: radial-gradient(circle at 88% 12%, rgba(247,241,228,.14), transparent 46%), linear-gradient(135deg, var(--wp--preset--color--navy), var(--wp--preset--color--navy-2)); color: var(--wp--preset--color--text-light); }
.cwk-home-final-cta, .cwk-lys-final, .cwk-contact-cta { background: linear-gradient(135deg, var(--wp--preset--color--navy), var(--wp--preset--color--navy-2)); color: var(--wp--preset--color--text-light); }

/* ---------- Sections, lead text ---------- */
.cwk-section { margin-bottom: var(--cwk-section-gap); scroll-margin-top: calc(var(--cwk-header-h) + 56px); }
.cwk-section h2 { margin-bottom: 16px; }
.cwk-lead { color: var(--wp--preset--color--text-muted); font-size: 19px; line-height: 1.6; margin-bottom: 24px; max-width: 680px; }
.cwk-prose p { margin-bottom: 16px; }

/* ---------- Quick-info / stats ---------- */
.cwk-quick-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; background: var(--wp--preset--color--cream); border: 1px solid var(--wp--preset--color--border); border-radius: var(--cwk-radius-card); padding: 20px 24px; margin-bottom: 32px; }
.cwk-stat { display: flex; flex-direction: column; }
.cwk-stat-num { font-family: var(--wp--preset--font-family--heading); font-size: 28px; line-height: 1.2; color: var(--wp--preset--color--navy); }
.cwk-stat-label { font-size: 13px; color: var(--wp--preset--color--text-muted); }

/* ---------- Chips ---------- */
.cwk-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cwk-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--wp--preset--color--offwhite); border: 1px solid var(--wp--preset--color--border); border-radius: var(--cwk-radius-sm); padding: 8px 14px; font-size: 14px; }
.cwk-chip-icon { color: var(--wp--preset--color--success); display: inline-flex; }
.cwk-chip-accent { background: var(--wp--preset--color--cream); font-weight: 600; }

/* ---------- Cards ---------- */
.cwk-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.cwk-property-card, .cwk-city-card, .cwk-plan-card, .cwk-home-type-card, .cwk-home-why-item { background: var(--wp--preset--color--offwhite); border: 1px solid var(--wp--preset--color--border); border-radius: var(--cwk-radius-card); box-shadow: var(--wp--preset--shadow--sm); transition: box-shadow .2s ease, border-color .2s ease; }
.cwk-property-card { display: block; overflow: hidden; color: inherit; text-decoration: none; }
.cwk-property-card:hover, .cwk-city-card:hover, .cwk-home-type-card:hover { box-shadow: var(--wp--preset--shadow--md); border-color: var(--wp--preset--color--navy); }
.cwk-property-card-img { aspect-ratio: 4 / 3; background: var(--wp--preset--color--cream); overflow: hidden; }
.cwk-property-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cwk-img-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--wp--preset--color--cream), #EFE5CF); }
.cwk-property-card-body { padding: 20px; }
.cwk-property-card-body h4 { margin: 0 0 4px; font-size: 18px; }
.cwk-property-card-body p { margin: 0; font-size: 14px; color: var(--wp--preset--color--text-muted); }
.cwk-card-location { margin: 0 0 6px; }
.cwk-card-price { font-weight: 700; color: var(--wp--preset--color--navy) !important; margin: 0 0 10px !important; font-size: 15px !important; }
.cwk-card-chips { margin-bottom: 14px; }
.cwk-card-chips .cwk-chip { padding: 4px 10px; font-size: 12px; }
.cwk-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.cwk-city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.cwk-city-card { display: block; padding: 20px; color: inherit; text-decoration: none; }
.cwk-city-card h3 { margin: 0 0 6px; font-size: 20px; }
.cwk-city-count { margin: 0; font-size: 14px; color: var(--wp--preset--color--text-muted); }
.cwk-city-price { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--wp--preset--color--navy); }
@media (max-width: 767px) { .cwk-city-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .cwk-cards-grid { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .cwk-city-grid { grid-template-columns: 1fr; } }

/* ---------- Status badges (no pills) ---------- */
.cwk-status { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--wp--preset--color--cream); }
.cwk-status-available { color: var(--wp--preset--color--success); }
.cwk-status-limited { color: #8A6508; }
.cwk-status-full { color: #B00020; }

/* ---------- Empty state ---------- */
.cwk-empty-state { text-align: center; padding: clamp(40px, 7vw, 72px) 24px; background: var(--wp--preset--color--offwhite); border: 1px dashed var(--wp--preset--color--border); border-radius: var(--cwk-radius-card); color: var(--wp--preset--color--text-muted); }
.cwk-empty-state p { margin: 0 auto 20px; max-width: 460px; font-size: 16px; }

/* ---------- Form controls ---------- */
.cwk-filters input[type="search"], .cwk-filters input[type="number"], .cwk-filters select, .cwk-home-search input, .cwk-home-search select { min-height: 48px; font-family: var(--wp--preset--font-family--body); font-size: 15px; color: var(--wp--preset--color--text-dark); }
.cwk-filters input:focus, .cwk-filters select:focus, .cwk-home-search input:focus, .cwk-home-search select:focus { border-color: var(--wp--preset--color--navy); outline: 3px solid rgba(11,30,58,.2); outline-offset: 0; }

/* ---------- Pagination ---------- */
.cwk-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.cwk-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--cwk-radius-sm); border: 1px solid var(--wp--preset--color--border); text-decoration: none; color: var(--wp--preset--color--text-dark); font-size: 14px; font-weight: 600; }
.cwk-page-link:hover { border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--navy); }
.cwk-page-current { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: #fff; }


/* ---------- Footer logo plate (real JPEG logo on navy: light plate matches the asset's own background) ---------- */
.cwk-footer-logo { display: block; width: fit-content; max-width: 100%; margin: 0 0 18px; padding: 10px 16px; background: #f7f7f7; border-radius: 12px; line-height: 0; }
.cwk-footer-logo .wp-block-site-logo { margin: 0; line-height: 0; }
.cwk-footer-logo .wp-block-site-logo a { display: block; }
.cwk-footer-logo .wp-block-site-logo img { display: block; width: 100%; max-width: 170px; height: auto; border-radius: 0; }
@media (max-width: 600px) { .cwk-footer-logo .wp-block-site-logo img { max-width: 150px; } }