/* =============================================================================
 * Zawad components
 * Reusable, self-contained UI blocks. Class prefix: .zw-
 * Naming: .zw-block, .zw-block__element, .zw-block--modifier
 * ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */
.zw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--zw-space-2);
	padding: var(--zw-space-3) var(--zw-space-5);
	border: 1px solid transparent;
	border-radius: var(--zw-radius-pill);
	font-family: var(--zw-font-heading);
	font-size: var(--zw-text-sm);
	font-weight: var(--zw-weight-medium);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--zw-fast) var(--zw-ease),
	            color var(--zw-fast) var(--zw-ease),
	            border-color var(--zw-fast) var(--zw-ease);
}

.zw-btn--primary   { background: var(--zw-primary); color: var(--zw-on-primary); }
.zw-btn--primary:hover,
.zw-btn--primary:focus-visible { background: var(--zw-primary-hover); color: var(--zw-on-primary); }

.zw-btn--secondary { background: var(--zw-secondary); color: var(--zw-on-secondary); }
.zw-btn--secondary:hover,
.zw-btn--secondary:focus-visible { background: var(--zw-secondary-hover); color: var(--zw-on-secondary); }

.zw-btn--ghost { background: transparent; color: var(--zw-secondary); border-color: var(--zw-border); }
.zw-btn--ghost:hover { border-color: var(--zw-secondary); }

.zw-btn--whatsapp { background: var(--zw-whatsapp); color: var(--zw-navy); }

.zw-btn--lg { padding: var(--zw-space-4) var(--zw-space-6); font-size: var(--zw-text-base); }
.zw-btn--block { width: 100%; }

/* --- Badges / pills ------------------------------------------------------- */
.zw-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--zw-space-1);
	padding: 0.35em 0.8em;
	border-radius: var(--zw-radius-pill);
	background: var(--zw-sand);
	color: var(--zw-ink-soft);
	font-size: var(--zw-text-xs);
	font-weight: var(--zw-weight-medium);
	letter-spacing: var(--zw-tracking-wide);
	text-transform: uppercase;
}

.zw-badge--accent { background: var(--zw-gold-soft); color: var(--zw-gold-ink); }
.zw-badge--olive  { background: var(--zw-olive-soft); color: var(--zw-olive-dark); }
.zw-badge--hot    { background: var(--zw-terracotta-soft); color: var(--zw-terracotta-dark); }

/* --- Card (package / hotel / guide) -----------------------------------------
 * Redesigned 2026-09-02, referencing Airbnb (photography-led cards, minimal
 * chrome, image micro-zoom on hover) and Intrepid Travel (large duration
 * flag on the image, price treated as the loudest number on the card, tight
 * heading tracking). No border — separation comes from shadow + whitespace,
 * not a hairline, which is what was reading as a generic admin-theme card.
 * -------------------------------------------------------------------------- */
.zw-card {
	display: flex;
	flex-direction: column;
	background: var(--zw-surface);
	border-radius: var(--zw-radius-xl);
	overflow: hidden;
	box-shadow: var(--zw-shadow-sm);
	transition: box-shadow var(--zw-base) var(--zw-ease),
	            transform var(--zw-base) var(--zw-ease);
}

.zw-card:hover { box-shadow: var(--zw-shadow-lg); transform: translateY(-4px); }

.zw-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--zw-sand);
	overflow: hidden;
}
.zw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--zw-slow) var(--zw-ease);
}
.zw-card:hover .zw-card__media img { transform: scale(1.06); }

.zw-card__flag {
	position: absolute;
	inset-block-start: var(--zw-space-4);
	inset-inline-start: var(--zw-space-4);
	padding: 0.4em 0.9em;
	border-radius: var(--zw-radius-pill);
	background: rgba(20, 35, 51, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--zw-white);
	font-family: var(--zw-font-heading);
	font-size: var(--zw-text-xs);
	font-weight: var(--zw-weight-medium);
	letter-spacing: var(--zw-tracking-wide);
}

.zw-card__body { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--zw-space-5) var(--zw-space-5) var(--zw-space-4); flex: 1; }
.zw-card__kicker {
	margin: 0;
	font-size: var(--zw-text-xs);
	font-weight: var(--zw-weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--zw-tracking-wide);
	color: var(--zw-gold-ink);
}
.zw-card__title {
	font-size: var(--zw-text-xl);
	line-height: var(--zw-leading-tight);
	letter-spacing: -0.01em;
	margin: 0;
}
.zw-card__title a { color: inherit; text-decoration: none; }
.zw-card__meta { margin: 0; font-size: var(--zw-text-sm); color: var(--zw-text-muted); }
.zw-card__footer {
	margin-top: var(--zw-space-4);
	padding-top: var(--zw-space-4);
	border-top: 1px solid var(--zw-border);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--zw-space-3);
}
.zw-card__cta {
	font-family: var(--zw-font-heading);
	font-size: var(--zw-text-sm);
	font-weight: var(--zw-weight-medium);
	color: var(--zw-navy);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding-block: 0.4em;
	transition: gap var(--zw-fast) var(--zw-ease), color var(--zw-fast) var(--zw-ease);
}
.zw-card__cta span { transition: transform var(--zw-fast) var(--zw-ease); }
.zw-card__cta:hover { color: var(--zw-gold-ink); gap: 0.55em; }

