/* ============================================================
   PORTUGALIST DESIGN SYSTEM
   Loaded once, site-wide (and in the block editor).
   Pages are built from .pg-* components — no per-page CSS.

   Type rule: font sizes are rem off a fixed scale (the tokens
   below); font family is always inherited from GeneratePress.
   This keeps the GP / GP Premium Customizer in charge of the
   base font and family — the design system only owns the scale.
   The single deliberate exception is --pg-serif, used for figures.

   Contents:
     1. Tokens (palette, type scale, shape)
     2. Section bands
     3. Typography
     4. Buttons
     5. Eyebrow & pills
     6. Cards & card grids
     7. Facts bar
     8. Hero
     9. Tables
    10. Place-page components
    11. Responsive
    12. Content components (email signup, currency table, cost level, requirement item)
    13. Block markup compatibility
   ============================================================ */

/* 1. TOKENS ------------------------------------------------- */
:root {
	/* Brand palette — derived from the pastel de nata logo */
	--pg-custard:       #F5C13D;   /* primary brand — accents, table head */
	--pg-custard-deep:  #E0A21C;   /* deep gold accent */
	--pg-custard-soft:  #F8DC97;   /* lighter gold — surfaces, custard band */
	--pg-caramel:       #6E3A1A;   /* brown — tags / pills, never large fills */
	--pg-cream:         #FBF5E8;   /* page background */
	--pg-pastry:        #F1E3C3;   /* card / warm section bg */
	--pg-ink:           #1C1A17;   /* headings / primary text */
	--pg-ink-mid:       #4A4038;   /* body text */
	--pg-ink-muted:     #8C8170;   /* secondary labels */
	--pg-sky:           #8ECAE6;   /* secondary accent / sky button */
	--pg-sky-deep:      #4A9FC4;   /* sky hover */
	--pg-sky-soft:      #E3EEF3;   /* pale sky — cool contrast band */

	/* Surfaces */
	--pg-white:         #FFFFFF;
	--pg-paper:         #FDFAF1;   /* article body — a touch lighter than cream
	                                  so the card lifts off the page without the
	                                  harsh white-on-cream contrast */
	--pg-border:        #E7DEC9;   /* warm hairline border */
	--pg-border-strong: #D8CBAC;

	/* Semantic states */
	--pg-pass-bg:  #E9F0E2;  --pg-pass:  #4F7A3D;  --pg-pass-deep: #3D5E2F;
	--pg-maybe-bg: #FBF0D2;  --pg-maybe: #A9791B;
	--pg-fail-bg:  #F7E5DF;  --pg-fail:  #B5462E;

	/* Body-copy link colour. A clear azulejo-ish blue that reads as
	   "click me" against cream/white. Kept separate from --pg-pass
	   (button green) so links and CTAs don't compete. */
	--pg-link:       #1463A6;
	--pg-link-hover: #0F4D85;

	/* Shape & depth */
	--pg-radius:    14px;
	--pg-radius-sm: 8px;
	--pg-shadow:    0 1px 4px rgba(28, 26, 23, .06);
	--pg-shadow-lg: 0 4px 20px rgba(28, 26, 23, .12);

	/* Type scale — rem off the root. Components size from these
	   tokens only; never a raw px font-size. Bumped by 1px from the
	   original scale for readers in their 60s and 70s. */
	--pg-text-xs:   0.75rem;    /* 12px — eyebrow, pill, micro-labels */
	--pg-text-sm:   0.8125rem;  /* 13px — table head, fact label */
	--pg-text-cap:  0.875rem;   /* 14px — captions, sub-nav links */
	--pg-text-body: 1rem;       /* 16px — component body copy */
	--pg-text-md:   1.0625rem;  /* 17px — hero subtitle */
	--pg-text-lead: 1.125rem;   /* 18px — lead paragraph */
	--pg-text-h3:   1.1875rem;  /* 19px — section sub-heading */
	--pg-text-fig:  1.5625rem;  /* 25px — figure / stat values */
	--pg-text-h2:   1.6875rem;  /* 27px — section heading */
	--pg-text-hero: 2.1875rem;  /* 35px — hero title */

	/* Family — body inherits from GeneratePress; serif is for figures */
	--pg-serif: Georgia, "Times New Roman", serif;

	/* Rhythm */
	--pg-band-pad: 64px;
	--pg-inner:    800px;    /* article / reading width */
	--pg-wide:     1080px;   /* card grids, multi-column sections */
}

/* 2. SECTION BANDS ------------------------------------------ */
/* A band is a full-width group (align: full in WordPress) carrying
   .pg-section plus a colour class. .pg-section-inner constrains the
   content; in WordPress the group's constrained layout does the same.
   Every band is light — the page never goes dark. Variety comes from
   warm creams, golden custard and the cool pale-sky band. */
.pg-section {
	padding: var(--pg-band-pad) 24px;
}
.pg-section-inner {
	max-width: var(--pg-inner);
	margin-inline: auto;
}

.pg-band-cream   { background: var(--pg-cream); }
.pg-band-pastry  { background: var(--pg-pastry); }
.pg-band-white   { background: var(--pg-white); }
.pg-band-custard { background: var(--pg-custard-soft); }
.pg-band-sky     { background: var(--pg-sky-soft); }
/* Soft green band — for "conclusion" / "bottom line" sections that
   need to feel distinct from surrounding cream/pastry bands. */
.pg-band-mint    { background: var(--pg-pass-bg); }

/* 3. TYPOGRAPHY --------------------------------------------- */
/* Scoped to .pg-section so a heading/paragraph block dropped into a
   band looks right with no extra classes. Family is left to inherit
   so the GeneratePress Customizer still controls it.

   The element is wrapped in :where() so these rules carry the
   specificity of `.pg-section` alone (0,1,0) — that way ANY component
   class on the element (.pg-eyebrow, .pg-curtable-note, etc.) ties and
   wins on source order, instead of being silently overridden. Plain
   blocks with no class still pick these up. */
.pg-section :where(h2) {
	font-size: var(--pg-text-h2);
	font-weight: 700;
	line-height: 1.25;
	color: var(--pg-ink);
	margin: 0 0 10px;
}
.pg-section :where(h3) {
	font-size: var(--pg-text-h3);
	font-weight: 600;
	line-height: 1.3;
	color: var(--pg-ink);
	margin: 0 0 8px;
}
.pg-section :where(p) {
	font-size: var(--pg-text-body);
	line-height: 1.65;
	color: var(--pg-ink-mid);
	margin: 0 0 14px;
}
.pg-section :where(p):last-child { margin-bottom: 0; }

.pg-lead {
	font-size: var(--pg-text-lead) !important;
	line-height: 1.6 !important;
	color: var(--pg-ink-mid) !important;
}

/* 4. BUTTONS ------------------------------------------------ */
/* Bare .pg-btn is the primary action. font-family:inherit because a
   <button> would otherwise fall back to the UA font. */
.pg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: var(--pg-text-body);
	font-weight: 600;
	line-height: 1;
	padding: 13px 22px;
	border: none;
	border-radius: var(--pg-radius-sm);
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	box-shadow: 0 2px 6px rgba(28, 26, 23, .15);
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* Lift on hover so buttons read as interactive and stand off the band. */
.pg-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(28, 26, 23, .2); }

/* Primary — green. Green reads as "go"; cream text keeps it legible
   on the fill. .pg-btn--primary is an explicit alias of the default. */
.pg-btn,
.pg-btn--primary { background: var(--pg-pass); color: var(--pg-cream); }
.pg-btn:hover,
.pg-btn--primary:hover { background: var(--pg-pass-deep); color: var(--pg-cream); }

