/* ==========================================================================
   Expat360 — supplementary styles
   Everything expressible in theme.json lives there. This file carries only
   what theme.json cannot do: gradients with pseudo-element decoration,
   card hover physics, the topic colour system, and the ad zone frames.
   ========================================================================== */

/* --- Topic colour system -------------------------------------------------
   Six topic colours from the mockup. Applied by adding e360-topic--<slug>
   to a group or card; the icon tile and the tag inherit from it. */
.e360-topic--visa      { --e360-topic: var(--wp--preset--color--topic-visa); }
.e360-topic--business  { --e360-topic: var(--wp--preset--color--topic-business); }
.e360-topic--cities    { --e360-topic: var(--wp--preset--color--topic-cities); }
.e360-topic--directory { --e360-topic: var(--wp--preset--color--topic-directory); }
.e360-topic--culture   { --e360-topic: var(--wp--preset--color--topic-culture); }
.e360-topic--community { --e360-topic: var(--wp--preset--color--topic-community); }

/* --- Hero ---------------------------------------------------------------- */
.e360-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(135deg, #0b2545 0%, #13315c 45%, #1d4e89 100%);
}
.e360-hero::before {
	content: "";
	position: absolute;
	right: -140px;
	top: -120px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, rgba(74, 163, 223, .55), rgba(29, 78, 137, 0) 65%);
	pointer-events: none;
}
.e360-hero::after {
	content: "";
	position: absolute;
	left: -60px;
	bottom: -160px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	border: 2px dashed rgba(245, 145, 30, .35);
	pointer-events: none;
}
.e360-hero > * { position: relative; z-index: 1; }
.e360-hero :where(h1, h2, h3, p) { color: #fff; }
.e360-hero .e360-hero__sub { color: #cfe0f2; }
.e360-hero em { font-style: normal; color: var(--wp--preset--color--orange); }

/* --- Kicker / eyebrow ---------------------------------------------------- */
.e360-kicker {
	color: var(--wp--preset--color--orange);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 6px;
}

/* --- Chips (hero suggested searches) ------------------------------------- */
.e360-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.e360-chip {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	color: #eaf2fb;
	font-size: 13px;
	padding: 6px 13px;
	border-radius: 20px;
	transition: background .15s;
}
.e360-chip:hover { background: rgba(255, 255, 255, .22); text-decoration: none; }
/* Links inside a chip must not inherit the global blue — unreadable on navy. */
.e360-chip a { color: inherit; text-decoration: none; }
.e360-chip a:hover { text-decoration: underline; }

/* --- Cards --------------------------------------------------------------- */
.e360-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--card);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.e360-card:hover { transform: translateY(-5px); box-shadow: var(--wp--preset--shadow--lift); }

/* Pillar card — the six category tiles that overlap the hero. */
.e360-pillars { margin-top: -52px; position: relative; z-index: 5; }
@media (max-width: 960px) { .e360-pillars { margin-top: var(--wp--preset--spacing--40); } }

.e360-pillar { text-align: center; padding: 22px 16px; }
.e360-pillar__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	margin: 0 auto 12px;
	font-size: 23px;
	color: #fff;
	background: var(--e360-topic, var(--wp--preset--color--blue));
}
.e360-pillar h4 { font-size: 15px; }
.e360-pillar p { color: var(--wp--preset--color--muted); font-size: 12px; margin: 0; }