/* --- Price display -------------------------------------------------------- */
.zw-price { display: flex; flex-direction: column; gap: 0.1em; }
.zw-price__amount { font-family: var(--zw-font-heading); font-size: var(--zw-text-2xl); font-weight: var(--zw-weight-bold); letter-spacing: -0.01em; color: var(--zw-ink); }
.zw-price__label  { font-size: var(--zw-text-xs); color: var(--zw-text-muted); }
.zw-price__unit   { font-size: var(--zw-text-sm); color: var(--zw-text-muted); }

/* --- Trust bar (licences, associations, review scores) -------------------- */
.zw-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--zw-space-5);
	padding: var(--zw-space-4) 0;
	border-block: 1px solid var(--zw-border);
}
.zw-trust__item { display: flex; align-items: center; gap: var(--zw-space-2); font-size: var(--zw-text-sm); color: var(--zw-ink-soft); }

/* --- Definition list used for package/hotel specs ------------------------- */
.zw-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--zw-space-4); margin: 0; }
.zw-specs__term  { font-size: var(--zw-text-xs); text-transform: uppercase; letter-spacing: var(--zw-tracking-wide); color: var(--zw-text-muted); margin: 0; }
.zw-specs__value { font-weight: var(--zw-weight-medium); margin: 0; }

/* --- Inclusion / exclusion list ------------------------------------------- */
.zw-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--zw-space-2); }
.zw-list li { position: relative; padding-inline-start: 1.6em; }
.zw-list li::before { position: absolute; inset-inline-start: 0; }
.zw-list--included li::before { content: "\2713"; color: var(--zw-success); }
.zw-list--excluded li::before { content: "\2717"; color: var(--zw-danger); }

/* --- FAQ (accordion, no JS dependency) ------------------------------------ */
.zw-faq__item { border-bottom: 1px solid var(--zw-border); }
.zw-faq__q { cursor: pointer; padding: var(--zw-space-4) 0; font-family: var(--zw-font-heading); font-weight: var(--zw-weight-medium); list-style: none; }
.zw-faq__q::-webkit-details-marker { display: none; }
.zw-faq__a { padding-block-end: var(--zw-space-4); color: var(--zw-ink-soft); }

/* --- Floating WhatsApp CTA ------------------------------------------------ */
.zw-float-cta {
	position: fixed;
	inset-block-end: var(--zw-space-5);
	inset-inline-end: var(--zw-space-5);
	z-index: var(--zw-z-float);
	box-shadow: var(--zw-shadow-lg);
}

/* --- Breadcrumbs ---------------------------------------------------------- */
.zw-breadcrumb { font-size: var(--zw-text-sm); color: var(--zw-text-muted); }
.zw-breadcrumb a { color: var(--zw-text-muted); }
.zw-breadcrumb a:hover { color: var(--zw-gold-ink); }

/* --- Homepage sections ---------------------------------------------------- */
.zw-section--tight { padding-block: var(--zw-space-5); }
.zw-section__more { margin-top: var(--zw-space-5); }

/* Every section used the same fluid --zw-section-y top and bottom, which
 * reads as metronomic once you notice it — the same gap whether two sections
 * are on the same subject or a hard topic change. Compare follows Packages
 * directly (same 3 trips, still visible above), so it earns a much shorter
 * approach; the topic changes again after it, so its own bottom is untouched. */
.zw-section--connect-up { padding-block-start: var(--zw-space-6); }

/* Trust strip */
.zw-trustgrid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--zw-space-4);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* align-content: start matters. Each <li> is stretched to the tallest cell in
 * the row, and with auto-sized grid rows the default align-content stretches
 * those rows to absorb the leftover height. The item with the longest
 * description therefore sat 9px higher than its three neighbours once icons
 * were added, because only it had no leftover height to absorb. Pin to start. */
.zw-trustgrid li { display: grid; gap: 2px; align-content: start; }
.zw-trustgrid strong { font-family: var(--zw-font-heading); font-size: var(--zw-text-base); }
.zw-trustgrid span { font-size: var(--zw-text-sm); color: var(--zw-text-muted); }