/* Sky — secondary action. */
.pg-btn--sky { background: var(--pg-sky); color: var(--pg-ink); }
.pg-btn--sky:hover { background: var(--pg-sky-deep); color: var(--pg-white); }

/* Ghost — low-emphasis, outline only. */
.pg-btn--ghost {
	background: transparent;
	color: var(--pg-ink);
	box-shadow: inset 0 0 0 1.5px var(--pg-border-strong);
}
.pg-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--pg-ink); color: var(--pg-ink); }

/* Core Button block — Portugalist block styles. Registered in
   functions.php as "Portugalist – Primary / Sky / Ghost" so a button
   inserted in the editor matches a pattern's button with no CSS per page.
   Same look as .pg-btn, applied to the core button's inner link. */
.wp-block-button.is-style-pg-primary > .wp-block-button__link,
.wp-block-button.is-style-pg-sky > .wp-block-button__link,
.wp-block-button.is-style-pg-ghost > .wp-block-button__link {
	font-size: var(--pg-text-body);
	font-weight: 600;
	line-height: 1;
	padding: 13px 22px;
	border: none;
	border-radius: var(--pg-radius-sm);
	box-shadow: 0 2px 6px rgba(28, 26, 23, .15);
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wp-block-button.is-style-pg-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-pg-sky > .wp-block-button__link:hover,
.wp-block-button.is-style-pg-ghost > .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(28, 26, 23, .2);
}
.wp-block-button.is-style-pg-primary > .wp-block-button__link {
	background: var(--pg-pass); color: var(--pg-cream);
}
.wp-block-button.is-style-pg-primary > .wp-block-button__link:hover {
	background: var(--pg-pass-deep); color: var(--pg-cream);
}
.wp-block-button.is-style-pg-sky > .wp-block-button__link {
	background: var(--pg-sky); color: var(--pg-ink);
}
.wp-block-button.is-style-pg-sky > .wp-block-button__link:hover {
	background: var(--pg-sky-deep); color: var(--pg-white);
}
.wp-block-button.is-style-pg-ghost > .wp-block-button__link {
	background: transparent; color: var(--pg-ink);
	box-shadow: inset 0 0 0 1.5px var(--pg-border-strong);
}
.wp-block-button.is-style-pg-ghost > .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 1.5px var(--pg-ink); color: var(--pg-ink);
}

/* 5. EYEBROW & PILLS ---------------------------------------- */
.pg-eyebrow {
	display: block;
	font-size: var(--pg-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pg-ink-muted);
	margin: 0 0 6px;
}
.pg-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--pg-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 4px 10px;
	border-radius: 20px;
	background: var(--pg-pastry);
	color: var(--pg-ink);
}
.pg-pill--sky   { background: #E4F2F8;          color: var(--pg-sky-deep); }
.pg-pill--pass  { background: var(--pg-pass-bg);  color: var(--pg-pass); }
.pg-pill--maybe { background: var(--pg-maybe-bg); color: var(--pg-maybe); }
.pg-pill--fail  { background: var(--pg-fail-bg);  color: var(--pg-fail); }

/* 6. CARDS & CARD GRIDS ------------------------------------- */
/* Equal-height rule: the grid stretches every card in a row to the
   tallest; the card is a flex column so a __footer can be pinned to
   the bottom; a __thumb holds a fixed aspect ratio so every image in
   a row is the same height regardless of the source file. */
.pg-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 20px;
}
.pg-card {
	display: flex;
	flex-direction: column;
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	box-shadow: var(--pg-shadow);
	overflow: hidden;
}
/* Thumbnail — image OR video. Fixed ratio = identical heights. */
.pg-card__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--pg-pastry);
}
.pg-card__thumb img,
.pg-card__thumb video,
.pg-card__thumb iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}
/* Body — flex column; flex:1 makes short cards fill the stretched
   grid cell so footers still align. */
.pg-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 20px;
}
/* Inner rules carry the .pg-card parent class so they out-specify the
   scoped `.pg-section` typography. */
.pg-card .pg-card__title {
	font-size: var(--pg-text-h3);
	font-weight: 700;
	color: var(--pg-ink);
	margin: 0 0 4px;
}
.pg-card .pg-card__title a { color: var(--pg-ink); text-decoration: none; }
.pg-card:hover .pg-card__title a { color: var(--pg-custard-deep); }
.pg-card .pg-card__meta {
	font-size: var(--pg-text-xs);
	color: var(--pg-ink-muted);
	margin: 2px 0 0;
}
.pg-card .pg-card__text {
	font-size: var(--pg-text-body);
	line-height: 1.6;
	color: var(--pg-ink-mid);
	margin: 6px 0 0;
}
/* Footer — pushed to the bottom so CTAs align across a row. */
.pg-card__footer {
	margin-top: auto;
	padding-top: 14px;
}

/* Section header — eyebrow + heading + intro line at the top of a band.
   Just a spacing wrapper; the type comes from .pg-section / .pg-eyebrow. */
.pg-sec-head { margin-bottom: 24px; }
.pg-sec-head--center { text-align: center; }

/* Link cards — a grid of self-contained guide/tool cards. Each card is a
   group; its heading links out. Inner rules carry the .pg-linkcard parent
   class so they out-specify the scoped `.pg-section` typography. */
.pg-linkcard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 18px;
}
.pg-linkcard {
	display: flex;
	flex-direction: column;
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	box-shadow: var(--pg-shadow);
	padding: 22px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.pg-linkcard:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(28, 26, 23, .12);
}
.pg-linkcard .pg-linkcard__icon {
	width: 40px;
	height: 40px;
	border-radius: var(--pg-radius-sm);
	background: var(--pg-custard-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--pg-text-h3);
	margin: 0 0 13px;
}
.pg-linkcard .pg-linkcard__title {
	font-size: var(--pg-text-h3);
	font-weight: 700;
	margin: 0 0 5px;
}
.pg-linkcard .pg-linkcard__title a {
	color: var(--pg-ink);
	text-decoration: none;
}
.pg-linkcard:hover .pg-linkcard__title a { color: var(--pg-custard-deep); }
.pg-linkcard .pg-linkcard__desc {
	font-size: var(--pg-text-body);
	line-height: 1.55;
	color: var(--pg-ink-mid);
	margin: 0 0 12px;
}
/* Pinned to the bottom so the link aligns across a row of cards. */
.pg-linkcard .pg-linkcard__link {
	margin: auto 0 0;
	font-size: var(--pg-text-cap);
	font-weight: 700;
}
.pg-linkcard .pg-linkcard__link a {
	color: var(--pg-custard-deep);
	text-decoration: none;
}

/* Compact stats line inside a link card (e.g. visa cards: income,
   stay, citizenship). Sits between desc and link; uses · separators. */
.pg-linkcard .pg-linkcard__stats {
	font-size: var(--pg-text-sm);
	line-height: 1.5;
	color: var(--pg-ink-mid);
	margin: 0 0 12px;
	padding: 10px 0 0;
	border-top: 1px solid var(--pg-border);
}
.pg-linkcard .pg-linkcard__stats strong { color: var(--pg-ink); }

/* Fixed 3-column variant of the link-card grid — collapses to 1 column
   on mobile. Use when card count makes auto-fill leave orphan rows. */
.pg-linkcard-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) {
	.pg-linkcard-grid--3 { grid-template-columns: 1fr; }
}

/* Cost-of-living indicator — a small inline scale showing where a
   place sits on Low / Medium / High. Drop it near the top of a place
   page so cost shows up alongside the other quick facts. */