/* City card — image with navy scrim and copy over it. */
.e360-city { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; min-height: 0; }
.e360-city img { width: 100%; height: 100%; object-fit: cover; }
.e360-city__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 18px;
	color: #fff;
	background: linear-gradient(to top, rgba(11, 37, 69, .92) 15%, rgba(11, 37, 69, 0) 100%);
}
.e360-city__flag { font-size: 13px; color: #ffd8a8; font-weight: 600; }
.e360-city__meta { font-size: 12px; color: #dce8f5; display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }

/* Tag on a card thumbnail. */
.e360-tag {
	display: inline-block;
	background: #fff;
	color: var(--wp--preset--color--blue);
	font-size: 11px;
	font-weight: 700;
	padding: 5px 11px;
	border-radius: 20px;
	letter-spacing: .3px;
}
.e360-tag--solid { background: var(--e360-topic, var(--wp--preset--color--blue)); color: #fff; }

/* --- Reference content blocks (AEO/GEO) ---------------------------------- */

/* Key facts table — sits at the top of every reference page. */
.e360-keyfacts {
	background: var(--wp--preset--color--sky-soft);
	border: 1px solid #cfe3f6;
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40);
}
.e360-keyfacts table { border-collapse: collapse; width: 100%; }
.e360-keyfacts table { border: 0; }
.e360-keyfacts :where(th, td) {
	padding: 8px 12px 8px 0;
	border: 0;
	border-bottom: 1px solid #d7e6f5;
	vertical-align: top;
}
/* First cell is the label, whether the editor wrote it as th or td. */
.e360-keyfacts th,
.e360-keyfacts td:first-child {
	text-align: left;
	font-weight: 600;
	color: var(--wp--preset--color--blue);
	width: 40%;
}
.e360-keyfacts tr:last-child :where(th, td) { border-bottom: 0; }

/* FAQ — built from core/details blocks. expat360-core reads this container
   to emit FAQPage schema, so the class name is load-bearing. Do not rename
   it without updating includes/schema.php in the plugin. */
.e360-faq .wp-block-details { background: #fff; margin-bottom: 10px; }
.e360-faq summary { font-family: Poppins, sans-serif; font-weight: 600; cursor: pointer; }

/* Sources block — official government links, weighted heavily by AI engines. */
.e360-sources {
	border-left: 3px solid var(--wp--preset--color--orange);
	background: #fff;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: 15px;
}
.e360-sources h2, .e360-sources h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--wp--preset--color--muted); }

/* Byline and freshness stamp. */
.e360-byline {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 12px 0;
}
.e360-byline strong { color: var(--wp--preset--color--ink); }

/* --- Ad zones (ADRS, Phase 2) -------------------------------------------
   Zones render empty until the ADRS plugin hooks them. The dashed frame
   only shows to logged-in editors so the placement is visible while
   building, and never to visitors. */
.e360-ad { display: block; margin-inline: auto; text-align: center; }
.e360-ad:empty { min-height: 0; }
.e360-ad__placeholder {
	border: 1px dashed #b9c8dd;
	border-radius: 10px;
	color: #8496ae;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: grid;
	place-items: center;
	background: repeating-linear-gradient(45deg, #f2f6fb, #f2f6fb 10px, #eaf1f8 10px, #eaf1f8 20px);
}
.e360-ad--leaderboard .e360-ad__placeholder { max-width: 728px; min-height: 90px; margin-inline: auto; }
.e360-ad--billboard   .e360-ad__placeholder { max-width: 970px; min-height: 250px; margin-inline: auto; }
.e360-ad--box         .e360-ad__placeholder { max-width: 300px; min-height: 250px; }
.e360-ad--halfpage    .e360-ad__placeholder { max-width: 300px; min-height: 600px; }
.e360-ad--skyscraper  .e360-ad__placeholder { max-width: 160px; min-height: 600px; }

/* The right-hand skyscraper only exists where there is genuinely room. */
.e360-ad--skyscraper { display: none; }
@media (min-width: 1440px) { .e360-ad--skyscraper { display: block; } }

/* --- Utilities ----------------------------------------------------------- */
.e360-muted { color: var(--wp--preset--color--muted); }
.e360-breadcrumbs { font-size: 13px; color: var(--wp--preset--color--muted); }
.e360-breadcrumbs a { color: var(--wp--preset--color--muted); }
.e360-breadcrumbs a:hover { color: var(--wp--preset--color--blue); }

/* --- Footer ---------------------------------------------------------------
   Footer sits on navy, so links must not inherit the global blue. */
.e360-footer a { color: #cfe0f2; }
.e360-footer a:hover { color: #ffffff; }
.e360-footer :where(h2, h3, h4) a { color: inherit; }

/* --- Place grid (expat360/place-grid block) ------------------------------- */
.e360-place-grid {
	display: grid;
	grid-template-columns: repeat(var(--e360-cols, 3), minmax(0, 1fr));
	gap: 18px;
	margin-top: var(--wp--preset--spacing--40);
}
@media (max-width: 900px) { .e360-place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .e360-place-grid { grid-template-columns: 1fr; } }

.e360-place-grid .e360-city {
	display: block;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	/* Fixed ratio so cards without a featured image don't stretch to fill
	   the grid row. Portrait, matching the mockup's city cards. */
	aspect-ratio: 4 / 3;
	min-height: 0;
	box-shadow: var(--wp--preset--shadow--card);
	transition: transform .18s ease, box-shadow .18s ease;
	text-decoration: none;
}
.e360-place-grid .e360-city:hover { transform: translateY(-5px); box-shadow: var(--wp--preset--shadow--lift); }
.e360-place-grid .e360-city img { width: 100%; height: 100%; object-fit: cover; display: block; }
.e360-city__fallback {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #13315c 0%, #1d4e89 60%, #2a6db5 100%);
}
.e360-place-grid .e360-city__body {
	position: absolute;
	inset: auto 0 0 0;
	display: block;
	padding: 18px;
	color: #fff;
	background: linear-gradient(to top, rgba(11, 37, 69, .94) 20%, rgba(11, 37, 69, 0) 100%);
}
.e360-city__title {
	display: block;
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 21px;
	color: #fff;
	margin-top: 2px;
}

/* --- Newsletter signup ---------------------------------------------------- */
.e360-newsletter {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--40);
}
.e360-newsletter__input {
	flex: 1 1 320px;
	max-width: 420px;
	border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(255, 255, 255, .10);
	color: #fff;
	border-radius: 30px;
	padding: 12px 20px;
	font-size: 15px;
	font-family: inherit;
}
.e360-newsletter__input::placeholder { color: #a9c2de; }
.e360-newsletter__input:focus {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 2px;
	background: rgba(255, 255, 255, .16);
}
.e360-newsletter__button {
	border: 0;
	cursor: pointer;
	background: var(--wp--preset--color--orange);
	color: #fff;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	border-radius: 30px;
	padding: 12px 28px;
	transition: background .15s;
}
.e360-newsletter__button:hover { background: var(--wp--preset--color--orange-dark); }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.e360-newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.e360-newsletter__notice {
	text-align: center;
	margin-top: 14px;
	font-weight: 600;
}
.e360-newsletter__notice--ok { color: #7ee2b8; }
.e360-newsletter__notice--error { color: #ffb4ab; }

/* --- Per-place local time ------------------------------------------------- */
.e360-localtime {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	background: var(--wp--preset--color--sky-soft);
	border: 1px solid #cfe3f6;
	border-radius: 30px;
	padding: 8px 18px;
	font-size: 15px;
	margin: 0 0 var(--wp--preset--spacing--30);
}
.e360-localtime__label { color: var(--wp--preset--color--muted); }
.e360-localtime__clock {
	font-family: Poppins, sans-serif;
	font-weight: 700;
	color: var(--wp--preset--color--blue);
	font-variant-numeric: tabular-nums;
}
.e360-localtime__offset { color: var(--wp--preset--color--muted); font-size: 13px; }

/* --- Place feed (expat360/place-feed) ------------------------------------- */
.e360-feed { margin: var(--wp--preset--spacing--60) 0; }
.e360-feed__heading { font-size: var(--wp--preset--font-size--x-large); margin-bottom: var(--wp--preset--spacing--40); }
.e360-feed__grid {
	display: grid;
	grid-template-columns: repeat(var(--e360-cols, 3), minmax(0, 1fr));
	gap: 18px;
}
@media (max-width: 900px) { .e360-feed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .e360-feed__grid { grid-template-columns: 1fr; } }

.e360-feed__item { display: block; text-decoration: none; color: inherit; overflow: hidden; }
.e360-feed__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.e360-feed__fallback {
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, #13315c 0%, #1d4e89 60%, #2a6db5 100%);
}
.e360-feed__body { display: block; padding: 16px 18px 20px; }
.e360-feed__date {
	display: block;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
	font-weight: 700;
	margin-bottom: 4px;
}
.e360-feed__title {
	display: block;
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
	margin-bottom: 6px;
}
.e360-feed__excerpt { display: block; font-size: 14px; color: var(--wp--preset--color--muted); }
.e360-feed__item:hover .e360-feed__title { color: var(--wp--preset--color--blue); }

/* --- City quick links ----------------------------------------------------- */
.e360-quicklinks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: var(--wp--preset--spacing--40) 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 780px) { .e360-quicklinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .e360-quicklinks { grid-template-columns: 1fr; } }
.e360-quicklinks li { margin: 0; }
.e360-quicklinks a {
	display: block;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 14px 16px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.e360-quicklinks a:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--card);
	border-color: var(--wp--preset--color--sky);
	text-decoration: none;
}

/* --- House ad creatives ---------------------------------------------------
   Shown wherever nothing is sold. The supplied artwork is not drawn at exact
   IAB ratios, so it is scaled to the slot width and allowed to find its own
   height rather than being stretched to a fixed box. */
.e360-ad__house { display: block; line-height: 0; margin-inline: auto; }
.e360-ad__house img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	margin-inline: auto;
}
.e360-ad--billboard   .e360-ad__house { max-width: 970px; }
.e360-ad--leaderboard .e360-ad__house { max-width: 728px; }
.e360-ad--box         .e360-ad__house { max-width: 300px; }
.e360-ad--halfpage    .e360-ad__house { max-width: 300px; }
.e360-ad--skyscraper  .e360-ad__house { max-width: 160px; }
.e360-ad--hero        .e360-ad__house { max-width: 1200px; }
.e360-ad--hero { display: block; }

/* --- Plain content tables -------------------------------------------------
   Core table blocks outside a key-facts group had almost no styling, which
   made multi-column tables like the state-by-state advisory list hard to
   scan. Scoped rules follow, then the key-facts overrides are re-asserted
   because these come later in the file and would otherwise win. */
.wp-block-table { overflow-x: auto; }
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: 15px;
}
.wp-block-table :where(th, td) {
	padding: 11px 14px;
	border: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
	text-align: left;
}
.wp-block-table thead th {
	background: var(--wp--preset--color--sky-soft);
	color: var(--wp--preset--color--blue);
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .2px;
}
.wp-block-table tbody tr:nth-child(even) { background: #fafcff; }
.wp-block-table tbody tr:hover { background: var(--wp--preset--color--sky-soft); }

/* Re-assert the borderless key-facts look, which must not inherit the above. */
.e360-keyfacts .wp-block-table table { border: 0; }
.e360-keyfacts .wp-block-table :where(th, td) {
	padding: 8px 12px 8px 0;
	border: 0;
	border-bottom: 1px solid #d7e6f5;
	background: none;
}
.e360-keyfacts .wp-block-table th,
.e360-keyfacts .wp-block-table td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--blue);
	width: 40%;
}
.e360-keyfacts .wp-block-table tbody tr:hover { background: none; }
.e360-keyfacts .wp-block-table tbody tr:last-child :where(th, td) { border-bottom: 0; }

/* --- Header search --------------------------------------------------------
   Sits on the nav line. Collapsed to an icon-width field that expands on
   focus, so it does not compete with the navigation for space. */
.e360-headersearch { margin: 0; }
.e360-headersearch .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 30px;
	background: var(--wp--preset--color--bg);
	padding: 2px 2px 2px 14px;
	transition: border-color .15s, box-shadow .15s;
}
.e360-headersearch .wp-block-search__input {
	border: 0;
	background: transparent;
	font-size: 14px;
	width: 150px;
	padding: 6px 0;
	transition: width .2s ease;
	color: var(--wp--preset--color--ink);
}
.e360-headersearch .wp-block-search__input:focus { outline: none; width: 230px; }
.e360-headersearch .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--sky);
	box-shadow: 0 0 0 3px rgba(74, 163, 223, .18);
}
.e360-headersearch .wp-block-search__button {
	background: var(--wp--preset--color--blue);
	border: 0;
	border-radius: 30px;
	padding: 7px 12px;
	min-width: 0;
	color: #fff;
	cursor: pointer;
}
.e360-headersearch .wp-block-search__button:hover { background: var(--wp--preset--color--blue-bright); }
.e360-headersearch .wp-block-search__button svg { fill: currentColor; width: 20px; height: 20px; }