/* One thin gold line mark per credential. Lucide paths, inlined by
 * zawad_icon() in functions.php.
 *
 * justify-self is required, not cosmetic: <li> is a grid container, so a grid
 * item stretches to the full column by default and an <svg> with width/height
 * ATTRIBUTES will still be stretched by the CSS box. Without this the marks
 * blow up to column width. Explicit width/height in CSS for the same reason.
 *
 * Single stroke weight, single colour, no boxes or circles behind them - the
 * strip has to keep reading as a row of plain facts, not a feature grid. */
.zw-trustgrid .zw-ico {
	display: block;
	width: 30px;
	height: 30px;
	justify-self: start;
	color: var(--zw-gold);
	margin-block-end: var(--zw-space-3);
}
@media (max-width: 600px) {
	.zw-trustgrid .zw-ico { width: 26px; height: 26px; margin-block-end: var(--zw-space-2); }
}

/* Comparison table — the radius has to live on the scroll wrapper, not the
 * <table>. border-collapse merges cell borders into the table's own box, so
 * a background-coloured <thead> ignores border-radius on the table itself
 * and renders hard square corners no matter what the CSS says — exactly the
 * kind of "declared but not actually there" mismatch that reads as sloppy. */
.zw-tablewrap {
	overflow: hidden;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--zw-radius-lg);
	box-shadow: var(--zw-shadow-sm);
}
.zw-compare { width: 100%; border-collapse: collapse; min-width: 620px; background: var(--zw-surface); }
.zw-compare th, .zw-compare td { padding: var(--zw-space-3) var(--zw-space-4); text-align: left; border-top: 1px solid var(--zw-border); font-size: var(--zw-text-sm); }
.zw-compare thead th { background: var(--zw-olive); color: var(--zw-cream); border-top: 0; font-family: var(--zw-font-heading); }
.zw-compare thead th a { color: var(--zw-cream); text-decoration: none; }
.zw-compare tbody th { font-weight: var(--zw-weight-medium); color: var(--zw-text-muted); white-space: nowrap; }
.zw-compare tbody tr:nth-child(odd) td, .zw-compare tbody tr:nth-child(odd) th { background: var(--zw-sand); }

/* Steps */
.zw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--zw-space-5); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); counter-reset: zw; }
.zw-steps li { display: grid; gap: var(--zw-space-2); }
.zw-steps__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--zw-gold); color: var(--zw-navy); font-weight: var(--zw-weight-bold); font-family: var(--zw-font-heading); }
.zw-steps strong { font-family: var(--zw-font-heading); font-size: var(--zw-text-lg); }
.zw-steps__d { font-size: var(--zw-text-sm); opacity: .88; }

/* Team */
.zw-person { display: grid; gap: var(--zw-space-2); }
.zw-person__photo { aspect-ratio: 1; border-radius: var(--zw-radius-lg); background: var(--zw-sand); display: grid; place-items: center; }
.zw-person__photo span { font-family: var(--zw-font-heading); font-size: 2.4rem; color: var(--zw-muted); opacity: .5; font-weight: var(--zw-weight-bold); }
.zw-person h3 { font-size: var(--zw-text-lg); margin: 0; }
.zw-person__role { font-size: var(--zw-text-sm); color: var(--zw-gold-ink); font-weight: var(--zw-weight-medium); margin: 0; }
.zw-person__bio { font-size: var(--zw-text-sm); color: var(--zw-text-muted); margin: 0; }

/* Honest empty state — deliberately not a bordered callout box. A hairline
 * box with a coloured accent stripe is the single most recognisable
 * "AI SaaS landing page" pattern; this reads as plain editorial text
 * instead, separated from the heading by space and a thin neutral rule,
 * never a colour. */
.zw-notice { max-width: var(--zw-container-text); padding-top: var(--zw-space-5); border-top: 1px solid var(--zw-border); }
.zw-notice h2 { font-size: var(--zw-text-xl); }

/* Quote card: no border anywhere. Separation comes from the white surface
 * against the section's tinted background, a soft shadow, and a large
 * decorative quotation mark instead of a coloured rule. */
.zw-quote {
	position: relative;
	margin: 0;
	background: var(--zw-surface);
	border-radius: var(--zw-radius-lg);
	box-shadow: var(--zw-shadow-sm);
	padding: var(--zw-space-6) var(--zw-space-5) var(--zw-space-5);
}
.zw-quote::before {
	content: "\201C";
	display: block;
	font-family: var(--zw-font-heading);
	font-size: 3rem;
	line-height: 1;
	color: var(--zw-gold-soft);
	margin-block-end: var(--zw-space-2);
}
.zw-quote cite { display: block; margin-top: var(--zw-space-3); font-style: normal; font-size: var(--zw-text-sm); color: var(--zw-text-muted); }