.pg-cost {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	background: var(--pg-pastry);
	border-radius: var(--pg-radius);
	font-size: var(--pg-text-cap);
	color: var(--pg-ink-mid);
	flex-wrap: wrap;
}
.pg-cost__label {
	font-weight: 700;
	color: var(--pg-ink);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: var(--pg-text-sm);
}
.pg-cost__scale {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.pg-cost__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--pg-border-strong);
	display: inline-block;
}
.pg-cost__dot--active { background: var(--pg-pass); }
.pg-cost__level {
	font-weight: 700;
	color: var(--pg-ink);
}

/* Amenities strip — a row of icons used inside place / location cards
   to show what's available locally (hospital, international school,
   weekly market, train station, beach). Inactive icons stay in the
   row but desaturate, so the layout is identical across all cards
   and the absence reads as informative rather than missing. Designed
   to take live data from GeoDirectory once it's installed — the user
   only needs to flip `is-active` per item. */
.pg-amenities {
	display: flex;
	gap: 6px;
	padding-top: 12px;
	margin-top: 14px;
	border-top: 1px solid var(--pg-border);
}
.pg-amenities__item {
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	background: var(--pg-pastry);
	border-radius: 50%;
	opacity: .3;
	filter: grayscale(0.8);
	transition: opacity .15s ease, filter .15s ease, transform .15s ease;
	cursor: help;
}
.pg-amenities__item.is-active {
	opacity: 1;
	filter: none;
	background: var(--pg-custard-soft);
}
.pg-amenities__item:hover { transform: translateY(-1px); }

/* Card additions used by the where-to-live overview. All are
   modifiers/extensions of the existing .pg-card / .pg-card-grid
   / .pg-cost so they don't fork the system — they're just
   variants the location card needs. */

/* Explicit-count grid overrides — the stock .pg-card-grid uses
   auto-fill which can vary 2/3/4 across with the viewport. These
   modifiers lock the column count for sections where a specific
   visual rhythm matters (e.g. "featured locations" needs to read
   as cards, not as a 2-up that mirrors the proscons block above). */
.pg-card-grid--2 {
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.pg-card-grid--3 {
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
@media (max-width: 820px) {
	.pg-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.pg-card-grid--2,
	.pg-card-grid--3 { grid-template-columns: 1fr; }
}

/* Spotlight card — wide image-left / content-right card. Used when
   a region has only one location (Madeira, Azores) so it doesn't
   sit as a lonely card in a 2-col grid. */
.pg-card--spot {
	flex-direction: row;
	max-width: var(--pg-wide);
	margin-inline: auto;
}
.pg-card--spot .pg-card__thumb {
	width: 50%;
	flex-shrink: 0;
	aspect-ratio: auto;
}
.pg-card--spot .pg-card__body { padding: 28px 32px; }
.pg-card--spot .pg-card__title { font-size: 1.5rem; }
@media (max-width: 820px) {
	.pg-card--spot { flex-direction: column; }
	.pg-card--spot .pg-card__thumb { width: 100%; aspect-ratio: 16 / 9; }
}

/* Compact cost-indicator — strips the pastry chrome off .pg-cost so
   it sits inline inside a card stats row, alongside population. */
.pg-cost--inline {
	padding: 0;
	background: transparent;
	gap: 6px;
}
.pg-cost--inline .pg-cost__dot { width: 9px; height: 9px; }

/* Card stats row — type · population · cost. Inside .pg-card__body. */
.pg-card .pg-card__stats {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 10px 0 0;
	font-size: var(--pg-text-cap);
	color: var(--pg-ink-mid);
}
.pg-card .pg-card__stats-sep {
	color: var(--pg-border-strong);
	font-weight: 700;
}

/* "Best for:" line inside a location card. */
.pg-card .pg-card__bestfor {
	font-size: var(--pg-text-cap);
	color: var(--pg-ink-mid);
	margin: 12px 0 0;
}
.pg-card .pg-card__bestfor strong {
	color: var(--pg-ink);
	margin-right: 4px;
}

/* Region intro — a short centered paragraph above the proscons +
   cards. Carries the .pg-section parent so it out-specifies the
   scoped band typography. */
.pg-section .pg-region-intro {
	max-width: 720px;
	margin: 0 auto 28px;
	text-align: center;
	font-size: var(--pg-text-md);
	color: var(--pg-ink-mid);
}

/* Location mini-cards — a compact text-only grid for "also worth
   knowing about" lists below the featured cards. Replaces the old
   data table (location · type · coast/inland · population) with
   something visual but still scannable. 3-4 across on desktop. */
.pg-loccards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
	gap: 10px;
}
.pg-loc {
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius-sm);
	padding: 14px 16px;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pg-loc:hover {
	border-color: var(--pg-custard);
	box-shadow: var(--pg-shadow);
	transform: translateY(-1px);
}
.pg-loc .pg-loc__name {
	font-size: var(--pg-text-body);
	font-weight: 700;
	color: var(--pg-ink);
	margin: 0 0 4px;
	line-height: 1.25;
}
.pg-loc .pg-loc__name a {
	color: inherit;
	text-decoration: none;
}
.pg-loc:hover .pg-loc__name a { color: var(--pg-custard-deep); }
.pg-loc .pg-loc__meta {
	font-size: var(--pg-text-cap);
	color: var(--pg-ink-muted);
	margin: 0;
	line-height: 1.4;
}
.pg-loc .pg-loc__pop {
	color: var(--pg-ink-mid);
	font-weight: 600;
}

/* Section sub-head — small label above a list ("Featured locations",
   "Other places worth knowing about"). Sits left-aligned in the
   constrained band. */
.pg-section .pg-subhead {
	font-size: var(--pg-text-cap);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pg-ink-muted);
	margin: 36px 0 14px;
}

/* Closed-route variant of .pg-linkcard — used to show investment
   routes (real estate, €1M capital transfer) that no longer qualify.
   Greys out, strikes through the title, and stays static on hover so
   readers can immediately see it's not actionable. */
.pg-linkcard--closed {
	opacity: 0.65;
	filter: grayscale(0.4);
}
.pg-linkcard--closed:hover {
	opacity: 0.85;
	transform: none;
	box-shadow: var(--pg-shadow);
}
.pg-linkcard--closed .pg-linkcard__title {
	text-decoration: line-through;
	text-decoration-color: var(--pg-fail);
	text-decoration-thickness: 2px;
}
.pg-linkcard--closed .pg-linkcard__title a {
	text-decoration: inherit;
	color: var(--pg-ink-mid);
}

/* Requirement card — wraps each individual requirement on a visa
   page (Age & nationality, Clean criminal record, etc.) so it reads
   as a discrete card rather than as flowing article prose. Subtle
   white surface on the cream band, h4 title, paragraphs + lists
   with consistent line-height regardless of wrapping. Bullet markers
   are custard (distinct from text); list lead-ins are 600 weight so
   they don't compete with the 700-weight card title above. */
.pg-reqcard {
	background: var(--pg-white);
	border-radius: var(--pg-radius-sm);
	box-shadow: 0 1px 3px rgba(28, 26, 23, .05);
	padding: 22px 26px;
	margin-bottom: 14px;
}
.pg-reqcard > h4,
.pg-reqcard > .wp-block-heading {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--pg-ink);
	line-height: 1.3;
	margin: 0 0 12px;
	text-transform: none;
	letter-spacing: 0;
}
.pg-reqcard > p,
.pg-reqcard > div > p {
	margin: 0 0 10px;
	line-height: 1.6;
}
.pg-reqcard > p:last-child,
.pg-reqcard > div > p:last-child,
.pg-reqcard > ul:last-child {
	margin-bottom: 0;
}
.pg-reqcard ul {
	margin: 12px 0;
	padding-left: 1.8em;
	list-style: disc;
}
.pg-reqcard ul > li {
	padding: 5px 0 5px 4px;
	line-height: 1.55;
	margin: 0;
}
.pg-reqcard ul > li::marker {
	color: var(--pg-custard-deep);
	font-size: 1.1em;
}
.pg-reqcard ul > li > strong,
.pg-reqcard p > strong {
	font-weight: 600;
	color: var(--pg-ink);
}