@media (max-width: 1100px) {
	.e360-headersearch .wp-block-search__input { width: 110px; }
	.e360-headersearch .wp-block-search__input:focus { width: 160px; }
}
@media (max-width: 780px) {
	.e360-headersearch .wp-block-search__input { width: 100%; }
}

/* --- Sidebar layout ------------------------------------------------------- */
.e360-withsidebar { gap: var(--wp--preset--spacing--60); }
@media (max-width: 900px) {
	.e360-withsidebar { flex-wrap: wrap; }
	.e360-withsidebar > .wp-block-column { flex-basis: 100% !important; }
	.e360-sidebar { margin-top: var(--wp--preset--spacing--60); }
}
.e360-sidebar { position: sticky; top: 24px; align-self: flex-start; }
@media (max-width: 900px) { .e360-sidebar { position: static; } }

/* --- Place navigation ----------------------------------------------------- */
.e360-placenav {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 18px;
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: 15px;
}
.e360-placenav__title {
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
	margin: 0 0 10px;
}
.e360-placenav__title--spaced {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--line);
}
.e360-placenav__city { border-bottom: 1px solid var(--wp--preset--color--line); }
.e360-placenav__city:last-of-type { border-bottom: 0; }
.e360-placenav__city > summary {
	cursor: pointer;
	padding: 9px 0;
	font-family: Poppins, sans-serif;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.e360-placenav__city > summary::-webkit-details-marker { display: none; }
.e360-placenav__city > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--wp--preset--color--muted);
	border-bottom: 2px solid var(--wp--preset--color--muted);
	transform: rotate(45deg);
	transition: transform .18s ease;
	flex: none;
	margin-left: 10px;
}
.e360-placenav__city[open] > summary::after { transform: rotate(-135deg); }
.e360-placenav__city > summary a { color: inherit; text-decoration: none; }
.e360-placenav__city > summary a:hover { color: var(--wp--preset--color--blue); }