/* Closing CTA */
.zw-cta__grid { display: grid; gap: var(--zw-space-6); grid-template-columns: 1.6fr 1fr; align-items: start; }
@media (max-width: 820px) { .zw-cta__grid { grid-template-columns: 1fr; } }
.zw-cta__actions { display: flex; flex-wrap: wrap; gap: var(--zw-space-3); margin-top: var(--zw-space-4); }
.zw-cta__nap { font-style: normal; line-height: 1.9; color: var(--zw-olive-soft); }
.zw-cta__nap strong { color: var(--zw-cream); }

/* --- Logo ----------------------------------------------------------------- */
/* Logo height benchmarked 2026-09-02 against live header logos on sites in
 * the same "mark + wordmark" category as ours (not icon-only logos like
 * Airbnb's 32px or Intrepid's 24px, which are a different, more minimal
 * style): Sotheby's International Realty runs 40px, Navy Federal Credit
 * Union runs 37px. 40px matches the closer analog and reads clearly at
 * arm's length without dominating the header. */
.zw-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }
.zw-logo svg { display: block; height: 40px; width: auto; }
.zw-logo__img { display: block; max-height: 40px; width: auto; }
.zw-logo__text {
	font-family: var(--zw-font-heading);
	font-size: var(--zw-text-xl);
	font-weight: var(--zw-weight-bold);
	letter-spacing: var(--zw-tracking-logo);
	text-transform: uppercase;
	color: var(--zw-olive);
}
.zw-logo--light .zw-logo__text { color: var(--zw-cream); }

/* Recolour an inline single-path SVG via currentColor if the file uses it. */
.zw-logo { color: var(--zw-olive); }
.zw-logo--light { color: var(--zw-cream); }

@media (max-width: 768px) {
	.zw-logo svg, .zw-logo__img { height: 32px; max-height: 32px; }
	.zw-logo__text { font-size: var(--zw-text-lg); }
}

/* Footer sits on olive, so the logo renders in its light variant. */
.zw-footer__logo .zw-logo { color: var(--zw-cream); margin-bottom: var(--zw-space-2); }
.zw-footer__logo .zw-logo svg,
.zw-footer__logo .zw-logo__img { height: 34px; max-height: 34px; width: auto; }
.zw-footer__logo .zw-logo__text {
	font-family: var(--zw-font-heading);
	font-size: var(--zw-text-xl);
	letter-spacing: var(--zw-tracking-logo);
	text-transform: uppercase;
	color: var(--zw-cream);
}

/* --- Seal of trust section ------------------------------------------------ *
 * The single place transparency messaging lives. Must stay on a navy
 * background: the seal artwork is a gold wax seal on its own dark backdrop,
 * cut to a circle, so on ivory it would read as a dark disc.
 * ------------------------------------------------------------------------- */
.zw-seal__grid {
	display: grid;
	gap: var(--zw-space-7);
	grid-template-columns: 300px 1fr;
	align-items: center;
}
@media (max-width: 860px) {
	.zw-seal__grid { grid-template-columns: 1fr; gap: var(--zw-space-5); }
	.zw-seal__mark { max-width: 200px; }
}

.zw-seal__mark { margin: 0; }
.zw-seal__mark img { display: block; width: 100%; height: auto; }

.zw-seal__body h2 { color: var(--zw-ivory); }

.zw-seal__list {
	list-style: none;
	margin: var(--zw-space-5) 0 0;
	padding: 0;
	display: grid;
	gap: var(--zw-space-4);
}
/* No coloured rule down the side — a small ring-check marker does the same
 * job of anchoring each line without the "bordered feature list" look. */
.zw-seal__list li {
	position: relative;
	display: grid;
	gap: 2px;
	padding-inline-start: 2.25rem;
}
.zw-seal__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.2em;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	border: 1.5px solid var(--zw-gold);
}
.zw-seal__list li::after {
	content: "";
	position: absolute;
	inset-inline-start: 0.42rem;
	inset-block-start: 0.62em;
	width: 0.5rem;
	height: 0.28rem;
	border-left: 1.5px solid var(--zw-gold);
	border-bottom: 1.5px solid var(--zw-gold);
	transform: rotate(-45deg);
}
.zw-seal__list strong {
	font-family: var(--zw-font-heading);
	color: var(--zw-ivory);
	font-size: var(--zw-text-base);
}
.zw-seal__list span { color: var(--zw-navy-soft); font-size: var(--zw-text-sm); }

.zw-seal__link { margin-top: var(--zw-space-5); }
.zw-seal__link a { color: var(--zw-gold); font-size: var(--zw-text-sm); }

/* Enquiry-led pricing.
   Shown wherever a price would be when config's show_prices is false. Sized
   down from the numeral treatment because it is a label, not a figure, and at
   full price-size it read as a heading and unbalanced the card footer. */
.zw-price--enquiry .zw-price__amount {
	font-size: var(--zw-text-sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--zw-ink-muted, #5b6470);
	white-space: nowrap;
}