/* Pros/Cons cards — used in the rich decision sections on visa pages
   (Golden Visa especially). Each card has an icon, bold title, and a
   2-3 sentence explanation. A coloured left-rule signals pro vs con
   for at-a-glance scanning. Stack vertically inside a 2-col layout. */
.pg-procon {
	display: flex;
	gap: 14px;
	padding: 16px 18px;
	background: var(--pg-white);
	border-radius: var(--pg-radius-sm);
	border-left: 4px solid var(--pg-border-strong);
	margin-bottom: 14px;
	box-shadow: 0 1px 3px rgba(28, 26, 23, .06);
	transition: transform .12s ease, box-shadow .12s ease;
}
.pg-procon:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(28, 26, 23, .1);
}
.pg-procon--pro {
	background: var(--pg-pass-bg);
	border-left-color: var(--pg-pass);
}
.pg-procon--con {
	background: var(--pg-fail-bg);
	border-left-color: var(--pg-fail);
}
.pg-procon .pg-procon__icon {
	flex-shrink: 0;
	font-size: 1.4rem;
	margin: 0;
	line-height: 1.2;
}
.pg-procon__body { flex: 1; min-width: 0; }
.pg-procon .pg-procon__title {
	font-size: var(--pg-text-body);
	font-weight: 700;
	color: var(--pg-ink);
	margin: 0 0 6px;
	line-height: 1.3;
}
.pg-procon .pg-procon__text {
	font-size: var(--pg-text-cap);
	line-height: 1.55;
	color: var(--pg-ink-mid);
	margin: 0;
}
/* Column heading above each pro/con stack */
.pg-procon__head {
	display: block;
	font-size: var(--pg-text-cap);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--pg-border);
}
.pg-procon__head--pro {
	color: var(--pg-pass);
	border-bottom-color: var(--pg-pass);
}
.pg-procon__head--con {
	color: var(--pg-fail);
	border-bottom-color: var(--pg-fail);
}

/* Search form — prominent rounded input + green submit button. Posts
   to /?s= which is WordPress's built-in search route. Used in the
   knowledge-base hero to drive on-site search. */
.pg-search {
	display: flex;
	max-width: 580px;
	margin: 0 auto;
	background: var(--pg-white);
	border: 2px solid var(--pg-border-strong);
	border-radius: 999px;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pg-search:focus-within {
	border-color: var(--pg-custard);
	box-shadow: 0 0 0 3px rgba(245, 193, 61, .28);
}
.pg-search input[type="search"] {
	flex: 1;
	border: none;
	padding: 14px 22px;
	font-size: var(--pg-text-body);
	font-family: inherit;
	color: var(--pg-ink);
	background: transparent;
	outline: none;
	min-width: 0;
}
.pg-search input[type="search"]::placeholder { color: var(--pg-ink-muted); }
.pg-search button {
	border: none;
	padding: 0 26px;
	font-size: var(--pg-text-body);
	font-weight: 700;
	background: var(--pg-pass);
	color: var(--pg-cream);
	cursor: pointer;
	font-family: inherit;
	transition: background-color .15s ease;
}
.pg-search button:hover { background: var(--pg-pass-deep); }

/* Article list — a multi-column flow of compact text-only article
   links. Used in the knowledge-base page to surface secondary
   articles below the featured-guide cards. Multi-column flows top-
   to-bottom-then-right which reads naturally for sequential lists. */
/* Defensive: also matches when this list carries .wp-block-list, so
   the generic intro-list rule doesn't re-introduce disc markers
   alongside the custom → arrow. */
ul.pg-arts,
ul.pg-arts.wp-block-list {
	columns: 3 16rem;
	column-gap: 32px;
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
}
ul.pg-arts li,
ul.pg-arts.wp-block-list li {
	break-inside: avoid;
	list-style: none;
	padding: 7px 0;
	font-size: var(--pg-text-cap);
	line-height: 1.5;
}
ul.pg-arts li::marker,
ul.pg-arts.wp-block-list li::marker {
	content: "";
	color: transparent;
}
.pg-arts li::before {
	content: "→";
	color: var(--pg-custard-deep);
	font-weight: 700;
	margin-right: 8px;
}
.pg-arts li a {
	color: var(--pg-ink-mid);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .12s ease, border-color .12s ease;
}
.pg-arts li a:hover {
	color: var(--pg-link);
	border-bottom-color: var(--pg-custard);
}

/* Stat bar — a row of "N guides · M articles" type figures showing
   the site's breadth. Sits between hero and topic sections in the
   knowledge-base page. */
.pg-statbar {
	display: flex;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
	padding: 12px 24px;
	text-align: center;
}
.pg-statbar__item {
	font-size: var(--pg-text-cap);
	color: var(--pg-ink-muted);
	line-height: 1.3;
}
.pg-statbar__num {
	display: block;
	font-size: var(--pg-text-fig);
	font-weight: 700;
	color: var(--pg-custard-deep);
	line-height: 1;
	margin-bottom: 4px;
}

/* Cluster — a 2-column "lead card + related list" pattern. Used in
   the knowledge base to group articles by visa type, theme, or
   region: the cornerstone guide sits on the left as a .pg-linkcard,
   the supporting articles sit on the right as a single-column list.
   Reader scans the heading + lead card and decides whether the
   cluster is relevant before diving into the related list. */
.pg-cluster {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 28px;
	align-items: stretch;
	margin: 0 0 32px;
}
.pg-cluster__main {
	display: flex;          /* lets the inner .pg-linkcard stretch to full height */
}
.pg-cluster__main .pg-linkcard {
	flex: 1;
	margin: 0;
}
.pg-cluster__list {
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	box-shadow: var(--pg-shadow);
	padding: 20px 24px;
}
.pg-cluster__list .pg-cluster__head {
	font-size: var(--pg-text-cap);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pg-ink-muted);
	margin: 0 0 10px;
}
/* The list inside a cluster is one column — the right column is
   narrow enough that multi-column would be cramped. */
.pg-cluster__list .pg-arts,
.pg-arts--1 {
	columns: 1;
	column-gap: 0;
	margin-top: 0;
}
@media (max-width: 820px) {
	.pg-cluster { grid-template-columns: 1fr; }
}

/* Sub-section heading used to label a cluster ("D7", "Golden Visa")
   or any sub-group within a topic band. Bigger than .pg-subhead so
   it reads as a real divider, but not as big as the section's h2. */
.pg-section .pg-clusterhead {
	font-size: var(--pg-text-h3);
	font-weight: 700;
	color: var(--pg-ink);
	text-transform: none;
	letter-spacing: 0;
	margin: 44px 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--pg-custard);
}
.pg-section .pg-clusterhead:first-of-type { margin-top: 8px; }

/* Requirement item — a structured row used inside the visa
   requirements tabs (D7, D8, etc.). Icon column + body (label
   + 1-2 sentence description, with an optional link to a deeper
   article). Replaces the bare checkbox list with something
   scannable AND substantive enough to carry the keyword target.
   Stacks vertically; each item separated by a hairline. */
