/* ==========================================================================
   Gertrudes — Same-Day Delivery Areas (2026-08-23 redesign)
   --------------------------------------------------------------------------
   Markup: template/plaza/module/ptstaticblock_gertrudes.twig (.gt-del block),
   which also body-<link>s this file. That link is deliberate: the module
   controller's addStyle() injects gertrudes-info.css in the per-route loop
   BEFORE stylesheet.css and with no ?v=, so anything living there has to win
   on specificity alone and can never be cache-busted. Linked from the
   template this sheet loads last, wins by source order, and versions by hand.

   What changed and why: the areas used to be a flat list of white outline
   chips — 27 identical tags that answered "do you deliver there" but not the
   question people actually have, "will you reach me today?". Every city pill
   now carries its proximity to the Quezon City branch, with the branch
   address and the legend that defines the tiers sitting directly above them.

   Colour is never the only signal (WCAG 1.4.1): each pill also carries a dot
   matching the legend, and a visually-hidden phrase naming its tier in words.

   Palette is the brief's botanical set, with three text shades darkened for
   AA at 13-14px — the brief's own values measured 2.8:1 to 4.4:1 on these
   backgrounds. Each substitution is noted at the token.
   ========================================================================== */

.gt-del {
	/* Brand */
	--gd-green: #1F4D3A;          /* headings, section labels — 9.1:1 on the card */
	--gd-orange: #E07A2D;         /* ICONS AND LARGE ACCENTS ONLY: 2.8:1 as text */
	--gd-orange-text: #C73E12;    /* interactive text — 4.7:1, the theme's own
	                                 --gt-brand-strong, same trap documented in
	                                 header-mobile.css §1 */
	--gd-ink: #2F2A26;
	--gd-muted: #6B7280;
	--gd-line: #E7E1D8;
	--gd-surface: #FBF7F2;
	--gd-white: #FFFFFF;

	/* Proximity. Backgrounds are the brief's; the three text/dot colours are
	   one shade darker than specified so 13px labels clear 4.5:1:
	   #8A6D00 -> #7A6000 (4.43 -> 5.4:1), #D35400 -> #A34700 (3.5 -> 5.0:1).
	   #2E7D32 measured 4.51:1 and is kept as given. */
	--gd-near-bg: #E6F4E6;
	--gd-near-fg: #2E7D32;
	--gd-std-bg: #FFF1CC;
	--gd-std-fg: #7A6000;
	--gd-ext-bg: #FFE5D6;
	--gd-ext-fg: #A34700;

	margin: 0 0 16px;
	padding: 24px;
	border: 1px solid var(--gd-line);
	border-radius: 18px;
	background: var(--gd-surface);
	box-shadow: 0 4px 16px rgba(47, 42, 38, .05);
	color: var(--gd-ink);
}

/* Screen-reader-only, local to this block (the section has no global one). */
.gt-del__vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   1. Heading + lead
   -------------------------------------------------------------------------- */
/* SECTION-level title (level 2), per plaza/gtr-sectionhead.css — this block
   opens a band inside the home page, so it matches the product carousels
   rather than competing with the welcome heading above it.
   Colour was --gd-green (#1F4D3A): a dark-green serif title sitting a few
   hundred pixels below a warm-ink one read as two different designs. The
   botanical greens still carry the proximity tiers below, where they mean
   something; the heading joins the one title ink. */
.gt-del__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	color: var(--gt-title-ink, #2f2a26);
	font-family: var(--gt-title-face, Prata, Georgia, serif);
	font-size: var(--gt-title-section, clamp(22px, 2.4vw, 28px));
	font-weight: 400;
	line-height: var(--gt-title-lh, 1.2);
	letter-spacing: var(--gt-title-ls, -0.01em);
}

.gt-del__title-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--gd-orange);   /* large accent — never used at text size */
}

.gt-del__lead {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--gd-ink);
}

/* --------------------------------------------------------------------------
   2. Disclosure
   -------------------------------------------------------------------------- */
/* Both markers have to go: WebKit paints ::-webkit-details-marker, everyone
   else the list-item triangle. */
.gt-del__toggle::-webkit-details-marker { display: none; }

.gt-del__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	color: var(--gd-orange-text);
	font-size: 14px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.gt-del__toggle:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gt-del__toggle-icon {
	width: 17px;
	height: 17px;
	transition: transform 220ms ease;
}