.e360-placenav ul {
	list-style: none;
	margin: 0 0 10px;
	padding: 0 0 0 2px;
}
.e360-placenav li { margin: 0; }
.e360-placenav li a {
	display: block;
	padding: 6px 10px;
	border-radius: 8px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: 14px;
}
.e360-placenav li a:hover {
	background: var(--wp--preset--color--sky-soft);
	color: var(--wp--preset--color--blue);
}
.e360-placenav a[aria-current="page"] {
	background: var(--wp--preset--color--sky-soft);
	color: var(--wp--preset--color--blue);
	font-weight: 600;
}
.e360-placenav__empty { color: var(--wp--preset--color--muted); font-size: 13px; padding: 6px 10px; font-style: italic; }
.e360-placenav__national li a { padding-left: 10px; }

/* Sidebar ad zones stack neatly. */
.e360-sidebar .e360-ad { margin-bottom: var(--wp--preset--spacing--40); }

/* -------------------------------------------------------------------------
   Sidebar widgets — post sidebar (search, topics, popular, recent)
   ---------------------------------------------------------------------- */

.e360-widget {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 16px 16px 14px;
	margin-bottom: var(--wp--preset--spacing--40);
	box-shadow: 0 1px 2px rgba(16, 32, 56, .04);
}

.e360-widget__title {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.e360-widget__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.e360-widget__list li + li {
	border-top: 1px solid var(--wp--preset--color--line);
}

.e360-widget__list a {
	display: block;
	padding: 9px 0;
	text-decoration: none;
	color: inherit;
}

.e360-widget__list a:hover .e360-widget__label {
	color: var(--wp--preset--color--blue);
}

.e360-widget__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.e360-widget__meta {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: var(--wp--preset--color--muted);
}

.e360-widget__tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.e360-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--wash, #f6f8fb);
}

.e360-tag span {
	font-size: 11px;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.e360-tag:hover,
.e360-tag.is-current {
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--blue);
	background: #fff;
}

.e360-widget__search {
	display: flex;
	gap: 6px;
}

.e360-widget__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: 14px;
	background: #fff;
}

.e360-widget__search input[type="search"]:focus {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 1px;
}

.e360-widget__search button {
	flex: 0 0 auto;
	padding: 9px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--blue);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.e360-widget__search button:hover { filter: brightness(1.08); }

.e360-postterms {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
}

.e360-postterms a { color: var(--wp--preset--color--blue); }

/* -------------------------------------------------------------------------
   Topic hubs — the coverage map on /topics/<topic>/
   ---------------------------------------------------------------------- */

.e360-termdesc {
	max-width: 62ch;
	margin-bottom: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--muted);
	font-size: 17px;
}

.e360-topichub {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60);
	padding: 22px 24px 8px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--wash, #f6f8fb);
}

.e360-topichub__title {
	margin: 0 0 18px;
	font-size: 20px;
	line-height: 1.25;
}