.pg-req {
	display: flex;
	gap: 14px;
	padding: 16px 0;
	border-top: 1px solid var(--pg-border);
}
.pg-req:first-child {
	border-top: none;
	padding-top: 0;
}
.pg-req .pg-req__icon {
	flex-shrink: 0;
	width: 32px;
	font-size: var(--pg-text-h3);
	line-height: 1.2;
	margin: 0;
}
.pg-req .pg-req__body { flex: 1; min-width: 0; }
.pg-req .pg-req__label {
	font-size: var(--pg-text-body);
	font-weight: 700;
	color: var(--pg-ink);
	margin: 0 0 4px;
}
.pg-req .pg-req__text {
	font-size: var(--pg-text-cap);
	line-height: 1.6;
	color: var(--pg-ink-mid);
	margin: 0;
}
.pg-req .pg-req__text a {
	color: var(--pg-pass);
	font-weight: 600;
}

/* 7. FACTS BAR ---------------------------------------------- */
/* Compact row of key figures — a soft golden strip with dark figures.
   Uses the lighter custard so it does not compete with UI accents. */
.pg-facts {
	background: var(--pg-custard-soft);
	border-radius: var(--pg-radius);
	padding: 20px 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
/* Inner rules carry the parent class (.pg-facts .pg-fact__x) so they
   out-specify the scoped `.pg-section p` typography — a facts bar keeps
   its look even when dropped inside a section band. Margins are explicit
   because core paragraph blocks carry a theme default margin. */
.pg-facts .pg-fact__label {
	font-size: var(--pg-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: rgba(28, 26, 23, .58);
	margin: 0 0 4px;
}
.pg-facts .pg-fact__value {
	font-family: var(--pg-serif);
	font-size: var(--pg-text-fig);
	font-weight: 700;
	color: var(--pg-ink);
	line-height: 1;
	margin: 0;
}
.pg-facts .pg-fact__sub {
	font-size: var(--pg-text-xs);
	color: rgba(28, 26, 23, .5);
	margin: 3px 0 0;
}

/* 8. HERO --------------------------------------------------- */
.pg-hero {
	background: var(--pg-pastry);
}
.pg-hero__inner {
	max-width: 1100px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
	min-height: 420px;
	padding: 52px 24px;
}
/* Long SEO-style H1s must wrap gracefully — no truncation. */
.pg-hero__title {
	font-size: var(--pg-text-hero);
	font-weight: 700;
	line-height: 1.18;
	color: var(--pg-ink);
	margin: 12px 0;
	overflow-wrap: break-word;
}
/* An <em> in a hero title reads as a green accent word (e.g. the
   "vs" in a comparison-page title), not italics. */
.pg-hero__title em { font-style: normal; color: var(--pg-pass); }
.pg-hero__sub {
	font-size: var(--pg-text-md);
	line-height: 1.6;
	color: var(--pg-ink-mid);
	margin: 0 0 22px;
}
.pg-hero__media {
	border-radius: var(--pg-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
/* The image may be a core Image block (<figure>) — strip its margin
   and let it fill the fixed-ratio media box. */
.pg-hero__media .wp-block-image {
	margin: 0;
	height: 100%;
}
.pg-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* A row of CTAs (primary button + a plain text link), and the small
   reassurance line below them — used by the homepage hero. */
.pg-hero__cta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.pg-hero__note {
	margin: 16px 0 0;
	font-size: var(--pg-text-cap);
	color: var(--pg-ink-muted);
}

/* Centered hero — single column with the media below. Used by guide /
   overview pages (e.g. "Where should you live in Portugal?"). Add the
   className pg-hero--center alongside pg-hero. */
.pg-hero--center { text-align: center; }
.pg-hero--center .pg-hero__inner {
	display: block;
	max-width: 880px;
	min-height: 0;
	padding: 80px 24px;                 /* bumped from inherited 52px — overview heroes
	                                       need real breathing room above and below */
}
.pg-hero--center .pg-hero__title,
.pg-hero--center .pg-hero__sub { margin-inline: auto; }
.pg-hero--center .pg-hero__title { max-width: 660px; }
.pg-hero--center .pg-hero__sub { max-width: 600px; }
.pg-hero--center .pg-hero__media {
	max-width: 760px;
	margin: 26px auto 0;
	aspect-ratio: 16 / 9;
}

/* 9. TABLES ------------------------------------------------- */
.pg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--pg-text-body);
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	overflow: hidden;
}
.pg-table thead tr { background: var(--pg-custard-soft); }
.pg-table th {
	text-align: left;
	padding: 12px 16px;
	font-size: var(--pg-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pg-ink);
}
.pg-table td {
	padding: 12px 16px;
	color: var(--pg-ink-mid);
	border-top: 1px solid var(--pg-border);
}
.pg-table tbody tr:first-child td { border-top: none; }
.pg-table td strong { color: var(--pg-ink); }

/* 10. PLACE-PAGE COMPONENTS --------------------------------- */
/* All inner rules carry the parent class so they out-specify the
   scoped `.pg-section` typography. */

/* Quick Facts panel — a white card of key place facts. Placed first
   in the section after the hero; the negative margin lifts it so it
   overlaps the hero band. */
.pg-factbox {
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	box-shadow: var(--pg-shadow);
	overflow: hidden;
	margin-top: -42px;
}
.pg-factbox .pg-factbox__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	padding: 15px 22px;
	background: var(--pg-cream);
	border-bottom: 1px solid var(--pg-border);
}
.pg-factbox .pg-factbox__title {
	font-size: var(--pg-text-cap);
	font-weight: 700;
	color: var(--pg-ink);
	margin: 0;
}
.pg-factbox .pg-factbox__hint {
	font-size: var(--pg-text-sm);
	color: var(--pg-ink-muted);
	margin: 0;
}
.pg-factbox .pg-factbox__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 24px;
	padding: 22px;
}
.pg-factbox .pg-factbox__item {
	display: flex;
	gap: 11px;
}
.pg-factbox .pg-factbox__icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: var(--pg-radius-sm);
	background: var(--pg-custard-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--pg-text-h3);
	margin: 0;
}
.pg-factbox .pg-factbox__label {
	font-size: var(--pg-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pg-ink-muted);
	margin: 0;
}
.pg-factbox .pg-factbox__value {
	font-size: var(--pg-text-cap);
	font-weight: 600;
	color: var(--pg-ink);
	margin: 3px 0 0;
}

/* Can-I-move-here visa list — a white card, one row per visa. */
.pg-visa-list {
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	box-shadow: var(--pg-shadow);
	overflow: hidden;
}
.pg-visa-list .pg-visa {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 15px 20px;
	border-top: 1px solid var(--pg-border);
}
.pg-visa-list > .pg-visa:first-child { border-top: none; }
.pg-visa-list .pg-visa__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--pg-radius-sm);
	background: var(--pg-custard-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--pg-text-lead);
	margin: 0;
}
.pg-visa-list .pg-visa__body { flex: 1; min-width: 0; }
.pg-visa-list .pg-visa__name {
	font-size: var(--pg-text-body);
	font-weight: 700;
	color: var(--pg-ink);
	margin: 0;
}
.pg-visa-list .pg-visa__name a { color: inherit; text-decoration: none; }
.pg-visa-list .pg-visa__name a:hover { color: var(--pg-pass); }
.pg-visa-list .pg-visa__desc {
	font-size: var(--pg-text-cap);
	line-height: 1.55;
	color: var(--pg-ink-mid);
	margin: 3px 0 0;
}
/* "See all visas" footer row — sits at the bottom of the list. */
.pg-visa-list .pg-visa--all {
	display: block;
	background: var(--pg-pastry);
	text-align: right;
	padding: 12px 20px;
}
.pg-visa-list .pg-visa--all a {
	font-size: var(--pg-text-cap);
	font-weight: 700;
	color: var(--pg-pass);
	text-decoration: none;
}
.pg-visa-list .pg-visa--all a:hover { text-decoration: underline; }