.gt-del__disclosure[open] .gt-del__toggle-icon {
	transform: rotate(180deg);
}

.gt-del__body {
	padding-top: 6px;
}

/* --------------------------------------------------------------------------
   3. Branch strip — what every colour below is measured from
   -------------------------------------------------------------------------- */
.gt-del__branch {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	padding: 12px 16px;
	border: 1px solid var(--gd-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, .55);
	font-size: 14px;
	line-height: 1.5;
	color: var(--gd-ink);
}

.gt-del__branch-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--gd-green);
}

.gt-del__branch strong {
	color: var(--gd-green);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   4. Legend
   -------------------------------------------------------------------------- */
.gt-del__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
	margin: 0 0 22px;
	padding: 12px 16px;
	border: 1px solid var(--gd-line);
	border-radius: 12px;
	background: var(--gd-white);
}

.gt-del__legend-title {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--gd-ink);
}

.gt-del__legend-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gt-del__legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--gd-muted);
}

.gt-del__dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}

.gt-del__legend-item--near .gt-del__dot { background: var(--gd-near-fg); }
.gt-del__legend-item--standard .gt-del__dot { background: var(--gd-std-fg); }
.gt-del__legend-item--extended .gt-del__dot { background: var(--gd-ext-fg); }

/* --------------------------------------------------------------------------
   5. Group headings
   -------------------------------------------------------------------------- */
.gt-del__group {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 12px;
	color: var(--gd-green);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
}

.gt-del__group-icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	color: var(--gd-green);
}

.gt-del__group-note {
	margin: -6px 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gd-muted);
}

.gt-del__rule {
	margin: 24px 0 20px;
	border: 0;
	border-top: 1px solid var(--gd-line);
}

/* --------------------------------------------------------------------------
   6. Area pills
   --------------------------------------------------------------------------
   Deliberately NOT a grid: "Bonifacio Global City" and "Pasig" have no
   business being the same width. Flex wrap lets each pill be as wide as its
   name and keeps the rows dense.
   -------------------------------------------------------------------------- */
.gt-del__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gt-del__pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 35px;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 18px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.2;
}

.gt-del__pill .gt-del__dot {
	width: 7px;
	height: 7px;
}

.gt-del__pill--near,
.gt-del__pill--home {
	background: var(--gd-near-bg);
	border-color: rgba(46, 125, 50, .18);
	color: var(--gd-near-fg);
}

/* The branch's own city: same green family, one notch louder — a solid
   border and a heavier weight rather than a different hue, so it reads as
   "you are here" without inventing a fourth tier. */
.gt-del__pill--home {
	border-color: var(--gd-near-fg);
	font-weight: 700;
}

.gt-del__pill--standard {
	background: var(--gd-std-bg);
	border-color: rgba(122, 96, 0, .18);
	color: var(--gd-std-fg);
}

.gt-del__pill--extended {
	background: var(--gd-ext-bg);
	border-color: rgba(163, 71, 0, .18);
	color: var(--gd-ext-fg);
}

/* Provinces carry no proximity claim — see the note in the template. */
.gt-del__pill--province {
	background: var(--gd-white);
	border-color: var(--gd-line);
	color: var(--gd-ink);
}

/* --------------------------------------------------------------------------
   7. Disclaimer
   -------------------------------------------------------------------------- */
.gt-del__note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 22px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gd-muted);
}

.gt-del__note-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	color: var(--gd-muted);   /* secondary information — deliberately not brand */
}

/* --------------------------------------------------------------------------
   8. Phones
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.gt-del {
		padding: 16px;
		border-radius: 14px;
	}

	.gt-del__branch {
		align-items: flex-start;
		padding: 12px;
	}

	/* Title over the three tiers, stacked — side by side they wrapped into a
	   ragged two-and-a-half lines at 375px. */
	.gt-del__legend {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px;
	}

	.gt-del__legend-list {
		flex-direction: column;
		gap: 7px;
	}

	.gt-del__pill {
		padding: 8px 12px;
	}
}

/* --------------------------------------------------------------------------
   9. Focus + reduced motion
   -------------------------------------------------------------------------- */
/* !important answers stylesheet.css:7's global *:focus{outline:none !important}
   (the gtr-nav.css §11 precedent). */
.gt-del__toggle:focus-visible {
	outline: 2px solid var(--gd-orange-text) !important;
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.gt-del__toggle-icon {
		transition: none;
	}
}