.e360-topichub__group {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.e360-topichub__group:last-child {
	border-bottom: 0;
}

.e360-topichub__country {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.e360-topichub__country a {
	color: inherit;
	text-decoration: none;
}

.e360-topichub__country a:hover {
	color: var(--wp--preset--color--blue);
}

.e360-topichub__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}

.e360-topichub__list li {
	margin: 0;
}

.e360-topichub__list a {
	display: inline-block;
	padding: 7px 13px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

.e360-topichub__list a:hover {
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--blue);
}

/* -------------------------------------------------------------------------
   Contributor call — sidebar, place aware
   ---------------------------------------------------------------------- */

.e360-contribute {
	border: 1px dashed var(--wp--preset--color--orange, #f07f2d);
	border-radius: 14px;
	padding: 18px 18px 16px;
	margin-bottom: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--wash, #f6f8fb);
}

.e360-contribute__kicker {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--navy, #10243c);
}

.e360-contribute__body {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.e360-contribute__link {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--wp--preset--color--orange, #f07f2d);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.e360-contribute__link:hover { filter: brightness(1.06); color: #fff; }

/* -------------------------------------------------------------------------
   Contact forms
   ---------------------------------------------------------------------- */

.e360-form {
	max-width: 640px;
	margin: var(--wp--preset--spacing--50) 0;
	padding: 26px 26px 20px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--wash, #f6f8fb);
}

.e360-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.e360-form__row { margin: 0 0 16px; }

.e360-form__row label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--navy, #10243c);
}

.e360-form__req { color: var(--wp--preset--color--orange, #f07f2d); }

.e360-form input[type="text"],
.e360-form input[type="email"],
.e360-form select,
.e360-form textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
	color: inherit;
	box-sizing: border-box;
}

.e360-form textarea { resize: vertical; min-height: 130px; }

.e360-form input:focus,
.e360-form select:focus,
.e360-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 1px;
	border-color: transparent;
}

.e360-form__actions { margin: 20px 0 10px; }

.e360-form button[type="submit"] {
	padding: 12px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--orange, #f07f2d);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.e360-form button[type="submit"]:hover { filter: brightness(1.06); }

.e360-form__note {
	margin: 0;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

.e360-form--sent {
	border-style: solid;
	border-color: var(--wp--preset--color--blue);
	background: #fff;
}

.e360-form--sent p { margin: 0 0 8px; }
.e360-form--sent p:last-child { margin-bottom: 0; color: var(--wp--preset--color--muted); }

/* -------------------------------------------------------------------------
   Place hero image and photo credit
   ---------------------------------------------------------------------- */

.e360-placehero {
	margin: 0 0 var(--wp--preset--spacing--50);
}

.e360-placehero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 16px;
}

.e360-placehero__credit {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
	text-align: right;
}

.e360-placehero__credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.e360-placehero__credit a:hover { color: var(--wp--preset--color--blue); }

.e360-placehero__license {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 6px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	font-size: 11px;
	letter-spacing: .02em;
}


/* -------------------------------------------------------------------------
   Home hero — photograph behind the gradient.
   The gradient stays heavy enough to hold the headline at AA contrast; the
   photograph reads underneath rather than competing with the type.
   ---------------------------------------------------------------------- */

.e360-hero {
	background-image:
		linear-gradient(135deg, rgba(11, 37, 69, .90) 0%, rgba(19, 49, 92, .78) 55%, rgba(19, 49, 92, .62) 100%),
		url('https://expat360.org/wp-content/uploads/2026/08/Playa-Marlin-hotel-zone.webp');
	background-size: cover;
	background-position: center 62%;
	background-repeat: no-repeat;
}

@media (max-width: 700px) {
	.e360-hero {
		background-image:
			linear-gradient(135deg, rgba(11, 37, 69, .93) 0%, rgba(19, 49, 92, .88) 100%),
			url('https://expat360.org/wp-content/uploads/2026/08/Playa-Marlin-hotel-zone.webp');
	}
}

/* Topic grid — reference library index on the home page */
.e360-topicgrid{display:grid;grid-template-columns:repeat(var(--e360-cols,3),minmax(0,1fr));gap:14px;margin-top:22px}
@media(max-width:900px){.e360-topicgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.e360-topicgrid{grid-template-columns:1fr}}
.e360-topiccard{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border:1px solid var(--wp--preset--color--line);border-radius:12px;background:var(--wp--preset--color--bg);text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.e360-topiccard:hover{border-color:var(--wp--preset--color--orange);transform:translateY(-1px)}
.e360-topiccard__title{font-weight:600;font-size:16px;line-height:1.3;color:var(--wp--preset--color--navy)}
.e360-topiccard__count{font-size:13px;color:var(--wp--preset--color--muted)}

/* Country cards show maps rather than photographs. Letterbox instead of
   cropping, so the shape of the country survives the card. */
.e360-place-grid .e360-city--map img {
	object-fit: contain;
	background: var(--wp--preset--color--navy, #10243a);
	padding: 10px;
}
.e360-place-grid .e360-city--map .e360-city__body {
	background: linear-gradient(to top, rgba(6, 20, 34, 0.92) 0%, rgba(6, 20, 34, 0.55) 55%, rgba(6, 20, 34, 0) 100%);
}

/* A stub announces itself rather than pretending to be a guide. */
.e360-planned {
	border: 1px solid var(--wp--preset--color--line, #dfe5ec);
	border-left: 4px solid var(--wp--preset--color--orange, #e07a2f);
	border-radius: 12px;
	padding: 20px 22px;
	margin: 0 0 32px;
	background: var(--wp--preset--color--bg, #f7f9fb);
}
.e360-planned__title { font-weight: 700; margin: 0 0 8px; }
.e360-planned p { margin: 0 0 8px; }
.e360-planned p:last-child { margin-bottom: 0; }
.e360-planned__cta { font-weight: 600; }

/* Places that exist as a URL and nothing more, listed plainly. */
.e360-placelist {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.e360-placelist__item a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px dashed var(--wp--preset--color--line, #dfe5ec);
	border-radius: 999px;
	font-size: 15px;
	color: var(--wp--preset--color--muted, #5c6b7a);
	text-decoration: none;
}
.e360-placelist__item a:hover {
	border-style: solid;
	color: var(--wp--preset--color--navy, #10243a);
}

/* Follow / notify capture, on stubs and finished pages alike. */
.e360-watch {
	border: 1px solid var(--wp--preset--color--line, #dfe5ec);
	border-radius: 12px;
	padding: 20px 22px;
	margin: 32px 0;
	background: var(--wp--preset--color--bg, #f7f9fb);
}
.e360-watch__title { font-weight: 700; margin: 0 0 6px; }
.e360-watch__blurb { margin: 0 0 14px; color: var(--wp--preset--color--muted, #5c6b7a); font-size: 15px; }
.e360-watch__row { display: flex; flex-wrap: wrap; gap: 10px; }
.e360-watch__ask {
	width: 100%;
	margin: 0 0 10px;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--line, #dfe5ec);
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
}
.e360-watch__input {
	flex: 1 1 220px;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--line, #dfe5ec);
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
}
.e360-watch__button {
	padding: 10px 20px;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--orange, #e07a2f);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.e360-watch__button:hover { filter: brightness(0.94); }
.e360-watch__notice { margin: 12px 0 0; font-weight: 600; }
.e360-watch__notice--bad { color: #b3261e; }

/* ---------------------------------------------- Resident survey */
.e360-survey {
	border: 1px solid var(--wp--preset--color--line, #dfe5ec);
	border-radius: 14px;
	padding: 26px 26px 28px;
	margin: 40px 0;
	background: var(--wp--preset--color--bg, #f7f9fb);
}
.e360-survey h2, .e360-survey h3 { margin-top: 0; }
.e360-survey__blurb { color: var(--wp--preset--color--muted, #5c6b7a); font-size: 15px; margin: 0 0 18px; }
.e360-survey__form { display: block; }
.e360-survey__group, .e360-survey__rating {
	border: 0; padding: 0; margin: 0 0 14px;
}
.e360-survey__group legend, .e360-survey__rating legend {
	font-weight: 600; padding: 0; margin: 0 0 6px; font-size: 15px;
}
.e360-survey__rating legend small { font-weight: 400; color: var(--wp--preset--color--muted, #5c6b7a); }
.e360-survey__tenure { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.e360-survey__tenure label { font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.e360-survey__rating {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	border-bottom: 1px solid var(--wp--preset--color--line, #dfe5ec);
	padding-bottom: 10px;
}
.e360-survey__rating legend { float: left; margin: 0; }
.e360-survey__radios { display: flex; gap: 10px; }
.e360-survey__radios label { display: inline-flex; flex-direction: column; align-items: center; font-size: 12px; gap: 2px; cursor: pointer; }
.e360-survey__scale { display: flex; justify-content: flex-end; font-size: 12px; color: var(--wp--preset--color--muted, #5c6b7a); margin-bottom: 6px; letter-spacing: 3px; }
.e360-survey__field { display: block; margin: 0 0 14px; }
.e360-survey__field > span { display: block; font-weight: 600; font-size: 15px; margin-bottom: 5px; }
.e360-survey__field > span small { font-weight: 400; color: var(--wp--preset--color--muted, #5c6b7a); }
.e360-survey__field textarea,
.e360-survey__field input[type="text"],
.e360-survey__field input[type="email"] {
	width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
	border: 1px solid var(--wp--preset--color--line, #dfe5ec); border-radius: 8px; background: #fff;
}
.e360-survey__pitch { margin: 4px 0 18px; }
.e360-survey__pitch summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.e360-survey__button {
	padding: 11px 22px; border: 0; border-radius: 8px;
	background: var(--wp--preset--color--orange, #e07a2f); color: #fff;
	font: inherit; font-weight: 600; cursor: pointer;
}
.e360-survey__button:hover { filter: brightness(0.94); }
.e360-survey__notice { margin: 14px 0 0; font-weight: 600; }
.e360-survey__notice--bad { color: #b3261e; }

/* Published results */
.e360-results { margin: 0 0 26px; }
.e360-results__meta { font-size: 15px; color: var(--wp--preset--color--muted, #5c6b7a); margin: 0 0 16px; }
.e360-results__row { display: flex; align-items: center; gap: 12px; margin: 0 0 9px; }
.e360-results__label { flex: 0 0 auto; width: 190px; font-size: 15px; }
.e360-results__bar { flex: 1 1 auto; height: 10px; border-radius: 999px; background: rgba(16, 36, 58, 0.1); overflow: hidden; }
.e360-results__fill { display: block; height: 100%; border-radius: 999px; background: var(--wp--preset--color--orange, #e07a2f); }
.e360-results__value { flex: 0 0 auto; width: 84px; text-align: right; font-weight: 700; font-size: 15px; }
.e360-results__value small { font-weight: 400; color: var(--wp--preset--color--muted, #5c6b7a); }
.e360-results__split { font-size: 15px; margin: 16px 0 0; }
.e360-results__splitlabel { color: var(--wp--preset--color--muted, #5c6b7a); }
.e360-results__note { font-size: 13px; color: var(--wp--preset--color--muted, #5c6b7a); margin: 14px 0 0; }
@media (max-width: 640px) {
	.e360-results__label { width: 100%; flex-basis: 100%; }
	.e360-results__row { flex-wrap: wrap; }
	.e360-survey__rating { align-items: flex-start; }
}

/* An unbuilt city in the sidebar says so, quietly. */
.e360-placenav__tag {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border: 1px dashed var(--wp--preset--color--line, #dfe5ec);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted, #5c6b7a);
	vertical-align: middle;
	white-space: nowrap;
}

/* Latest articles about this place. */
.e360-placeposts { margin: 36px 0 0; }
.e360-placeposts__list { list-style: none; margin: 0; padding: 0; }
.e360-placeposts__item {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	padding: 11px 0; border-bottom: 1px solid var(--wp--preset--color--line, #dfe5ec);
}
.e360-placeposts__item:first-child { border-top: 1px solid var(--wp--preset--color--line, #dfe5ec); }
.e360-placeposts__item a { font-weight: 600; text-decoration: none; }
.e360-placeposts__item a:hover { text-decoration: underline; }
.e360-placeposts__date { flex: 0 0 auto; font-size: 13px; color: var(--wp--preset--color--muted, #5c6b7a); }


/* ---------------------------------------------------------------
   Resident notes.

   The reference layer is sourced, dated and impersonal. This box is
   the one place a named person is allowed to say "here is what I
   actually do", inside a maintained page rather than stranded in an
   article that will never be corrected. It has to read as clearly
   separate from the sourced material around it, which is why it gets
   a warm ground and a rule rather than the blue of the fact panels.
   --------------------------------------------------------------- */
.e360-resident {
	background: #fdf6ec;
	border: 1px solid #f0dfc6;
	border-left: 4px solid var(--wp--preset--color--orange);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--50);
}
.e360-resident > *:first-child { margin-top: 0; }
.e360-resident > *:last-child { margin-bottom: 0; }
.e360-resident p:first-child {
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.2px;
	margin-bottom: var(--wp--preset--spacing--30);
	padding-bottom: 10px;
	border-bottom: 1px solid #f0dfc6;
}
.e360-resident p:first-child strong { color: var(--wp--preset--color--orange-dark); }
.e360-resident h3 {
	font-size: 18px;
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: 6px;
}
.e360-resident ul { margin-top: 6px; }
.e360-resident li + li { margin-top: 6px; }

/* ---------------------------------------------------------------
   Advertising inquiry form.

   An advertiser is picking from an inventory, not writing a letter,
   so the form is grouped into decisions - what, who, how long, who
   you are - rather than presented as a flat stack of inputs. Each
   fieldset is a question the sales conversation would otherwise have
   to start with.
   --------------------------------------------------------------- */
.e360-adform { max-width: 42rem; }
.e360-adform__set {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--40);
}
.e360-adform__set legend {
	font-weight: 700;
	font-size: 17px;
	color: var(--wp--preset--color--navy);
	padding: 0 8px;
}
.e360-adform__hint {
	font-size: 15px;
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--30);
}
.e360-adform__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 10px 20px;
}
.e360-adform__check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	line-height: 1.4;
	cursor: pointer;
}
.e360-adform__check input { margin-top: 3px; flex: 0 0 auto; }
.e360-adform p { margin: 0 0 14px; }
.e360-adform label { display: block; font-weight: 600; margin-bottom: 4px; }
.e360-adform__check span { font-weight: 400; }
.e360-adform__opt {
	font-weight: 400;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}
.e360-adform input[type=text],
.e360-adform input[type=email],
.e360-adform input[type=tel],
.e360-adform input[type=url],
.e360-adform select,
.e360-adform textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	font: inherit;
	background: #fff;
}
.e360-adform__note {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}
.e360-adform--done {
	background: var(--wp--preset--color--sky-soft);
	border: 1px solid #cfe3f6;
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40);
}
/* The honeypot must be reachable by a bot and invisible to a person.
   display:none is the one thing that would tip off a good scraper. */
.e360-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The empty-guides slot is now an invitation, not a status label, so it has
   to read as something you can click. Kept quiet - it sits under a city name
   and must not compete with the real guide links above it. */
.e360-placenav li.e360-placenav__empty a {
	color: var(--wp--preset--color--orange-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-style: normal;
}
.e360-placenav li.e360-placenav__empty a:hover,
.e360-placenav li.e360-placenav__empty a:focus-visible {
	color: var(--wp--preset--color--orange);
}

/* Survey: required email, its explanation, the separate consent, and the
   route out to contributing. The hint has to sit under the label and read as
   an explanation rather than an error, because asking for an email is the
   biggest friction point in the form and an unexplained requirement is the
   thing people abandon on. */
.e360-survey__hint {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin: 2px 0 6px;
}
.e360-survey__optin {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	cursor: pointer;
}
.e360-survey__optin input { margin-top: 3px; flex: 0 0 auto; }
.e360-survey__next {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 15px;
	color: var(--wp--preset--color--muted);
}
.e360-survey__next a {
	color: var(--wp--preset--color--orange-dark);
	font-weight: 600;
}

/* The other survey inputs get their width from being inside their label;
   this one is not, so it needs saying. A short box next to full-width ones
   reads as a different, lesser field. */
.e360-survey input[type="email"] {
	width: 100%;
	box-sizing: border-box;
}

/* Local-time bar: the clock, plus the only invitation a reader gets to add
   to the page. The survey sits thousands of pixels below the fold, so
   without this nobody who stops reading early knows it is there. */
.e360-timebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--wp--preset--spacing--30); }
.e360-timebar .e360-localtime { margin: 0; }
.e360-timebar__cta {
	display: inline-flex;
	align-items: baseline;
	background: var(--wp--preset--color--bg, #f7f9fb);
	border: 1px solid var(--wp--preset--color--line, #dfe5ec);
	border-radius: 30px;
	padding: 8px 18px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.e360-timebar__cta:hover,
.e360-timebar__cta:focus-visible { background: #1d4e89; border-color: #1d4e89; color: #fff; }
/* Anchor target for the bar link, so the heading is not flush to the top. */
#e360-survey { scroll-margin-top: 24px; }

/* Sidebar category list. A plain stack rather than the tag pills used for
   guides, so the two panels do not read as one repeated cloud. */
.e360-widget__links { list-style: none; margin: 0; padding: 0; }
.e360-widget__links li + li { border-top: 1px solid var(--wp--preset--color--line, #dfe5ec); }
.e360-widget__links a,
.e360-widget__links li.is-empty > span {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 8px 0;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
/* A section with nothing filed in it yet is not a link — see place-nav.php. */
.e360-widget__links li.is-empty > span { color: var(--wp--preset--color--muted); font-weight: 400; }
.e360-widget__links a:hover > span:first-child { text-decoration: underline; }
.e360-widget__links a.is-current > span:first-child { text-decoration: underline; }
.e360-widget__count { font-size: 13px; font-weight: 400; color: var(--wp--preset--color--muted); }

/* Footer country list. The "Not written yet" tag is borrowed from the city
   navigation, but that was drawn for a light sidebar — on navy it has to take
   its colour from the text around it or it disappears. */
.e360-footercountries li.is-planned { opacity: 0.75; }
.e360-footer .e360-placenav__tag { color: inherit; border-color: currentColor; opacity: 0.7; }

/* -------------------------------------------------------------------------
   Magazine front
   A lead story, a secondary pair, then one block per category. Sections with
   nothing left to show are not rendered at all (see place-nav.php) — so the
   only job here is to size three variants of the same card.
   ---------------------------------------------------------------------- */
.e360-mag { display: flex; flex-direction: column; gap: 56px; }
.e360-mag__masthead { margin-bottom: 6px; }
.e360-mag__standfirst { max-width: 62ch; margin-left: 0; margin-right: auto; margin-bottom: 36px; font-size: 18px; color: var(--wp--preset--color--muted, #5b6b83); }

.e360-magcard { display: flex; flex-direction: column; gap: 14px; }
.e360-magcard__figure { display: block; overflow: hidden; border-radius: 14px; background: var(--wp--preset--color--bg, #f7f9fb); }
.e360-magcard__figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.e360-magcard__figure:hover img { transform: scale(1.03); }
.e360-magcard__body { display: flex; flex-direction: column; gap: 8px; }
.e360-magcard__kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.e360-magcard__kicker a { text-decoration: none; color: var(--wp--preset--color--orange, #e8792b); }
.e360-magcard__kicker a:hover { text-decoration: underline; }
.e360-magcard__title { margin: 0; line-height: 1.2; }
.e360-magcard__title a { text-decoration: none; color: inherit; }
.e360-magcard__title a:hover { text-decoration: underline; }
.e360-magcard__standfirst { margin: 0; color: var(--wp--preset--color--muted, #5b6b83); }
.e360-magcard__meta { margin: 0; font-size: 13px; color: var(--wp--preset--color--muted, #5b6b83); }

/* Lead: picture beside the words, and the only headline allowed to be loud. */
.e360-magcard--lead { display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: center; }
.e360-magcard--lead .e360-magcard__figure img { aspect-ratio: 4 / 3; }
.e360-magcard--lead .e360-magcard__title { font-size: clamp(28px, 3.2vw, 42px); }
.e360-magcard--lead .e360-magcard__standfirst { font-size: 18px; }
.e360-magcard--lead.has-no-image { grid-template-columns: 1fr; }

.e360-mag__secondary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.e360-magcard--secondary .e360-magcard__figure img { aspect-ratio: 16 / 10; }
.e360-magcard--secondary .e360-magcard__title { font-size: 22px; }

.e360-mag__section { display: block; }
.e360-mag__sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 12px; margin-bottom: 22px; border-top: 2px solid var(--wp--preset--color--navy, #132038); }
.e360-mag__sectiontitle { margin: 0; font-size: 22px; }
.e360-mag__sectiontitle a { text-decoration: none; color: inherit; }
.e360-mag__more { font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.e360-mag__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.e360-magcard--card .e360-magcard__figure img { aspect-ratio: 16 / 10; }
.e360-magcard--card .e360-magcard__title { font-size: 18px; }

@media (max-width: 1100px) {
	.e360-mag__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
	.e360-magcard--lead { grid-template-columns: 1fr; gap: 18px; }
	.e360-mag__secondary, .e360-mag__grid { grid-template-columns: 1fr; }
	.e360-mag { gap: 44px; }
}

/* Byline dates. Published always; "Updated" only when the day differs —
   the conditional half lives in place-nav.php, not here. */
.e360-dates { font-size: var(--wp--preset--font-size--small, 14px); color: var(--wp--preset--color--muted, #5b6b83); }
.e360-dates__updated { white-space: nowrap; }
.e360-dates__updated::before { content: "· "; }