/* Pros & Cons — two tinted columns with custom-bulleted lists. */
.pg-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.pg-proscons__col {
	border-radius: var(--pg-radius);
	padding: 20px 22px;
}
.pg-proscons__col--pros { background: var(--pg-pass-bg); }
.pg-proscons__col--cons { background: var(--pg-fail-bg); }
.pg-proscons .pg-proscons__head {
	font-size: var(--pg-text-body);
	font-weight: 700;
	margin: 0 0 6px;
}
.pg-proscons__col--pros .pg-proscons__head { color: var(--pg-pass); }
.pg-proscons__col--cons .pg-proscons__head { color: var(--pg-fail); }
/* Pros/cons lists lean on the generic ul.wp-block-list bullet styling
   (custard outside markers, hanging indent). The previous custom
   coloured ::before dots fought the generic rule because both selectors
   had equal specificity and the generic one comes later — so the disc
   markers re-appeared and rendered alongside the dots. Simpler & more
   robust: drop the custom dots and let the standard markers do the
   bullets. The pro/con signal is already carried by the column tint,
   the header colour, and the ✓ / ✗ in the head label. */
.pg-proscons ul,
.pg-proscons ul.wp-block-list {
	margin: 6px 0 0;
}
.pg-proscons li,
.pg-proscons ul.wp-block-list li {
	font-size: var(--pg-text-cap);
	line-height: 1.55;
	color: var(--pg-ink-mid);
}
.pg-proscons li strong { color: var(--pg-ink); }

/* Member-gated video teaser — a locked preview with a log-in CTA. The
   real reveal for logged-in members is a later feature. */
.pg-video {
	position: relative;
	border-radius: var(--pg-radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #3A342B, #6E3A1A);
}
.pg-video .pg-video__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 4px;
	padding: 24px;
	background: linear-gradient(rgba(28, 26, 23, .55), rgba(28, 26, 23, .78));
}
.pg-video .pg-video__lock {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--pg-custard);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--pg-text-h3);
	margin: 0 0 8px;
}
.pg-video .pg-video__title {
	font-size: var(--pg-text-lead);
	font-weight: 700;
	color: var(--pg-white);
	margin: 0;
}
.pg-video .pg-video__text {
	font-size: var(--pg-text-cap);
	color: rgba(255, 255, 255, .72);
	max-width: 340px;
	margin: 0 0 12px;
}

@media (max-width: 680px) {
	.pg-factbox .pg-factbox__grid { grid-template-columns: 1fr; }
	.pg-proscons { grid-template-columns: 1fr; }
}

/* 11. RESPONSIVE -------------------------------------------- */
/* Shrinking the scale tokens cascades to every component that sizes
   from them — no per-component overrides needed. */
@media (max-width: 768px) {
	:root {
		--pg-band-pad: 44px;
		--pg-text-hero: 1.6875rem;  /* 27px */
		--pg-text-h2:   1.4375rem;  /* 23px */
	}
	.pg-hero__inner { grid-template-columns: 1fr; gap: 28px; min-height: 0; }
}
@media (max-width: 560px) {
	.pg-facts { grid-template-columns: 1fr 1fr; }
}

/* 12. CONTENT COMPONENTS ------------------------------------ */

/* Email signup — a newsletter block. The form itself is a Gravity Form
   (MailerLite add-on), styled by gravity-forms.css; this is just the
   band / card wrapper around it. Two variants: --band (full-width
   strip) and --card (in-content or sidebar). */
.pg-signup .pg-signup__eyebrow {
	display: block;
	font-size: var(--pg-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pg-ink-muted);
	margin: 0 0 6px;
}
.pg-signup .pg-signup__title {
	font-size: var(--pg-text-h2);
	font-weight: 700;
	color: var(--pg-ink);
	margin: 0 0 6px;
}
.pg-signup .pg-signup__copy {
	font-size: var(--pg-text-body);
	line-height: 1.6;
	color: var(--pg-ink-mid);
	margin: 0 0 16px;
}
.pg-signup .pg-signup__note {
	font-size: var(--pg-text-sm);
	color: var(--pg-ink-muted);
	margin: 12px 0 0;
}
.pg-signup--band { background: var(--pg-custard-soft); }
.pg-signup--band .pg-signup__inner {
	max-width: 540px;
	margin-inline: auto;
	text-align: center;
}
.pg-signup--card {
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-left: 4px solid var(--pg-custard);
	border-radius: var(--pg-radius);
	box-shadow: var(--pg-shadow);
	padding: 22px 24px;
}

/* Currency table — a multi-currency figure table; each cell is a
   [dynamic_value] shortcode. Built as one HTML block (tabular data
   with shortcodes), so all of its styling lives here. */
.pg-curtable-wrap {
	overflow-x: auto;
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	box-shadow: var(--pg-shadow);
	background: var(--pg-white);
}
.pg-curtable {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--pg-text-body);
	min-width: 560px;
}
.pg-curtable thead th {
	background: var(--pg-custard-soft);
	padding: 12px 16px;
	font-size: var(--pg-text-sm);
	font-weight: 700;
	color: var(--pg-ink);
	text-align: right;
	white-space: nowrap;
}
.pg-curtable thead th:first-child { text-align: left; }
.pg-curtable thead th small {
	display: block;
	font-weight: 400;
	font-size: var(--pg-text-xs);
	color: rgba(28, 26, 23, .6);
	margin-top: 1px;
}
.pg-curtable td {
	padding: 12px 16px;
	text-align: right;
	color: var(--pg-ink-mid);
	border-top: 1px solid var(--pg-border);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.pg-curtable td:first-child {
	text-align: left;
	font-weight: 600;
	color: var(--pg-ink);
}
.pg-curtable tbody tr:first-child td { border-top: none; }
.pg-curtable .is-base { background: rgba(245, 193, 61, .12); }
.pg-curtable td.is-base { font-weight: 700; color: var(--pg-ink); }
.pg-curtable__group td {
	background: var(--pg-cream);
	font-size: var(--pg-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pg-ink-muted);
	text-align: left;
}
.pg-curtable-note {
	font-size: var(--pg-text-sm);
	color: var(--pg-ink-muted);
	margin-top: 10px;
}

/* Callout — a tinted aside dropped inside article content ("insider
   tip", "first-timer tip", etc.). Icon column + body column. */
.pg-callout {
	display: flex;
	gap: 13px;
	background: var(--pg-sky-soft);
	border-radius: var(--pg-radius);
	padding: 16px 18px;
}
.pg-callout .pg-callout__icon {
	font-size: var(--pg-text-fig);
	line-height: 1.2;
	flex-shrink: 0;
	margin: 0;
}
.pg-callout .pg-callout__title {
	font-size: var(--pg-text-cap);
	font-weight: 700;
	color: var(--pg-ink);
	margin: 0 0 3px;
}
.pg-callout .pg-callout__text {
	font-size: var(--pg-text-cap);
	line-height: 1.6;
	color: var(--pg-ink-mid);
	margin: 0;
}
/* Variant — a warmer tone for cautions / "worth knowing". A bit more
   breathing room beneath, because warm callouts often sit immediately
   above a .pg-reqcard and otherwise feel cramped against it. */
.pg-callout--warm {
	background: var(--pg-maybe-bg);
	margin-bottom: 20px;
}

/* CTA — a centred end-of-section card asking the reader to take the
   next step (book a call, get the guide, contact us). Designed to drop
   into the bottom of any pg-band-* section without extra wrapper markup.

   Structure (all optional except the button):
       .pg-cta
         > .pg-eyebrow         small uppercase label, custard-deep
         > h2                  serif headline
         > p                   one or two lines of body copy
         > .wp-block-buttons   a single primary button (or two stacked)

   The top accent strip in custard ties it visually to the brand without
   needing an icon. Variants below for cooler / cleaner backgrounds. */
.pg-cta {
	position: relative;
	max-width: 720px;
	margin: 40px auto;
	padding: 36px 40px 32px;
	background: var(--pg-pastry);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	box-shadow: var(--pg-shadow);
	text-align: center;
	overflow: hidden;
}
/* Custard accent strip across the top of the card — small visual
   anchor so the CTA reads as a deliberate panel, not just a coloured
   div. Drawn as a ::before so it doesn't fight any inner padding. */
.pg-cta::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--pg-custard);
}
.pg-cta .pg-eyebrow {
	color: var(--pg-custard-deep);   /* override the muted default so it pops */
	margin: 0 0 10px;
}
.pg-cta h2,
.pg-cta .wp-block-heading {
	font-family: var(--pg-serif);
	font-size: var(--pg-text-h2);
	line-height: 1.2;
	color: var(--pg-ink);
	margin: 0 0 12px;
}
.pg-cta p {
	max-width: 52ch;                 /* keep body lines comfortably short */
	margin: 0 auto 22px;
	font-size: var(--pg-text-md);
	line-height: 1.55;
	color: var(--pg-ink-mid);
}
.pg-cta .wp-block-buttons {
	margin: 0;
	justify-content: center;
}
/* If the author drops a second supporting line under the button
   (e.g. "Takes 30 seconds. No spam."), shrink it. */
.pg-cta .pg-cta__foot,
.pg-cta > p:last-child:not(:first-of-type) {
	margin-top: 14px;
	margin-bottom: 0;
	font-size: var(--pg-text-sm);
	color: var(--pg-ink-muted);
}

/* Variant — cooler tone for sections that already sit on a warm band
   (e.g. cream / pastry). Keeps contrast without going dark. */
.pg-cta.is-style-sky,
.pg-cta--sky {
	background: var(--pg-sky-soft);
}
.pg-cta.is-style-sky::before,
.pg-cta--sky::before {
	background: var(--pg-sky-deep);
}
.pg-cta.is-style-sky .pg-eyebrow,
.pg-cta--sky .pg-eyebrow {
	color: var(--pg-sky-deep);
}

/* Variant — clean white card for very busy backgrounds. */
.pg-cta.is-style-white,
.pg-cta--white {
	background: var(--pg-white);
}

/* Responsive — let the card breathe on phones. */
@media (max-width: 640px) {
	.pg-cta {
		padding: 28px 22px 24px;
		margin: 28px auto;
	}
	.pg-cta h2,
	.pg-cta .wp-block-heading {
		font-size: var(--pg-text-h3);
	}
	.pg-cta p {
		font-size: var(--pg-text-body);
	}
}

/* Affiliate disclosure — a small italic line, usually below the lead. */
.pg-disclosure {
	font-size: var(--pg-text-sm);
	font-style: italic;
	color: var(--pg-ink-muted);
	padding-left: 12px;
	border-left: 2px solid var(--pg-border-strong);
}

/* Table of contents — a white "in this article" box of jump links. */
.pg-toc {
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	padding: 16px 20px;
}
.pg-toc .pg-toc__title {
	font-size: var(--pg-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pg-ink-muted);
	margin: 0 0 8px;
}
.pg-toc ol { margin: 0; padding-left: 18px; }
.pg-toc li { font-size: var(--pg-text-cap); padding: 3px 0; }
.pg-toc a { color: var(--pg-ink-mid); text-decoration: none; }
.pg-toc a:hover { color: var(--pg-custard-deep); }

/* Author bio — a white card: round avatar + name, role, bio, link. */
.pg-author {
	display: flex;
	gap: 16px;
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	box-shadow: var(--pg-shadow);
	padding: 22px;
}
.pg-author .pg-author__avatar {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	margin: 0;
}
.pg-author .pg-author__avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.pg-author .pg-author__name {
	font-size: var(--pg-text-body);
	font-weight: 700;
	color: var(--pg-ink);
	margin: 0;
}
.pg-author .pg-author__role {
	font-size: var(--pg-text-sm);
	color: var(--pg-ink-muted);
	margin: 0 0 6px;
}
.pg-author .pg-author__bio {
	font-size: var(--pg-text-cap);
	line-height: 1.6;
	color: var(--pg-ink-mid);
	margin: 0 0 8px;
}
.pg-author .pg-author__link {
	font-size: var(--pg-text-cap);
	font-weight: 700;
	margin: 0;
}
.pg-author .pg-author__link a { color: var(--pg-custard-deep); text-decoration: none; }

/* Card category label — a small kicker above a card title (related
   posts, archive cards). */
.pg-card .pg-card__cat {
	font-size: var(--pg-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pg-custard-deep);
	margin: 0 0 4px;
}

/* Quiz launcher tiles — a grid of "what matters" tiles above a quiz
   CTA. The quiz itself is a Gravity Form (Quiz Add-On). */
.pg-matters {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 14px;
}
.pg-matter {
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	padding: 18px 20px;
}
.pg-matter .pg-matter__icon {
	font-size: var(--pg-text-fig);
	line-height: 1.2;
	margin: 0;
}
.pg-matter .pg-matter__label {
	font-size: var(--pg-text-body);
	font-weight: 700;
	color: var(--pg-ink);
	margin: 8px 0 3px;
}
.pg-matter .pg-matter__line {
	font-size: var(--pg-text-cap);
	line-height: 1.5;
	color: var(--pg-ink-mid);
	margin: 0;
}
.pg-quiz-cta { text-align: center; margin-top: 26px; }
.pg-quiz-cta .wp-block-buttons { justify-content: center; }
.pg-quiz-cta .pg-quiz-cta__note {
	font-size: var(--pg-text-cap);
	color: var(--pg-ink-muted);
	margin: 10px 0 0;
}

/* "See all N places" link — closes a region's card row. */
.pg-seeall {
	display: inline-block;
	margin: 18px 0 0;
	font-size: var(--pg-text-cap);
	font-weight: 700;
}
.pg-seeall a { color: var(--pg-pass); text-decoration: none; }
.pg-seeall a:hover { text-decoration: underline; }

/* Comparison grid — two tinted headers, then alternating full-width
   label rows and paired cells. The block is one CSS grid; children
   flow into it in order (head, head, label, cell, cell, label, …). */
.pg-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	overflow: hidden;
	box-shadow: var(--pg-shadow);
}
.pg-compare__head { padding: 18px 20px; }
.pg-compare__head--a { background: var(--pg-custard-soft); }
.pg-compare__head--b { background: var(--pg-sky-soft); border-left: 1px solid var(--pg-border); }
.pg-compare .pg-compare__name {
	font-size: var(--pg-text-lead);
	font-weight: 800;
	color: var(--pg-ink);
	margin: 0;
}
.pg-compare .pg-compare__tag {
	font-size: var(--pg-text-sm);
	color: var(--pg-ink-mid);
	margin: 2px 0 0;
}
.pg-compare .pg-compare__label {
	grid-column: 1 / -1;
	padding: 9px 20px;
	background: var(--pg-cream);
	border-top: 1px solid var(--pg-border);
	font-size: var(--pg-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--pg-ink-muted);
	margin: 0;
}
.pg-compare .pg-compare__cell {
	padding: 13px 20px;
	font-size: var(--pg-text-body);
	line-height: 1.5;
	color: var(--pg-ink-mid);
	margin: 0;
}
.pg-compare .pg-compare__cell--b { border-left: 1px solid var(--pg-border); }
.pg-compare .pg-compare__cell strong { color: var(--pg-ink); }

/* Verdict cards — paired white cards ("choose X if…"). */
.pg-verdict {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.pg-verdict__card {
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius);
	box-shadow: var(--pg-shadow);
	padding: 22px 24px;
}
.pg-verdict .pg-verdict__card h3 {
	font-size: var(--pg-text-h3);
	font-weight: 700;
	color: var(--pg-ink);
	margin: 0 0 10px;
}
/* Specificity raised with .wp-block-list (see .pg-proscons note). */
.pg-verdict .pg-verdict__card ul,
.pg-verdict .pg-verdict__card ul.wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pg-verdict .pg-verdict__card ul.wp-block-list li,
.pg-verdict .pg-verdict__card li {
	position: relative;
	list-style: none;
	font-size: var(--pg-text-body);
	line-height: 1.5;
	color: var(--pg-ink-mid);
	padding: 6px 0 6px 16px;
	margin: 0;
}
.pg-verdict .pg-verdict__card ul.wp-block-list li::marker,
.pg-verdict .pg-verdict__card li::marker {
	content: "";
	color: transparent;
}
.pg-verdict .pg-verdict__card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pg-pass);
}

/* Short-answer box — the verdict up front on an opinion / analysis
   piece. Dropped inside article content. */
.pg-shortanswer {
	background: var(--pg-custard-soft);
	border-radius: var(--pg-radius);
	padding: 20px 24px;
}
.pg-shortanswer .pg-shortanswer__label {
	font-size: var(--pg-text-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--pg-caramel);
	margin: 0 0 6px;
}
.pg-shortanswer .pg-shortanswer__text {
	font-size: var(--pg-text-lead);
	line-height: 1.6;
	color: var(--pg-ink);
	margin: 0;
}

/* Pull quote — a core Quote block with the "Portugalist – Pull quote"
   style (registered in functions.php). Sits in a tinted card so it
   reads as a deliberate aside rather than oversized body copy.
   Body-ish size (not h2) keeps the rhythm with surrounding text. */
.wp-block-quote.is-style-pg-pull {
	font-family: var(--pg-serif);
	font-size: 1.05rem;
	line-height: 1.55;
	font-style: italic;
	color: var(--pg-ink);
	background: var(--pg-custard-soft);
	border-left: 4px solid var(--pg-custard);
	border-radius: 0 var(--pg-radius) var(--pg-radius) 0;
	padding: 20px 24px;
	margin: 24px 0;
}
.wp-block-quote.is-style-pg-pull p {
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 10px;
}
.wp-block-quote.is-style-pg-pull p:last-of-type { margin-bottom: 0; }
.wp-block-quote.is-style-pg-pull cite {
	display: block;
	font-family: inherit;
	font-size: var(--pg-text-sm);
	font-style: normal;
	font-weight: 600;
	color: var(--pg-ink-mid);
	margin-top: 10px;
}
.wp-block-quote.is-style-pg-pull cite::before {
	content: "— ";
	color: var(--pg-ink-muted);
}

@media (max-width: 760px) {
	.pg-verdict { grid-template-columns: 1fr; }
}

/* Author line — sits directly under a hero on landing pages
   (visa requirement pages, etc.) to signal who wrote it without the
   full theme byline card. Renamed from .pg-byline to avoid
   colliding with the rich theme-injected .pg-byline author card
   that the single-post template renders. */
.pg-author-line {
	font-size: var(--pg-text-sm);
	color: var(--pg-ink-muted);
	margin: 14px 0 0;
	letter-spacing: .02em;
}
.pg-author-line a {
	color: var(--pg-ink-mid);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--pg-border);
	transition: border-color .15s ease, color .15s ease;
}
.pg-author-line a:hover {
	color: var(--pg-pass);
	border-bottom-color: var(--pg-pass);
}
.pg-author-line .pg-author-line__sep {
	margin: 0 8px;
	color: var(--pg-border-strong);
}

/* Core list block — bullet alignment inside content bands. Without
   this, the marker and the wrapped text can sit on different vertical
   lines (especially with bands that scope paragraph styles). Outside
   markers + a generous padding-left keeps wrapping lines aligned to
   the first character of the bullet text. */
.pg-section ul.wp-block-list,
.pg-section ul.wp-block-list ul {
	list-style: disc outside;
	padding-left: 1.4em;
	margin: 12px 0;
}
.pg-section ul.wp-block-list li,
.pg-section ul.wp-block-list ul li {
	padding-left: 4px;
	margin: 4px 0;
	line-height: 1.55;
}
.pg-section ul.wp-block-list li::marker {
	color: var(--pg-custard-deep);
}

/* Button row — force the core .wp-block-buttons to lay out
   horizontally with a gap. The core layout class (`is-layout-flex`)
   sometimes drops off when block markup gets reflowed by an editor
   round-trip, which makes adjacent buttons stack vertically. This
   guarantees them side-by-side regardless. */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.wp-block-buttons.is-content-justification-center,
.wp-block-buttons.is-layout-flex.is-content-justification-center {
	justify-content: center;
}
.wp-block-buttons.is-content-justification-right,
.wp-block-buttons.is-layout-flex.is-content-justification-right {
	justify-content: flex-end;
}
.wp-block-buttons > .wp-block-button { margin: 0; }
@media (max-width: 480px) {
	.wp-block-buttons { flex-direction: column; align-items: stretch; }
	.wp-block-buttons > .wp-block-button { width: 100%; text-align: center; }
}

/* Gravity Forms — neutralise the GF2.5+ default theme so option lists
   sit cleanly to the left of their checkboxes/radios, field labels
   align left, and nothing inherits any centered text-alignment from a
   surrounding pg-section that has centered headings (which is what was
   pushing the Digital Nomad calculator's options to the right of the
   form). Form title + progress strip can stay centered if the form
   has them turned on. */
.gform_wrapper {
	text-align: left;
}
.gform_wrapper .gfield_label,
.gform_wrapper .gfield_required {
	text-align: left;
	font-weight: 700;
}
.gform_wrapper .gfield_description {
	text-align: left;
}
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 6px 0;
	margin: 0;
	text-align: left;
}
.gform_wrapper .gfield_checkbox .gchoice input,
.gform_wrapper .gfield_radio .gchoice input {
	flex: 0 0 auto;
	margin: 0 4px 0 0;
}
.gform_wrapper .gfield_checkbox .gchoice label,
.gform_wrapper .gfield_radio .gchoice label {
	flex: 1 1 auto;
	text-align: left;
	margin: 0;
	padding-left: 2px;
	font-weight: 400;
	cursor: pointer;
}
/* GF puts a list-style disc on the choices in some themes — kill it
   so it doesn't double up with the visual checkbox/radio. */
.gform_wrapper .gfield_checkbox .gchoice::marker,
.gform_wrapper .gfield_radio .gchoice::marker {
	content: "";
	color: transparent;
}
/* Buttons row — keep Previous / Next side by side & left-aligned. */
.gform_wrapper .gform_page_footer,
.gform_wrapper .gform_footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-start;
	text-align: left;
}

/* 13. BLOCK MARKUP COMPATIBILITY ---------------------------- */
/* This WordPress install renders group blocks with a legacy
   .wp-block-group__inner-container wrapper around their children.
   Inside a .pg-* component that wrapper sits between a grid/flex
   container and its items, collapsing the layout to a single column.
   display:contents removes the wrapper from the box tree, so the real
   children become the grid/flex items of the .pg-* container.
   If a group ever renders without the wrapper, this matches nothing —
   so the rule is safe whichever way blocks are saved. */
.pg-hero .wp-block-group__inner-container,
.pg-section .wp-block-group__inner-container,
.pg-facts .wp-block-group__inner-container,
.pg-timeline .wp-block-group__inner-container,
.pg-factbox .wp-block-group__inner-container,
.pg-callout .wp-block-group__inner-container,
.pg-author .wp-block-group__inner-container,
.pg-signup .wp-block-group__inner-container {
	display: contents;
}