:root {
	--cpp-font-scale: 1;
	--cpp-green: #00833E;
	--cpp-green-dark: #016530;
	--cpp-green-light: #E8F3EB;
	--cpp-blue: #0077B3;
	/* Text links in blue: the brand blue is 4.37:1 on the grey page (#F2F2F2), under AA 4.5:1
	   (AccessMonitor, 2026-10-09, 8 pages). This shade is 5.05:1 there and 5.65:1 on white. */
	--cpp-link-blue: #006DA3;
	--cpp-red: #BD0B2E;
	--cpp-gold: #FFCD00;
	--cpp-text: #333333;
	--cpp-text-muted: #4E4E50;
	--cpp-grey: #808080;
	--cpp-surface: #F2F2F2;
	--cpp-border: #E2E2E2;
}

html { font-size: calc(100% * var(--cpp-font-scale)); }
/* Match the source's text rendering: it uses subpixel-antialiased, which renders
   noticeably heavier than the browser default `antialiased` on macOS. Forcing
   antialiased here made both the menu and body text look too thin vs the source. */
body { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; }

/* ---------- Accessibility / skip-link / sr-only ---------- */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: var(--cpp-gold); clip: auto !important; clip-path: none;
	color: var(--cpp-text); display: block; font-size: 1rem; font-weight: 700;
	height: auto; left: 1rem; line-height: normal; padding: 0.75rem 1rem;
	text-decoration: none; top: 1rem; width: auto; z-index: 100000;
}
/* F-16: the skip link's target. `<main>` gets tabindex="-1" server-side (inc/accessibility.php) so
   focus really lands in the content; that focus must not paint a ring around the whole page, and
   the sticky header must not cover the top of what was skipped to. */
#cpp-main:focus { outline: none; }
#cpp-main { scroll-margin-top: 80px; }

/* Focus ring. The gold alone was 1.50:1 on white and 1.34:1 on the grey top bar — WCAG 1.4.11 asks
   for 3:1 against whatever is adjacent, and `outline-offset` puts the ring OUTSIDE the element, so
   the adjacent colour is nearly always the page background. Two tones fix it everywhere: a near
   black ring (17.8:1 on white, 5.0:1 on the green navbar) with the gold kept as a halo, so the
   brand cue survives and the indicator is visible on white, grey, green and photography alike. */
:focus-visible {
	outline: 3px solid #111418;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--cpp-gold);
}

/* ---------- Editorial content: nothing in a body may exceed its column ----------
   Measured on /blog/2026/09/15/margarida-lapa-…/ : a bare <img> in a migrated article body rendered
   at its natural 1638px inside a 1170px column and pushed the document to 1788px — a horizontal
   scrollbar on the whole page, and reflow at 320px broken with it (WCAG 1.4.10).

   Migrated bodies carry plain `<img src>` tags: no width attribute, no class, no <figure>. Nothing
   in the theme constrained them, so each one had to be fixed by hand in the content — which is
   exactly what must not be necessary: editors paste images in the WYSIWYG and should never have to
   think about pixel widths. The same applies to embeds pasted as raw <iframe>.

   `height: auto` is required alongside `max-width`: WordPress prints width/height attributes, and
   without it a constrained image keeps its original height and distorts. */
.entry-content img,
.wp-block-post-content img,
.entry-content iframe,
.wp-block-post-content iframe,
.entry-content video,
.wp-block-post-content video,
.entry-content embed,
.wp-block-post-content embed,
.entry-content object,
.wp-block-post-content object {
	max-width: 100%;
	height: auto;
}
/* A <figure> or wrapper carrying an inline width from the old CMS must not push past it either. */
.entry-content figure,
.wp-block-post-content figure { max-width: 100%; }

/* A wide table scrolls inside its own box, never by dragging the page sideways. The wrapper is
   added server-side (inc/accessibility.php) because migrated bodies contain bare <table> markup;
   it is focusable so it can also be scrolled with the arrow keys (WCAG 2.1.1). */
.cpp-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1rem;
}
.cpp-table-scroll > table { margin-bottom: 0; }

/* Last line of defence. Word-pasted bodies contain absolutely-positioned leftovers — on
   /organizacao-da-missao/ an empty `<span style="position:absolute;left:1503px">` stretched the
   document to 2067px in a 1440px window, and to 1932px on a phone. Nothing visible is lost by
   clipping: the elements are empty boxes from the exporter. `clip` rather than `hidden` so the
   content does not become a scroll container (which would break sticky positioning inside it);
   `hidden` stays first as the fallback for browsers without `clip`. */
.entry-content,
.wp-block-post-content {
	overflow-x: hidden;
	overflow-x: clip;
}

/* ---------- Cookie consent bar ---------- */
.cpp-cookie-bar { background: var(--cpp-surface); border-bottom: 1px solid var(--cpp-border); font-size: 0.8125rem; color: var(--cpp-text-muted); }
.cpp-cookie-inner { max-width: 1280px; margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; }
.cpp-cookie-inner p { margin: 0; max-width: 70ch; line-height: 1.5; }
/* F-07: #00833E on the #F2F2F2 bar is 4.35:1 — under AA. The darker brand green is 6.5:1 there
   and 7.2:1 on white, so every green-on-tint text uses it. White-on-green in the navbar is
   untouched (it is 16px/700 and passes). */
.cpp-cookie-inner a { color: var(--cpp-green-dark); }
.cpp-cookie-accept { flex: 0 0 auto; background: var(--cpp-blue); color: #fff; border: 0; border-radius: 3px; padding: 0.55rem 1rem; font: inherit; cursor: pointer; }
.cpp-cookie-accept:hover { background: #005f8f; }
@media (max-width: 43.75em) { .cpp-cookie-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; } }

/* ===================================================================
   HEADER — faithful reproduction of the Liferay source (two-row design)
   Top white bar (overlapping logo + tools) over a green #016530 nav bar.
   =================================================================== */

/* ---------- Top bar (light grey, matches source #header-topbar #f2f2f2) ---------- */
/* topbar holds the overlapping logo, which sits across the grey bar AND the green
   nav bar below it. It must stack above .cpp-site-header (z-index:5, raised so the
   banner can tuck behind the green bar) — otherwise the green bar covers the
   logo's lower half. */
.cpp-topbar { background: #f2f2f2; position: relative; z-index: 6; }
.cpp-topbar-inner {
	position: relative;
	box-sizing: border-box;
	max-width: 1170px;
	margin: 0 auto;
	padding: 0;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* Overlapping logo box: white panel that spans the top bar and dips into
   the green nav bar below (height 121 > top bar 60). */
.cpp-logo-box {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	width: 202px;
	height: 121px;
	background: #fff;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
/* Source behaviour: the big overlapping logo disappears INSTANTLY the moment the
   header goes fixed (no fade) — only the small white logo inside the green bar
   fades in (.cpp-navbar-logo, .35s). Without this, the big logo lingers and slides
   over the fixed green bar during the scroll. Keyed off body.cpp-menu-fixed, set by
   bindStickyHeader at the same instant it adds .cpp-navbar-fixed. */
body.cpp-menu-fixed .cpp-logo-box { opacity: 0; pointer-events: none; }
/* Logo graphic: source places a 195×110 box at top:10px inside the 121px white
   box, with the logo centred — so its optical centre straddles the seam between
   the white bar and the green nav bar below (NOT pinned to the top). */
/* Logo is a core/image (figure.cpp-logo-link > a > img) so it renders natively in
   the editor. Reset core figure margins; keep the source 195×110 box geometry. */
/* specificity bump: must beat the `.cpp-topbar .wp-block-image { margin:0 }` reset below */
.cpp-topbar .cpp-logo-box .cpp-logo-link { display: block; width: 195px; height: 110px; margin: 10px auto 0; }
.cpp-logo-box .cpp-logo-link a { display: block; width: 195px; height: 110px; }
.cpp-logo-box img { display: block; width: 195px; height: auto; margin: 0; position: relative; top: 50%; transform: translateY(-50%); }

/* Reset core/image default figure margins for any image used in the header chrome. */
.cpp-topbar .wp-block-image, .cpp-site-header .wp-block-image { margin: 0; }

.cpp-topbar-tools { display: flex; align-items: center; justify-content: flex-end; gap: 0; }

/* Accessibility mark in the header → /acessibilidade/.
   Two changes of mind sit behind this one rule, both worth remembering. It started as this link;
   on 2026-09-18 it became a disclosure with the theme's own text-size and contrast buttons (F-03);
   on 2026-09-22 it became the trigger for UserWay's console, which hid UserWay's floating button;
   and it is now back to being a link to the DECLARATION, with UserWay visible on its own button
   where readers expect it. The glyph changed with the job: the universal accessibility mark rather
   than the source's contrast square, because what it opens is the declaration. */
.cpp-access { display: flex; align-items: center; position: relative; }
.cpp-access a {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0;
	background: url(../images/icon_accessibility.svg) center/76% no-repeat;
}
.cpp-access a:focus-visible { outline: 3px solid var(--cpp-green); outline-offset: 2px; }
.cpp-access img { display: none; }

/* search — source: input ~216px + 44px green submit, with breathing room either
   side. Placeholder is green in the source, not grey. */
/* Native core/search: form.cpp-search.wp-block-search > .wp-block-search__inside-wrapper
   > input.wp-block-search__input + button.wp-block-search__button. Button text is kept
   for a11y but hidden visually; the green search-icon button is painted via background. */
.cpp-search { display: flex; align-items: center; margin: 0 76px 0 45px; }
.cpp-search.wp-block-search { margin: 0 76px 0 45px; padding: 0; }
.cpp-search .wp-block-search__inside-wrapper { display: flex; align-items: center; gap: 0; border: 0; padding: 0; }
.cpp-search .wp-block-search__input,
.cpp-search input[type="search"] {
	height: 44px; width: 260px; padding: 0 14px; margin: 0;
	/* F-09: #e2e2e2 on the #f2f2f2 bar is 1.16:1 — the field did not read as a field at all. */
	border: 1px solid #767676; border-right: 0; border-radius: 0;
	font-family: 'Roboto', sans-serif; font-size: 0.875rem; color: #00833e; background: #fff;
	-webkit-appearance: none; appearance: none;
}
.cpp-search .wp-block-search__input::placeholder,
.cpp-search input[type="search"]::placeholder { color: #00833e; font-weight: 400; letter-spacing: .02em; opacity: 1; }
.cpp-search .wp-block-search__button,
.cpp-search-submit {
	width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 0;
	border: 0; cursor: pointer; font-size: 0; color: transparent;
	background: #00833e url(../images/button_search.svg) center/22px 22px no-repeat;
}
.cpp-search .wp-block-search__button svg { display: none; }
.cpp-search .wp-block-search__button:hover,
.cpp-search-submit:hover { background-color: #016530; }

/* language switcher (flag + PT, dropdown) — source: ~85px, arrow at 26px.
   specificity bump: beat core's `.is-layout-flex > * { margin:0 }` child reset. */
.cpp-topbar-tools .cpp-lang { position: relative; margin: 0 35px 0 0; }
.cpp-lang-toggle {
	display: flex; align-items: center; gap: 8px; height: 44px;
	background: none; border: 0; cursor: pointer;
	color: var(--cpp-green-dark); font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase;
}
/* With no second language there is nothing to open, so the control is a plain label: no caret,
   no pointer, no hover affordance. */
.cpp-lang-toggle--single { cursor: default; }

.cpp-lang-flag { display: block; width: 26px; height: 18px; background: url(../images/flag_pt.svg) center/cover no-repeat; }
.cpp-lang-caret { display: block; width: 14px; height: 9px; background: url(../images/arrow_lang.svg) center/contain no-repeat; transition: transform .15s ease; }
.cpp-lang.is-open .cpp-lang-caret { transform: rotate(180deg); }
.cpp-lang-menu {
	position: absolute; right: 0; top: 100%; z-index: 40; min-width: 90px;
	background: #fff; box-shadow: 0 6px 12px rgba(0,0,0,.176);
}
.cpp-lang-menu a { display: block; padding: 10px 16px; color: #00833e; font-weight: 600; text-decoration: none; }
.cpp-lang-menu a:hover { background: #efefef; }

/* social — exact source model: 45×60 blocks, coloured (green) SVG glyph at 28px;
   on hover the block fills with the brand colour and the glyph swaps to a white
   variant. Using full-rect background-images (NOT alpha masks) so multi-fill SVGs
   like YouTube render correctly (the mask approach showed YouTube as a solid box). */
/* cpp/social-links (inc/social.php): nav.cpp-social > ul > li.cpp-social-item.cpp-social-{net} > a,
   the network named by visually hidden text. Facebook, Instagram, YouTube and LinkedIn in the bar;
   X and TikTok in a drop-down under the last button (li.cpp-social-more). */
.cpp-social { display: flex; align-items: stretch; margin: 0; padding: 0; align-self: stretch; }
.cpp-social__list, .cpp-social-more__menu { display: flex; list-style: none; margin: 0; padding: 0; }
.cpp-social .cpp-social-item, .cpp-social-more { display: flex; margin: 0; position: relative; }
.cpp-social-item a, .cpp-social-more__toggle {
	display: block; width: 45px; height: 60px; padding: 0; border: 0;
	background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: 28px;
	transition: background-color .15s ease; cursor: pointer;
}
.cpp-social-item a:focus-visible, .cpp-social-more__toggle:focus-visible { outline: 3px solid var(--cpp-green); outline-offset: -3px; }
.cpp-social-facebook a  { background-image: url(../images/icon_facebook.svg); }
.cpp-social-instagram a { background-image: url(../images/icon_instagram.svg); }
.cpp-social-twitter a   { background-image: url(../images/icon_x.svg); background-size: 22px; } /* X (ex-Twitter) */
.cpp-social-youtube a   { background-image: url(../images/icon_youtube.svg); }
.cpp-social-linkedin a  { background-image: url(../images/icon_linkedin.svg); background-size: 24px; }
.cpp-social-tiktok a    { background-image: url(../images/icon_tiktok.svg); background-size: 24px; }
.cpp-social-more__toggle { background-image: url(../images/icon_more.svg); background-size: 22px; }
.cpp-social-facebook a:hover  { background-color: #3b5998; background-image: url(../images/icon_facebook_white.svg); }
.cpp-social-instagram a:hover { background-color: #bc2a8d; background-image: url(../images/icon_instagram_white.svg); }
.cpp-social-twitter a:hover   { background-color: #000;    background-image: url(../images/icon_x_white.svg); }
.cpp-social-youtube a:hover   { background-color: #e31010; background-image: url(../images/icon_youtube_white.svg); }
.cpp-social-linkedin a:hover  { background-color: #0a66c2; background-image: url(../images/icon_linkedin_white.svg); }
.cpp-social-tiktok a:hover    { background-color: #000;    background-image: url(../images/icon_tiktok_white.svg); }
.cpp-social-more__toggle:hover,
.cpp-social-more__toggle[aria-expanded="true"] { background-color: var(--cpp-green); background-image: url(../images/icon_more_white.svg); }
/* The drop-down: a white column under the button, above the green nav bar. */
.cpp-social-more__menu {
	position: absolute; top: 100%; right: 0; z-index: 20; flex-direction: column;
	background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.cpp-social-more__menu[hidden] { display: none; }

/* The topbar/navbar containers are now core/group blocks; core injects a default
   blockGap. Force gap:0 where the source design packs items flush. (The 700px media
   query re-introduces gap:14px on the tools for touch spacing — kept below.) */
.cpp-topbar-tools, .cpp-social, .cpp-navbar-inner, .cpp-primary-nav-wrap { gap: 0; }

/* ---------- Green primary nav bar ---------- */
/* header stacks above the hero so the banner can tuck behind the green bar
   (source: the banner starts at the green bar's TOP and the opaque green strip
   paints over its top 62px). */
.cpp-site-header { margin: 0; position: relative; z-index: 5; }
/* Green lives on the centered inner container (source .container.menu-nav,
   x=55 w=1170) — leaving side margins; the navbar strip itself is transparent. */
/* transition:none so the relative→fixed switch is instant (no animated bump);
   source bar is 62px tall in BOTH states, so unifying the height also removes
   the 2px jump that used to happen when fixed-menu engaged. */
.cpp-navbar { background: transparent; position: relative; z-index: 2; transition: none; }
.cpp-navbar-inner {
	box-sizing: border-box; position: relative;
	background: #016530;
	max-width: 1170px; margin: 0 auto; padding: 0 15px 0 263px;
	min-height: 62px; display: flex; align-items: stretch; flex-wrap: wrap;
}
.cpp-primary-nav-wrap { display: flex; align-items: stretch; flex: 1; }
/* core flow layout (`.is-layout-flow > * + *`) would add a block gap to the nav when another child
   precedes it — the menu must always fill the 62px bar (source: text centred in the green bar). */
.cpp-primary-nav-wrap > * { margin-block-start: 0 !important; }

/* White logo inside the green bar — only visible once the bar is fixed (matches
   source .link-logo with logo-cpp-white.svg, 160x41 at x=60 y=10). It is always
   in the DOM but fades in (opacity) when the fixed class is added, reproducing
   the source's fade. visibility keeps it out of the a11y/hit layer when hidden. */
.cpp-navbar-logo {
	/* offset from the centered green inner box (its offset parent), not the
	   full-width navbar — so the logo stays 5px inside the green at any width,
	   matching source (.link-logo at green-left + 5px). */
	position: absolute; left: 5px; top: 10px;
	width: 160px; height: 41px; z-index: 3;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .35s ease;
}

/* ---------- Sticky / fixed green header (source: #header-bottombar.fixed-menu) ----------
   On scroll past the top white bar, the navbar fixes to the top of the viewport,
   stays there at any scroll depth, and reveals the white logo on the left. */
.cpp-navbar-fixed {
	position: fixed; top: 0; left: 0; right: 0;
	z-index: 1111;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.cpp-navbar-fixed .cpp-navbar-inner { min-height: 62px; padding-left: 263px; background: #016530; }
.cpp-navbar-fixed .cpp-navbar-logo {
	opacity: 1; visibility: visible; pointer-events: auto;
}
/* Always size the SVG (intrinsic 710×178): unsized, the hidden logo widened the
   mobile layout viewport to 725px on every page. */
.cpp-navbar-logo img { display: block; width: 100%; height: auto; }
.cpp-navbar-fixed .cpp-navbar-logo img {
	display: block; width: 160px; height: 41px;
}

/* Logged-in front end: WP's admin toolbar is itself position:fixed; top:0, so once
   the green nav bar goes fixed it would sit UNDER the admin bar (the reported
   "floats below the WP header" gap). WP clears the bar for in-flow content with
   html{margin-top} but that can't move a fixed element — so only the FIXED navbar
   needs an explicit top offset to clear it: 32px desktop, 46px below WP's own 782px
   breakpoint (where the bar is also fixed). The JS spacer already preserves the
   in-flow height, so nothing else is bumped. Anonymous visitors have no .admin-bar
   class, so the public site is untouched. */
body.admin-bar .cpp-navbar-fixed { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .cpp-navbar-fixed { top: 46px; }
}

/* WordPress navigation block (editable wp_navigation id 5) restyled to match */
.cpp-primary-nav.wp-block-navigation { width: 100%; align-items: stretch; font-size: 0.875rem; }
.cpp-primary-nav .wp-block-navigation__container { align-items: stretch; gap: 0 !important; flex-wrap: nowrap; }
/* The menu row is 13px NARROWER than its ten entries need (measured: 892px available, 905px of
   items), so it must not be allowed to wrap at the default text size — it would break to two lines
   and make every page 30px taller. It does have to wrap once the text is enlarged, or the row runs
   1967px wide in a 1440px window and the whole page scrolls sideways.
   A media query cannot decide this: `em` inside one is measured against the BROWSER's default font
   size and cannot see a root size set in CSS, which is what the A+ control changes. So the control
   marks the document and the rule keys off that. Readers who instead raise their browser's default
   font size are served by the em breakpoints: at 24px, a 1440px window is 60em and the header has
   already switched to its mobile layout. */
html[data-cpp-scale="up"] .cpp-primary-nav .wp-block-navigation__container { flex-wrap: wrap; }
.cpp-primary-nav .wp-block-navigation-item { align-items: stretch; }
.cpp-primary-nav .wp-block-navigation-item__content {
	color: #fff !important;
	font-family: 'Roboto', sans-serif; font-size: 0.875rem; font-weight: 600; text-transform: uppercase;
	/* asymmetric padding biases the text 2px lower so its midline sits 33px from
	   the bar top, matching source (source uses padding 10/13 on a block link
	   offset inside a 62px bar; flex-centering here reproduces the same midline). */
	padding: 15px 12px 11px; line-height: 20px; position: relative;
	display: flex; align-items: center; white-space: nowrap;
}

/* hide all caret icons (source has none) */
.cpp-primary-nav .wp-block-navigation__submenu-icon { display: none !important; }

/* animated white underline on top-level items — matches source: full link width,
   pinned to the bottom of the bar (bottom:0), growing left→right on hover by
   animating `right` from 100%→0 (width:0→full). `all .2s` gives the slide. */
.cpp-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
.cpp-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container ~ .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
	height: 5px; background: #fff; transition: right .2s ease 0s;
}
.cpp-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.cpp-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.cpp-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item.cpp-current > .wp-block-navigation-item__content::after {
	right: 0;
}

/* white dropdown panels */
.cpp-primary-nav .wp-block-navigation__submenu-container {
	background: #fff !important; width: 265px; min-width: 265px;
	border: 0 !important; border-radius: 0;
	box-shadow: 0 6px 12px rgba(0,0,0,.176); padding: 0; top: 100%;
}
.cpp-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #00833e !important;
	font-family: 'Roboto', sans-serif; font-size: 1.0625rem; font-weight: 400; text-transform: none;
	padding: 15px !important; line-height: 1.5; display: block;
}
.cpp-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none !important; }
.cpp-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.cpp-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: #efefef !important; color: #00833e !important;
}
/* Container entries (CPP, Jogos, Projetos, Atletas, Documentos, Media) are not links: the source
   gives them an empty href and they navigate nowhere. The cursor must therefore not promise a
   click, and the keyboard needs a way in — `is-kb-open` is set by bindNavContainers() on Enter or
   Space, and :focus-within keeps the panel open while tabbing through it. */
.cpp-primary-nav .wp-block-navigation-item__content:not([href]) { cursor: default; }
/* Any depth: the second-level parents (O Comité, Apoios, Jogos Paralímpicos, …) are containers too,
   so their flyouts need the same keyboard opening as the top-level ones. */
.cpp-primary-nav .wp-block-navigation-item.is-kb-open > .wp-block-navigation__submenu-container,
.cpp-primary-nav .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
	visibility: visible !important; opacity: 1 !important;
	/* `height` and `overflow` matter as much as the two above, and leaving them out is why this
	   panel was invisible to anyone using a keyboard: WordPress core collapses the submenu with
	   `height: 0; overflow: hidden` and restores it on `:hover` ONLY. Focus therefore produced a
	   menu that announced itself as expanded (aria-expanded="true") while drawing nothing — the
	   links stayed focusable but unpainted, and a click at their coordinates hit the hero slide
	   behind. Measured on 2026-09-18: focus → rendered height 0px, hover → 444px. */
	height: auto !important; overflow: visible !important;
}
/* …and Escape must really close it. WordPress core opens `.open-on-hover-click:focus-within` in its
   own stylesheet, so while focus stays on the button (where Escape leaves it) the panel would stay
   painted with `aria-expanded="false"` — the same mismatch as before, inverted. The closed state is
   therefore stated with the same weight. `visibility: hidden` also takes the submenu links back out
   of the tab order, which is what makes the closed state real rather than cosmetic. */
.cpp-primary-nav .wp-block-navigation-item.is-kb-closed:focus-within > .wp-block-navigation__submenu-container {
	visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important;
}
/* The underline should still answer keyboard focus, as it does to hover. */
.cpp-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item.is-kb-open > .wp-block-navigation-item__content::after,
.cpp-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after {
	right: 0;
}

/* nested (3rd level) flyout */
.cpp-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { top: 0; }

/* ---------- Mobile toggle / collapse ---------- */
.cpp-mobile-toggle { display: none; }
.cpp-mobile-close { display: none; } /* overlay close "X": only shown inside the open mobile overlay */
.cpp-mobile-toggle-icon { position: relative; display: block; width: 24px; height: 2px; background: #fff; }
.cpp-mobile-toggle-icon::before,
.cpp-mobile-toggle-icon::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: #fff; }
.cpp-mobile-toggle-icon::before { top: -7px; }
.cpp-mobile-toggle-icon::after  { top: 7px; }

@media (max-width: 61.25em) {
	.cpp-navbar-inner { padding-left: 15px; }
	.cpp-navbar-fixed .cpp-navbar-inner { padding-left: 15px; }
	.cpp-navbar-logo { left: 15px; width: 140px; height: auto; }
	.cpp-navbar-fixed .cpp-navbar-logo img { width: 140px; height: auto; }
	.cpp-mobile-toggle {
		display: flex; align-items: center; gap: 10px; margin-left: auto;
		background: none; border: 0; cursor: pointer; padding: 18px 0;
		color: #fff; font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 0.875rem; text-transform: uppercase;
	}
	.cpp-primary-nav-wrap { display: none; flex-basis: 100%; width: 100%; }
	.cpp-primary-nav-wrap.is-open { display: block; }
	.cpp-primary-nav.wp-block-navigation .wp-block-navigation__container { flex-direction: column; align-items: stretch; flex-wrap: wrap; }
	.cpp-primary-nav .wp-block-navigation-item__content { padding: 14px 4px; }
	.cpp-primary-nav .wp-block-navigation-item__content::after { display: none !important; }
	.cpp-primary-nav .wp-block-navigation__submenu-container {
		position: static !important; width: 100% !important; min-width: 0; box-shadow: none;
		opacity: 1 !important; visibility: visible !important; padding-left: 1rem;
	}
	.cpp-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #eafff0 !important; font-size: 0.9375rem; padding: 12px 4px; }
	.cpp-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
}

/* ---------- Tablet header (700–980px) ----------
   The mobile header rules start at 43.75em and the mobile MENU starts at 61.25em, which left a band
   in between where the desktop topbar was laid out in a viewport too narrow for it: the logo box is
   202px wide, absolutely positioned at the left with z-index 5, and the tools (44px icon + 304px
   search + language + 180px of social) need ~613px more than the row has. They wrapped underneath
   the logo, where the logo's own link covered them.

   Measured at 768px: the accessibility button sat at x=30 UNDER the white logo box and
   `elementFromPoint` over it returned the logo's anchor — the control could not be clicked at all
   between 768px and 900px. That was true before this change too, but it mattered less while the
   UserWay floating icon was also on the page; now this button is the only way into the console.

   So the band gets the treatment the source gives narrow screens: social icons out, search allowed
   to shrink, and the row starting clear of the logo. */
@media (max-width: 61.25em) and (min-width: 43.8125em) {
	.cpp-topbar-inner { padding-left: 215px; padding-right: 15px; }
	.cpp-topbar-tools { gap: 12px; }
	.cpp-topbar-tools .cpp-social { display: none !important; }
	.cpp-topbar-tools .cpp-lang { margin: 0 8px 0 0; }
	.cpp-search.wp-block-search { margin: 0; flex: 0 1 auto; min-width: 0; }
	.cpp-search .wp-block-search__input,
	.cpp-search input[type="search"] { width: 100%; min-width: 0; }
}

/* ---------- Mobile header (source at 390px: white 60px bar with the logo box 120×120 at the
   left edge overlapping into the green bar, accessibility icon + PT switch at the right,
   search and social icons hidden; green 60px bar with a 31px hamburger at the right, no label;
   the menu opens as a full-screen rgba(0,0,0,.8) overlay with a white "X" (top-right), centred
   14px white items, parents collapsed with a chevron). ---------- */
@media (max-width: 43.75em) {
	.cpp-topbar-inner { padding-right: 15px; }
	.cpp-topbar-tools { gap: 12px; }
	.cpp-topbar-tools .cpp-search, .cpp-topbar-tools .cpp-social { display: none !important; }
	.cpp-topbar-tools .cpp-lang { margin: 0; }
	.cpp-logo-box { left: 0; width: 120px; height: 120px; }
	/* Source (≤768px) swaps the horizontal logo for logo-cpp-vertical.svg, 115×110 at top:5px.
	   The core/image <img> stays for the link + alt text; the vertical logo is painted on the <a>. */
	.cpp-topbar .cpp-logo-box .cpp-logo-link { width: 115px; height: 110px; margin: 5px auto 0; }
	.cpp-logo-box .cpp-logo-link a { width: 115px; height: 110px; background: url(../images/logo-cpp-vertical.svg) center center / auto 100% no-repeat; }
	.cpp-logo-box img { width: 115px; height: 110px; opacity: 0; top: 0; transform: none; }
	.cpp-navbar-inner { padding-left: 130px; }
	.cpp-navbar-fixed .cpp-navbar-inner { padding-left: 15px; }
	/* wide tables inside migrated articles scroll horizontally instead of breaking the page */
	.cpp-interior-prose table { display: block; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 61.25em) {
	/* specificity: core resets margins on flex-layout children (`body .is-layout-flex > *`) */
	.cpp-navbar-inner > .cpp-mobile-toggle { margin: 0 15px 0 auto; padding: 0; width: 31px; min-height: 60px; justify-content: center; align-self: center; }
	.cpp-mobile-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.cpp-mobile-toggle-icon, .cpp-mobile-toggle-icon::before, .cpp-mobile-toggle-icon::after { width: 31px; height: 3px; }
	.cpp-mobile-toggle-icon::before { top: -9px; } .cpp-mobile-toggle-icon::after { top: 9px; }
	.cpp-mobile-close { display: none; }
	.cpp-primary-nav-wrap.is-open { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3000; background: rgba(0,0,0,.8); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 60px 0 40px; margin: 0; width: auto; }
	.cpp-primary-nav-wrap.is-open .cpp-mobile-close { display: block; position: fixed; top: 0; right: 0; z-index: 3001; width: 60px; height: 64px; padding: 20px; background: none; border: 0; color: #fff; font: 400 1.5625rem/1.5rem 'Roboto', sans-serif; cursor: pointer; }
	body.cpp-menu-open { overflow: hidden; }
	body.cpp-menu-open .cpp-site-header { z-index: 3000; }
	body.cpp-menu-open .cpp-topbar { z-index: 1; }
	/* one full-width, centred row per item; core's submenu chevron button is replaced by ::before */
	.cpp-primary-nav-wrap.is-open .cpp-primary-nav, .cpp-primary-nav-wrap.is-open .wp-block-navigation__container { width: 100%; flex-direction: column; align-items: stretch; margin: 0; padding: 0; }
	.cpp-primary-nav-wrap.is-open .wp-block-navigation-item { width: 100%; display: flex; flex-wrap: wrap; }
	.cpp-primary-nav-wrap.is-open .wp-block-navigation-item > .wp-block-navigation-item__content { display: flex; flex: 1 1 100%; width: 100%; box-sizing: border-box; }
	.cpp-primary-nav-wrap.is-open .wp-block-navigation__submenu-icon { display: none !important; }
	.cpp-primary-nav-wrap.is-open .cpp-primary-nav .wp-block-navigation-item__content { justify-content: center; text-align: center; font-size: 0.875rem; line-height: 20px; font-weight: 400; text-transform: none; padding: 10px 15px; white-space: normal; color: #fff !important; }
	.cpp-primary-nav-wrap.is-open .cpp-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { background: #efefef !important; color: #333 !important; }
	/* parents: chevron at the right, submenu collapsed until tapped */
	.cpp-primary-nav-wrap.is-open .wp-block-navigation-item.has-child { position: relative; flex-wrap: wrap; }
	.cpp-primary-nav-wrap.is-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { flex: 1 1 100%; }
	.cpp-primary-nav-wrap.is-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::before { content: ""; position: absolute; right: 22px; top: 12px; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .15s; }
	.cpp-primary-nav-wrap.is-open .wp-block-navigation-item.has-child.is-expanded > .wp-block-navigation-item__content::before { transform: rotate(225deg); top: 17px; }
	.cpp-primary-nav-wrap.is-open .wp-block-navigation__submenu-container { display: none !important; position: static !important; width: 100% !important; min-width: 0; box-shadow: none; opacity: 1 !important; visibility: visible !important; padding: 0; background: transparent !important; }
	.cpp-primary-nav-wrap.is-open .wp-block-navigation-item.is-expanded > .wp-block-navigation__submenu-container { display: block !important; }
	.cpp-primary-nav-wrap.is-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #3abdff !important; font-size: 0.9375rem; padding: 10px 15px; }
	.cpp-primary-nav-wrap.is-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #bfe7ff !important; font-size: 0.875rem; }
}

/* ---------- Layout helpers ---------- */
.wp-block-group.alignfull, .wp-block-cover.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }

/* ---------- Section headings (home: centred green) ----------
   Source (Notícias/Vídeos/Agenda/Destaques): Roboto 25px/700, green #00833e,
   centered, uppercase, NO underline. Scoped to the homepage section wrappers so
   interior pages keep their own heading styling. */
.cpp-section-title {
	color: var(--cpp-green);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
	position: relative;
	padding-bottom: 0.6rem;
	margin-bottom: 1.5rem;
}
.cpp-noticias .cpp-section-title,
.cpp-videos .cpp-section-title,
.cpp-agenda .cpp-section-title,
.cpp-destaques .cpp-section-title {
	font-family: 'Roboto', sans-serif;
	font-size: 1.5625rem;
	line-height: 1.2;
	font-weight: 700;
	color: var(--cpp-green);
	text-align: center;
	letter-spacing: normal;
	padding-bottom: 0;
}
/* Suppress the red underline on the homepage section headings */
.cpp-noticias .cpp-section-title::after,
.cpp-videos .cpp-section-title::after,
.cpp-agenda .cpp-section-title::after,
.cpp-destaques .cpp-section-title::after {
	display: none;
}
.cpp-section-title::after {
	content: ""; display: block; width: 64px; height: 3px;
	background: var(--cpp-red); border-radius: 2px;
	position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
}

/* Page titles (interior pages): red, left aligned */
.cpp-page-title { color: var(--cpp-red); text-transform: none; }

/* ---------- News cards (grid variant) ----------
   Source: no border/radius, no hover lift. */
/* Grid variant keeps its per-column white panel. The CAROUSEL card must NOT carry the
   white on its padded outer box, or adjacent cards' backgrounds merge into one block —
   the white lives on the inner .cpp-news-img/.cpp-news-body only (see below), and the
   card's horizontal padding shows the grey page between panels (source gap ~65px). */
.cpp-news-grid .wp-block-column {
	background: #fff;
	border: 0;
	border-radius: 0;
	overflow: hidden;
}
.cpp-news-card {
	border: 0;
	border-radius: 0;
}
.cpp-news-card .cpp-news-date { color: var(--cpp-text); font-size: 0.875rem; }
.cpp-news-card img { width: 100%; height: 180px; object-fit: cover; display: block; }

/* outline buttons (VER MAIS) */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid var(--cpp-grey) !important;
	color: var(--cpp-text-muted) !important;
	background: transparent !important;
	border-radius: 3px;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--cpp-green) !important; color: #fff !important; border-color: var(--cpp-green) !important;
}

/* ---------- Newsletter strip ---------- */
.cpp-newsletter-strip { background: var(--cpp-surface); text-align: center; }

/* ---------- Modalidades / sport icon grid ---------- */
.cpp-modalidades-grid .wp-block-column { text-align: center; }

/* ---------- Sponsors ----------
   Source: logos full color (no grayscale, no hover), tier headings left-aligned,
   container spans ~1170 (vs the 780 contentSize cap). */
.cpp-sponsors { max-width: 1170px; width: 100%; }
.cpp-sponsors h3 { color: var(--cpp-green); text-transform: uppercase; letter-spacing: normal; text-align: left; }

/* ---------- Generic carousel ---------- */
.cpp-carousel { position: relative; }
.cpp-carousel-viewport { overflow: hidden; }
.cpp-carousel-track { display: flex; transition: transform 0.45s ease; will-change: transform; }
.cpp-carousel-track > .cpp-slide { flex: 0 0 100%; max-width: 100%; }
.cpp-carousel-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 44px; height: 44px; border: 0; border-radius: 50%;
	/* F-09: white on rgba(0,0,0,.3) over a bright photograph measured 2.11:1; 1.4.11 asks 3:1 for
	   a control. At .6 the same white is 5.3:1 over any photograph. */
	background: rgba(0,0,0,0.6); color: #fff; font-size: 1.7rem; line-height: 1;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: background 0.15s ease;
}
.cpp-carousel-arrow:hover { background: rgba(0,131,62,0.85); }
.cpp-carousel-prev { left: 0.5rem; }
.cpp-carousel-next { right: 0.5rem; }
/* Pause control (WCAG 2.2.2). Bottom-right of the banner, away from the arrows so it is not hit by
   accident, and on the same dark disc so it reads as part of the carousel's own controls. The glyph
   is CSS because the button's accessible name comes from aria-label, which the script swaps. */
.cpp-carousel-pause {
	/* Top-right at every width: the dots sit at the bottom of the same box (they overlapped it at
	   1440px) and the arrows are vertically centred, so this corner is the only one that is free.
	   z-index above the arrows, because the slide anchors paint over anything lower. */
	position: absolute; right: 0.5rem; top: 0.5rem; z-index: 5;
	width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer;   /* F-09, as the arrows */
	display: flex; align-items: center; justify-content: center;
	font: 1rem/1 'Roboto', sans-serif; transition: background .15s ease;
}
.cpp-carousel-pause:hover { background: rgba(0, 131, 62, .85); }
.cpp-carousel-pause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cpp-carousel-pause span::before { content: "\275A\275A"; letter-spacing: 1px; }          /* ❚❚ paused? no: running */
.cpp-carousel-pause[aria-pressed="true"] span::before { content: "\25B6"; }                /* ▶ resume */
.cpp-carousel-pause[hidden] { display: none !important; }
@media (max-width: 48.8125em) {
	/* The banner is shorter on a phone and the dots sit inside the same box, so bottom-right lands
	   on top of them (measured: overlapping). Top-right is clear of both the dots and the arrows,
	   which are vertically centred. */
	.cpp-carousel-pause { width: 40px; height: 40px; right: 0.35rem; top: 0.35rem; }
}

.cpp-carousel-dots { display: flex; gap: 0.4rem; justify-content: center; margin-top: 1.25rem; }
.cpp-carousel-dot { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: #cfcfd0; cursor: pointer; }
.cpp-carousel-dot[aria-current="true"] { background: var(--cpp-green); }

/* ---------- Section content width ----------
   Source content carousels + sponsor grid span the ~1170 wide frame, but WP's
   constrained layout caps direct children at contentSize (780px). Lift the
   carousels and sponsors to the wide 1170 frame (mirrors the .cpp-intro fix). */
.cpp-noticias > .cpp-carousel,
.cpp-videos > .cpp-carousel,
.cpp-destaques > .cpp-carousel {
	max-width: 1170px; width: 100%;
}
.cpp-noticias > .cpp-section-title,
.cpp-videos > .cpp-section-title,
.cpp-destaques > .cpp-section-title { max-width: 1170px; }

/* ---------- Content carousels (news / videos / destaques) ----------
   Source treatment: square green dots ~44px (lower-opacity idle, solid active);
   thin transparent chevron arrows sitting at the dot row OUTSIDE the cards
   (not dark circles overlapping the images). Hero carousel keeps its own style. */
.cpp-news-carousel .cpp-carousel-arrow,
.cpp-videos-carousel .cpp-carousel-arrow,
.cpp-destaques-carousel .cpp-carousel-arrow {
	width: 44px; height: 44px; border-radius: 0;
	background: transparent; color: var(--cpp-green); font-size: 2.4rem; line-height: 1;
	top: auto; bottom: 0; transform: none; z-index: 3;
}
.cpp-news-carousel .cpp-carousel-arrow:hover,
.cpp-videos-carousel .cpp-carousel-arrow:hover,
.cpp-destaques-carousel .cpp-carousel-arrow:hover {
	background: transparent; color: var(--cpp-green-dark);
}
.cpp-news-carousel .cpp-carousel-prev,
.cpp-videos-carousel .cpp-carousel-prev,
.cpp-destaques-carousel .cpp-carousel-prev { left: -8px; }
.cpp-news-carousel .cpp-carousel-next,
.cpp-videos-carousel .cpp-carousel-next,
.cpp-destaques-carousel .cpp-carousel-next { right: -8px; }
.cpp-news-carousel .cpp-carousel-dot,
.cpp-videos-carousel .cpp-carousel-dot,
.cpp-destaques-carousel .cpp-carousel-dot {
	width: 44px; height: 44px; border-radius: 0; background: var(--cpp-green); opacity: 0.4;
}
.cpp-news-carousel .cpp-carousel-dot[aria-current="true"],
.cpp-videos-carousel .cpp-carousel-dot[aria-current="true"],
.cpp-destaques-carousel .cpp-carousel-dot[aria-current="true"] {
	background: var(--cpp-green); opacity: 1;
}
/* Source videos carousel has no dots. */
.cpp-videos-carousel .cpp-carousel-dots { display: none; }

/* The hero banner tucks behind the green bar: it starts at the green bar's TOP,
   so we pull it up by the bar height (62px). The header (z-index:5) paints its
   opaque green strip over the banner's top 62px — exactly like source, where the
   banner-section is 500px tall measured from the green bar top (438px visible
   below it). #cpp-main's default top margin is removed so the pull-up is exact. */
#cpp-main { margin-top: 0 !important; }
/* !important needed: WP constrained layout forces margin-block-start:0 on the
   first child. -62px pulls the banner up behind the green bar. */
#cpp-main > .cpp-hero-wrap { margin-top: -62px !important; }

/* ---------- Hero carousel (center mode: 1170px slide centered, neighbors peek) ----------
   Matches source slick centerMode — the viewport is full-width and clips, the
   track holds fixed-width slides, JS centers the active one so prev/next peek on
   the sides. */
.cpp-hero-wrap { position: relative; }
.cpp-hero-carousel { overflow: hidden; }
.cpp-hero-carousel .cpp-carousel-viewport { overflow: visible; }
.cpp-hero-carousel .cpp-carousel-track > .cpp-slide { flex: 0 0 auto; }
.cpp-hero-carousel .cpp-hero-slide {
	display: block;
	/* 500px = source banner-section height (measured from the green bar top);
	   the top 62px is hidden behind the green bar, leaving 438px visible. */
	min-height: 500px; background-size: cover; background-position: center;
	text-decoration: none; position: relative;
}
/* Caption: green rectangle anchored to the left, source positions it at
   top:202px (from the slide top, which starts behind the green bar). Roboto
   35px/35px, weight 400, white on rgba(0,131,62,.9), 20px padding, no radius. */
.cpp-hero-caption {
	position: absolute; z-index: 1; top: 202px; left: 0; max-width: 40%;
	background: rgba(0,131,62,0.9); color: #fff; padding: 20px; border-radius: 0;
	text-align: left;
}
.cpp-hero-caption h2 {
	margin: 0; font-family: 'Roboto', sans-serif; font-size: 2.1875rem;
	line-height: 35px; font-weight: 400; text-transform: none; color: #fff;
}
.cpp-hero-carousel .cpp-carousel-dots { position: absolute; bottom: 1rem; left: 0; right: 0; margin: 0; }
.cpp-hero-carousel .cpp-carousel-dot { background: rgba(255,255,255,.6); }
.cpp-hero-carousel .cpp-carousel-dot[aria-current="true"] { background: #fff; }
@media (max-width: 48.8125em) {
	.cpp-hero-carousel .cpp-hero-slide { min-height: 300px; }
	.cpp-hero-caption { top: auto; bottom: 20px; max-width: 70%; }
	.cpp-hero-caption h2 { font-size: 1.375rem; line-height: 24px; }
}

/* ---------- Intro band (source: grey #efefef, 30px top/bottom padding) ----------
   Heading Roboto 31.5px/40px/700 #4c4c50; paragraph Roboto 16px/24px #333. */
.cpp-intro { background: #efefef !important; }
/* source intro content spans the full 1170 frame (paragraph fits on one line);
   the constrained layout otherwise caps it at contentSize (780px) and wraps. */
.cpp-intro > .cpp-intro-title,
.cpp-intro > .cpp-intro-text { max-width: 1170px; }
.cpp-intro .cpp-intro-title {
	font-size: 1.96875rem; line-height: 40px;
	font-weight: 700; color: #4c4c50; margin: 10px 0; text-transform: none;
}
.cpp-intro .cpp-intro-text {
	font-size: 1rem; line-height: 24px;
	font-weight: 400; color: #333; margin: 0 0 10px;
}

/* ---------- Newsletter strip ----------
   Source band is 140px tall (inner ~100px band + 20px vertical padding), white bg,
   content vertically centred. Heading Roboto 35px/35px/400 green, text-transform
   none. Link green, no underline, no hover change. */
.cpp-newsletter-strip {
	background: #fff; gap: 1rem;
	min-height: 140px;
	box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	padding-top: 20px; padding-bottom: 20px;
}
.cpp-newsletter-strip h2 {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 2.1875rem;
	line-height: 35px;
	font-weight: 400;
	color: var(--cpp-green);
	text-transform: none;
}
.cpp-newsletter-strip h2 a { color: var(--cpp-green); text-decoration: none; }
.cpp-newsletter-strip h2 a:hover { text-decoration: none; opacity: 1; }

/* ---------- News cards (carousel) ----------
   Source cards: no border, no radius, image flush; no hover lift/zoom.
   Title Roboto 17/700/#4c4c50/lh 25; date 14px #333; button green pill. */
/* ~32px gutter each side → ~64px of grey page shows between cards (source gap ~65px),
   so each white panel reads as a separate card instead of one merged block. */
.cpp-news-carousel .cpp-news-card { padding: 0 2rem; box-sizing: border-box; }
.cpp-news-card { display: flex; flex-direction: column; }
.cpp-news-card > .cpp-news-img,
.cpp-news-card .cpp-news-body { background: #fff; }
.cpp-news-card .cpp-news-img { display: block; border: 0; border-radius: 0; overflow: hidden; }
.cpp-news-card .cpp-news-img img { width: 100%; height: 220px; object-fit: cover; display: block; }
.cpp-news-body { border: 0; border-radius: 0; padding: 15px; display: flex; flex-direction: column; flex: 1; }
.cpp-news-body .cpp-news-date { color: var(--cpp-text); font-size: 0.875rem; margin: 0 0 0.4rem; }
.cpp-news-body h3 {
	margin: 0 0 0.9rem; font-family: 'Roboto', sans-serif;
	font-size: 1.0625rem; font-weight: 700; line-height: 25px; color: var(--cpp-text-muted);
}
/* Green pill outline button ("ver mais") — green text + border, transparent bg,
   pill radius, lowercase; hover fills green with white text. */
.cpp-btn-outline {
	align-self: flex-start; margin-top: auto; display: inline-block;
	border: 1.5px solid var(--cpp-green); color: var(--cpp-green);
	background: transparent; border-radius: 20px;
	padding: 8px 20px; font-size: 1rem; text-transform: lowercase; text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cpp-btn-outline:hover { background: var(--cpp-green); color: #fff; border-color: var(--cpp-green); }

/* ---------- Video cards (carousel) ----------
   Source: full-color thumbnail at rest (no filter), no radius, green ring play
   overlay (source uses bk_videos_green.png; reproduced here as a pure-CSS green
   ring with a transparent centre and a green triangle). Title 17/700/lh24,
   ~20px top spacing. */
.cpp-videos-carousel .cpp-video-card { padding: 0 0.75rem; }
.cpp-video-title { text-align: center; font-size: 1.0625rem; font-weight: 700; line-height: 24px; color: var(--cpp-text-muted); margin: 20px 0 0; }
.cpp-video-thumb { position: relative; display: block; border-radius: 0; overflow: hidden; }
.cpp-video-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
/* Green ring: thick green border, transparent centre, centred over the thumb. */
.cpp-video-play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
	width: 64px; height: 64px; border-radius: 50%;
	background: transparent; border: 4px solid var(--cpp-green); box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
}
.cpp-video-play::after { content: ""; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--cpp-green); margin-left: 4px; }
/* Source: thumbnail static on hover (no filter/bg change). */

/* ---------- Agenda calendar (yellow section) ---------- */
/* Agenda: calendar on the left, that month's events on the right — matched to the source,
   measured 2026-09-17 by driving its calendar to a month that has events.
   Header #00833E 44px, month 14px/700 uppercase white; day numbers are 35px circles, 16px/700,
   filled green when an event falls on the day; event cards white, 21px/20px padding, 29px apart,
   day number 50px/700 green, month 13px #4E4E50, title 16px/700 #333, type 16px/700 green. */
/* The yellow band is a `constrained` group, so WordPress caps every direct child at the theme's
   content size — which squeezed the two 585px columns to about 375 each. The agenda needs the wider
   frame the source gives it, so it opts out of that cap explicitly. */
.cpp-agenda .cpp-agenda-wrap,
.cpp-agenda .cpp-agenda-more { max-width: 1200px !important; width: 100%; margin-inline: auto; }
.cpp-agenda-wrap {
	display: grid; grid-template-columns: minmax(0, 585px) minmax(0, 585px);
	gap: 30px; justify-content: center; align-items: start;
}
.cpp-agenda-cal { background: #fff; }
.cpp-cal-head {
	display: flex; align-items: center; justify-content: space-between;
	height: 44px; padding: 0 12px; background: var(--cpp-green); color: #fff;
}
.cpp-cal-title { font: 700 0.875rem/1 'Roboto', sans-serif; text-transform: uppercase; color: #fff; }
.cpp-cal-nav {
	appearance: none; border: 0; background: transparent; color: #fff; cursor: pointer;
	font-size: 1.625rem; line-height: 1; padding: 0 10px; border-radius: 3px;
}
.cpp-cal-nav:hover, .cpp-cal-nav:focus-visible { background: rgba(255, 255, 255, .18); }
.cpp-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cpp-calendar th {
	font: 700 0.875rem/1 'Roboto', sans-serif; color: var(--cpp-green);
	padding: 12px 0; text-transform: none;
}
.cpp-calendar td { text-align: center; padding: 5px 0; }
.cpp-cal-day {
	display: inline-flex; align-items: center; justify-content: center;
	width: 35px; height: 35px; border-radius: 50%;
	font: 700 1rem/1 'Roboto', sans-serif; color: var(--cpp-text);
}
.cpp-calendar td.cpp-cal-event .cpp-cal-day { background: var(--cpp-green); color: #fff; }
.cpp-calendar td.cpp-cal-adjacent { background: #f5f5f5; }
/* F-09: white on #d6d6d6 was 1.45:1. Same muted disc, readable number (8.7:1). */
.cpp-calendar td.cpp-cal-adjacent .cpp-cal-day { background: #d6d6d6; color: var(--cpp-text); }
.cpp-calendar td.cpp-cal-today .cpp-cal-day { box-shadow: 0 0 0 2px var(--cpp-green) inset; }
.cpp-calendar td.cpp-cal-event.cpp-cal-today .cpp-cal-day { box-shadow: 0 0 0 2px #fff inset; }

.cpp-agenda-list { max-height: 355px; overflow-y: auto; scrollbar-width: thin; }
/* A card cut by the scroll edge should read as "more below", not as a rendering fault. */
.cpp-agenda-list::after { content: ""; display: block; height: 1px; }
.cpp-event-card { display: flex; gap: 18px; background: #fff; padding: 21px 20px; margin: 0 0 29px; }
/* A class selector setting `display` beats the browser's own `[hidden] { display: none }`, so the
   year filter marked 136 cards hidden and every one of them stayed on screen. */
.cpp-event-card[hidden], .cpp-events-year[hidden] { display: none !important; }
.cpp-event-card:last-child { margin-bottom: 0; }
.cpp-event-when { flex: 0 0 57px; text-align: center; }
.cpp-event-day { display: block; font: 700 3.125rem/1 'Roboto', sans-serif; color: var(--cpp-green); }
.cpp-event-rule { display: block; width: 100%; height: 1px; background: var(--cpp-green); margin: 6px 0; }
.cpp-event-month { display: block; font: 400 0.8125rem/1.4 'Roboto', sans-serif; color: var(--cpp-text-muted); }
.cpp-event-body { flex: 1 1 auto; min-width: 0; }
.cpp-event-title { margin: 0 0 4px; font: 700 1rem/1.35 'Roboto', sans-serif; text-transform: none; }
.cpp-event-title a { color: var(--cpp-text); text-decoration: none; }
.cpp-event-title a:hover { color: var(--cpp-green); text-decoration: underline; }
.cpp-event-type { margin: 0 0 8px; font: 700 1rem/1.3 'Roboto', sans-serif; color: var(--cpp-green); }
.cpp-event-dates, .cpp-event-place { margin: 0 0 2px; font-size: 0.9375rem; line-height: 1.5; color: var(--cpp-text); }
.cpp-agenda-empty { color: var(--cpp-text-muted); font-style: italic; margin: 8px 0 0; }
.cpp-agenda-more { text-align: center; margin: 24px 0 0; }
/* F-09: brand green on the gold agenda band was 3.24:1; near-black is 12.3:1 there. */
.cpp-agenda-more a { color: #111418; font-weight: 600; text-decoration: none; }
.cpp-agenda-more a:hover { text-decoration: underline; }
@media (max-width: 68.75em) {
	.cpp-agenda-wrap { grid-template-columns: minmax(0, 1fr); max-width: 585px; margin: 0 auto; }
	.cpp-agenda-list { max-height: none; }
}
@media (max-width: 37.5em) {
	.cpp-cal-day { width: 30px; height: 30px; font-size: 0.9375rem; }
	.cpp-calendar th { font-size: 0.8125rem; padding: 10px 0; }
	.cpp-event-card { gap: 12px; padding: 16px 14px; margin-bottom: 18px; }
	.cpp-event-when { flex-basis: 48px; }
	.cpp-event-day { font-size: 2.375rem; }
}

/* ---------- Destaques (magazine covers, carousel) ----------
   Source: grey #f2f2f2 card wrapping a fixed-crop cover (260x310, cover) + title;
   no shadow, no radius, no hover lift. Title 17/700/#4c4c50/lh24, 20px top pad. */
.cpp-destaques-carousel .cpp-revista-card { padding: 0 1rem; text-align: center; }
/* Grey panel (#f2f2f2) wraps the cover link + the title, centered. */
.cpp-revista-card a { display: block; background: var(--cpp-surface); }
/* Fixed crop box so cover heights normalise like source (260x310, cover). */
.cpp-revista-cover {
	display: block; width: 100%; height: 310px; max-width: 260px; margin: 0 auto;
	object-fit: cover; box-shadow: none; border-radius: 0;
}
.cpp-revista-title {
	font-size: 1.0625rem; font-weight: 700; line-height: 24px; color: var(--cpp-text-muted);
	margin: 0; padding: 20px 0; background: var(--cpp-surface); text-align: center;
}

/* ---------- Sponsors ---------- */
/* Tier headings: Roboto 18/700, left-aligned, green, normal spacing. */
.cpp-sponsor-tier {
	font-family: 'Roboto', sans-serif; color: var(--cpp-green); text-transform: uppercase;
	letter-spacing: normal; text-align: left; font-size: 1.125rem; font-weight: 700; margin: 1.5rem 0 1rem;
}
/* Left-packed; logos full color, capped to 85px tall like source (source img{max-height:85px}).
   Even ~28px horizontal rhythm between logos (source cells pitch ~113px around ~85px logos). */
.cpp-sponsor-logos { gap: 16px 28px; align-items: center; justify-content: flex-start; }
.cpp-sponsor-logos .wp-block-image { margin: 0; }
.cpp-sponsor-logos img { width: auto; height: auto; max-height: 85px; max-width: 200px; object-fit: contain; }
/* Multi-logo partner tiers: source caps logos ~105×55 in ~113px table cells (8px gap),
   so 4-5 sit on ONE row. Fixed 105px cells reproduce the even column pitch + single row. */
.cpp-sponsor-logos--partners { gap: 8px; }
.cpp-sponsor-logos--partners .wp-block-image {
	flex: 0 0 105px; display: flex; align-items: center; justify-content: center;
}
.cpp-sponsor-logos--partners img { max-height: 55px; max-width: 105px; }

/* cpp/partners (the section drawn from the Parceiros records). Two columns read row by row, like
   the old site's rows of col-md-6: Principais | Patrocinadores, Parceiros | Institucionais,
   Pro Bono | Media. One column on a phone. Each logo is a <li><a> to the partner's page; the list
   loses its default chrome and the cells keep the sizes above. */
.cpp-partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--60); }
@media (max-width: 48.8125em) { .cpp-partners { grid-template-columns: minmax(0, 1fr); } }
.cpp-partners .cpp-sponsor-logos { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.cpp-sponsor-logos--partners .cpp-partner { flex: 0 0 105px; display: flex; align-items: center; justify-content: center; }
.cpp-partner__link { display: flex; align-items: center; justify-content: center; }
.cpp-partner__link:focus-visible { outline: 3px solid var(--cpp-green); outline-offset: 3px; }
.cpp-partner__name { font-weight: 700; color: var(--cpp-green); }

/* A partner's own page (single-partner.html, cpp/partner-details): the club card look
   (.cpp-club), with the logo on the left and the category + website on the right. */
.cpp-partner-detail .cpp-club.cpp-partner-card { display: flex; align-items: center; gap: 24px 32px; flex-wrap: wrap; }
.cpp-partner-card__logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: #fff; padding: 12px; }
.cpp-partner-card__logo img { width: auto; height: auto; max-width: 280px; max-height: 140px; object-fit: contain; }
.cpp-partner-card__info { flex: 1 1 220px; min-width: 0; }
.cpp-partner-detail .cpp-partner-card__tier { margin: 0 0 8px; font-weight: 700; text-transform: uppercase; color: var(--cpp-green); }
.cpp-partner-detail .cpp-partner-card__web { margin: 0; display: flex; align-items: center; gap: 6px; }
.cpp-partner-detail .cpp-partner-card__web a { color: var(--cpp-green); }
.cpp-partner-detail__desc { max-width: 741px; margin: 0 0 24px; }

@media (max-width: 48.8125em) {
	.cpp-hero .wp-block-cover__inner-container { min-height: 320px; padding-inline: 1rem; }
	.cpp-hero .cpp-hero-caption h2 { font-size: 1.25rem; }
}

/* ---------- Footer (dark grey) ---------- */
footer.has-neutral-700-background-color a { color: #fff; text-decoration: none; }
/* Source footer links have NO hover change. */
footer.has-neutral-700-background-color a:hover { opacity: 1; text-decoration: none; }
.cpp-footer-links { list-style: none; margin: 0; padding: 0; }
/* Source footer links: line-height 20px with li padding 15px(top)/6px(bottom) = 41px row pitch.
   (Was line-height:2.2 = 35px pitch, making each row ~6px tighter and the band ~54px short.) */
.cpp-footer-links li { line-height: 20px; padding: 15px 0 6px; }
footer.has-neutral-700-background-color a.cpp-footer-map-link { display: inline-block; margin-top: 0.5rem; text-decoration: underline; }
/* Footer column headings — source uses Roboto 22px/600, normal letter-spacing. */
footer.has-neutral-700-background-color h2.wp-block-heading {
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: normal;
}
.cpp-selo-ouro { margin: 0; }

/* Footer columns: source keeps them 2-up (2x2) on small screens instead of
   stacking 1-up. The columns use `is-not-stacked-on-mobile` (flex row); force a
   2-column wrap at <=781px so each holds ~50% width like source (~362px). */
@media (max-width: 48.8125em) {
	footer.has-neutral-700-background-color .wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap;
	}
	footer.has-neutral-700-background-color .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
		flex-basis: calc(50% - 0.5rem) !important;
		flex-grow: 0;
	}
}

/* ---------- Skip link ---------- */
.cpp-skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cpp-skip-link:focus {
	position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.75rem 1rem;
	background: var(--cpp-gold); color: var(--cpp-text); z-index: 99999; border-radius: 0.25rem;
	outline: 2px solid var(--cpp-text); font-weight: 700; text-decoration: none;
}

/* ---------- E-goi form (cpp/newsletter-form) ----------
   Width belongs to the page, height to the form: the iframe fills its column and takes the height
   the block was given (the source site fixes 500px). `max-width: 100%` for the same reason every
   other embed has it — nothing in a body may exceed its column. */
.cpp-egoi-form { margin: 24px 0; }
.cpp-egoi-form__frame { display: block; width: 100%; max-width: 100%; border: 0; }

/* ---------- Latest Revista editions (cpp/revistas-recentes) ----------
   One column per edition, from the block's own count, and never narrower than a cover can be read
   at: below ~560px the row becomes two columns rather than four slivers. */
.cpp-revistas { margin: 28px 0 0; }
.cpp-revistas__heading { margin: 0 0 14px; font: 700 1.25rem/1.3 'Roboto', sans-serif; color: var(--cpp-text); }
.cpp-revistas__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 18px;
	grid-template-columns: repeat(var(--cpp-revistas-columns, 4), minmax(0, 1fr));
}
.cpp-revistas__link { display: block; text-decoration: none; color: var(--cpp-text); }
.cpp-revistas__cover {
	display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
	border: 1px solid var(--cpp-border); border-radius: 4px; background: var(--cpp-surface);
	transition: box-shadow .15s ease;
}
.cpp-revistas__cover--empty { aspect-ratio: 3 / 4; }
.cpp-revistas__link:hover .cpp-revistas__cover { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.cpp-revistas__title {
	display: block; margin-top: 8px;
	font: 600 0.9375rem/1.35 'Roboto', sans-serif; color: var(--cpp-green-dark);
}
.cpp-revistas__link:hover .cpp-revistas__title { text-decoration: underline; }
@media (max-width: 35em) {
	.cpp-revistas__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Video transcript (cpp/video-transcript) ---------- */
.cpp-transcript { margin: 32px 0 0; padding: 20px 22px; background: var(--cpp-surface, #f2f2f2); border-radius: 4px; }
.cpp-transcript__title { margin: 0 0 10px; font: 700 1.25rem/1.25 'Roboto', sans-serif; color: var(--cpp-text); }
.cpp-transcript__body { font: 400 1rem/1.7 'Roboto', sans-serif; color: var(--cpp-text); }
.cpp-transcript__body p { margin: 0 0 1em; }
.cpp-transcript__body p:last-child { margin-bottom: 0; }

/* ---------- Interior content pages (Apresentação et al.) ---------- */
/* Faint shield watermark centred behind the page, like the Liferay source. */
body.page { background: #fff url("../images/escudo.jpg") no-repeat 50% 200px; }

/* Centred 1170 frame with 15px gutters, matching the source #content container.
   Title + date span the full frame; the prose column is left-aligned within it. */
.cpp-interior {
	font-family: 'Roboto', sans-serif; color: var(--cpp-text);
	box-sizing: border-box;
	max-width: 1170px; margin: 0 auto;
	padding: 40px 15px 48px;
}
.cpp-interior > * { max-width: 100%; }

/* Page title: red, left aligned, ~31.5px bold (source parity, not the 4xl hero size). */
.cpp-interior .cpp-page-title {
	font-family: 'Roboto', sans-serif;
	color: var(--cpp-red);
	font-size: 1.96875rem;
	font-weight: 700;
	line-height: 1.27;
	text-transform: none;
	margin: 10px 0;
}

/* Modified-date line under the title. Source: italic Roboto 14px, sits ~48px
   below the title block (large gap), then the article body follows. */
.cpp-interior .cpp-page-date {
	font-size: 0.875rem;
	font-style: italic;
	color: var(--cpp-text);
	margin: 48px 0 1.5rem;
}
.cpp-interior .cpp-page-date a { color: inherit; text-decoration: none; pointer-events: none; }

/* Prose column: narrower than the 1170 frame, LEFT aligned to the title edge
   (source ~741px). Plain document flow → left aligned by default. */
.cpp-interior-prose { max-width: 741px; margin: 0; }
/* Title + date span the full frame, left aligned. */
.cpp-interior .cpp-page-title,
.cpp-interior .cpp-page-date { text-align: left; }

/* Lead subtitle (red h2, 22px) — first heading of the article body.
   Source uses line-height:40px so the two-line subtitle stands ~80px tall
   (was 1.3 ≈ 28.6px, leaving the lines cramped and the block ~23px short). */
.cpp-interior-prose h2 {
	font-family: 'Roboto', sans-serif;
	color: var(--cpp-red);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 40px;
	margin: 0 0 10px;
}
.cpp-interior-prose h2 strong { font-weight: 700; }

/* Section headings (Missão …) — grey, 18px bold.
   Source line-height:40px (was 1.4 ≈ 25px), giving each heading row the same
   40px pitch as the subtitle. */
.cpp-interior-prose h3 {
	font-family: 'Roboto', sans-serif;
	color: var(--cpp-text-muted);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 40px;
	margin: 10px 0;
}

.cpp-interior-prose p {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cpp-text);
	margin: 0 0 10px;
}

.cpp-interior-prose ul {
	margin: 0 0 10px;
	padding-left: 25px;
	list-style: disc;
}
.cpp-interior-prose li {
	font-size: 1rem;
	line-height: 24px;
	color: #444;
	margin-bottom: 5px;
}
.cpp-interior-prose a { color: var(--cpp-green); }

/* ---------- News index / archive + single article ----------
   Posts = Notícias. The news index (home.html) and term/date archives (archive.html)
   reuse the .cpp-news-card look from the homepage carousel, but laid out as a 3-col grid
   (the carousel-only rules above are scoped under .cpp-news-carousel, so they don't apply
   here). Single articles (single.html) use the interior archetype: red title + prose. */

/* Faint shield watermark behind news pages too (same as body.page). */
body.blog, body.archive, body.single {
	background: #fff url("../images/escudo.jpg") no-repeat 50% 200px;
}

/* --- News index / archive grid --- */
.cpp-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.cpp-news-grid > li { margin: 0; }
/* Card: white panel, flush image, body with date + title + button (grid context, so no
   carousel side-padding — the grid gap separates cards). */
.cpp-news-archive .cpp-news-card { padding: 0; box-sizing: border-box; height: 100%; }
.cpp-news-archive .cpp-news-card .cpp-news-img,
.cpp-news-archive .cpp-news-card .cpp-news-body { background: #fff; }
.cpp-news-archive .cpp-news-card .cpp-news-img { margin: 0; display: block; overflow: hidden; }
.cpp-news-archive .cpp-news-card .cpp-news-img img { width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 0; }
.cpp-news-archive .cpp-news-body { padding: 15px; display: flex; flex-direction: column; flex: 1; }
.cpp-news-archive .cpp-news-date { color: var(--cpp-text); font-size: 0.875rem; margin: 0 0 0.4rem; }
.cpp-news-archive .cpp-news-body .wp-block-post-title {
	margin: 0 0 0.9rem; font-family: 'Roboto', sans-serif;
	font-size: 1.0625rem; font-weight: 700; line-height: 25px; color: var(--cpp-text-muted);
}
.cpp-news-archive .cpp-news-body .wp-block-post-title a { color: inherit; text-decoration: none; }
.cpp-news-archive .cpp-news-body .wp-block-post-title a:hover { color: var(--cpp-green); }
/* read-more renders as <a class="wp-block-read-more cpp-btn-outline"> — inherits the pill. */

/* Pagination row (Anteriores / 1 2 3 / Seguintes). */
.cpp-news-pagination { margin: 40px 0 0; gap: 8px; font-family: 'Roboto', sans-serif; }
.cpp-news-pagination .wp-block-query-pagination-numbers a,
.cpp-news-pagination .wp-block-query-pagination-numbers .current,
.cpp-news-pagination a {
	color: var(--cpp-green); text-decoration: none; font-size: 0.9375rem; padding: 4px 8px;
}
.cpp-news-pagination .current { font-weight: 700; color: var(--cpp-text); }

/* --- Single news article --- */
.cpp-article .cpp-article-meta { gap: 14px; align-items: baseline; margin: 0 0 4px; }
.cpp-article .cpp-article-cat a,
.cpp-article .cpp-article-cat { color: var(--cpp-green); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.cpp-article .cpp-article-date { font-size: 0.875rem; font-style: italic; color: var(--cpp-text); }
.cpp-article .cpp-page-title { margin: 6px 0 16px; }
/* Lead image: constrained to the prose column width, left-aligned like the article body. */
.cpp-article .cpp-article-hero { max-width: 741px; margin: 0 0 24px; }
.cpp-article .cpp-article-hero img { width: 100%; height: auto; display: block; border-radius: 4px; }
.cpp-article .cpp-article-tags { display: block; margin: 28px 0 0; font-size: 0.875rem; color: var(--cpp-text-muted); }
.cpp-article .cpp-article-tags a { color: var(--cpp-green); text-decoration: none; }
.cpp-article .cpp-article-back { max-width: 741px; margin: 32px 0 0; }

/* ---------- Responsive ---------- */
@media (max-width: 48em) {
	.cpp-site-header .wp-block-group { gap: 0.5rem; }
	.cpp-section-title { font-size: 1.5rem; }
	body.page, body.blog, body.archive, body.single { background-position: 50% 120px; background-size: 60% auto; }
	.cpp-interior-prose { max-width: 100%; }
	.cpp-news-grid { grid-template-columns: 1fr; gap: 24px; }
	.cpp-article .cpp-article-hero { max-width: 100%; }
}

@media (max-width: 64em) and (min-width: 48.0625em) {
	.cpp-news-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   EDITOR-CANVAS-ONLY FIXES (Site Editor / page editor; never the front end)
   ----------------------------------------------------------------------------
   The home dynamic sections (hero, news, videos, agenda, destaques) and the
   language selector are now server-rendered cpp/* blocks. In the editor each is
   wrapped by ServerSideRender + the block list in extra .wp-block elements, so
   the front-end direct-child (>) chains that CROSS a block boundary stop
   matching — e.g. `.cpp-noticias > .cpp-carousel` (width lift) and the
   Navigation block's underline chain. These rules, guarded by
   .editor-styles-wrapper (present only in the editor iframe), restore the
   intended look in the canvas. The front end keeps its own matching rules above
   and is untouched by anything in this block.

   NOTE: the front-end behaviour JS (assets/js/main.js, via window.CPP.enhance) now
   ALSO runs inside the canvas — editor-blocks.js calls it against the iframe so
   carousels page on arrows/dots, the lang dropdown opens, and the video lightbox
   works in the editor (autoplay off, user choice). So there are NO static-preview
   width hacks here anymore — the carousels size themselves exactly as on the front
   end. These rules only patch the few places where the editor's extra block
   wrappers break a front-end direct-child (>) selector.
   ============================================================================ */

/* Width lift — the > combinator breaks across the block wrapper; use descendant. */
.editor-styles-wrapper .cpp-noticias .cpp-carousel,
.editor-styles-wrapper .cpp-videos .cpp-carousel,
.editor-styles-wrapper .cpp-destaques .cpp-carousel {
	max-width: 1170px; width: 100%; margin-left: auto; margin-right: auto;
}

/* The SSR/block wrappers are layout-neutral pass-throughs in the canvas so the
   inner markup lays out as on the front end. */
.editor-styles-wrapper [class*="wp-block-cpp-"] { display: block; max-width: none; }
.editor-styles-wrapper .cpp-hero .wp-block,
.editor-styles-wrapper .cpp-hero-wrap { margin: 0; }

/* Hero pulls up behind the green bar via `#cpp-main > .cpp-hero-wrap` on the
   front end; that > chain can't match through the block wrapper in the editor,
   and the negative tuck looks wrong without the sticky JS anyway — neutralize. */
.editor-styles-wrapper .cpp-hero-wrap { margin-top: 0 !important; }

/* (Removed) Hero static-preview width hack: main.js now runs in the canvas and sets
   each center-mode slide's pixel width exactly as on the front end, so no forced
   full-width override is needed — it would actually fight the JS layout. */

/* The sticky white logo + mobile toggle live in an irreducible wp:html island inside
   the green bar; on the front end they're hidden at desktop (opacity/display via JS
   state). In the editor that island is sandboxed (unstyled white box) and inflates the
   bar height — hide the island in the canvas so the bar reads at its true 62px.
   Cover the HTML block's editor wrapper variants (.wp-block-html, the data-type marker,
   and a raw sandbox iframe) plus the always-hidden front-end sticky logo/toggle. */
.editor-styles-wrapper .cpp-navbar-inner .wp-block-html,
.editor-styles-wrapper .cpp-navbar-inner [data-type="core/html"],
.editor-styles-wrapper .cpp-navbar-inner iframe.components-sandbox,
.editor-styles-wrapper .cpp-navbar-logo,
.editor-styles-wrapper .cpp-mobile-toggle { display: none !important; }

/* Navbar: keep the green bar at its true height and stop the Navigation block's
   editor appender/wrapping from ballooning it. */
.editor-styles-wrapper .cpp-navbar-inner { min-height: 62px; align-items: center; flex-wrap: nowrap; overflow: hidden; }
.editor-styles-wrapper .cpp-primary-nav.wp-block-navigation { width: 100%; }
.editor-styles-wrapper .cpp-primary-nav .wp-block-navigation__container { flex-wrap: nowrap; gap: 0 !important; }
/* Hide the editor-only "add block" appender at the end of the nav so it doesn't
   add a stray button/height to the green bar. */
.editor-styles-wrapper .cpp-primary-nav .block-list-appender,
.editor-styles-wrapper .cpp-primary-nav .wp-block-navigation-item.wp-block-navigation__custom-link.is-style- { display: none !important; }

/* Underline: front-end uses a strict > chain; in the editor the items sit one
   wrapper deeper, so add a descendant-based fallback (canvas only). */
.editor-styles-wrapper .cpp-primary-nav .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
	height: 5px; background: #fff; transition: right .2s ease 0s;
}
.editor-styles-wrapper .cpp-primary-nav .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after { right: 0; }

/* --- Athlete profile (cpp/athlete-profile block) --------------------------- */
/* The newsletter and campaign sign-up forms are E-goi iframes injected into an empty div; without a
   height the iframe collapses to nothing. */
.news-form { min-height: 520px; }
.news-form iframe { min-height: 520px; }

/* ---------- Órgãos Sociais: the people cards migrated from the source's Asset Publisher ---------- */
.cpp-people__heading { font: 700 1.375rem/1.25 'Roboto', sans-serif; color: var(--cpp-red, #e2001a); margin: 28px 0 4px; }
.cpp-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 16px 0 40px; padding: 0; }
.cpp-person { margin: 0; text-align: center; }
.cpp-person__photo { width: 100%; height: 230px; object-fit: cover; object-position: top center; border-radius: 4px; background: var(--cpp-surface, #f2f2f2); display: block; }
.cpp-person__name { font: 700 1.0625rem/1.3 'Roboto', sans-serif; color: var(--cpp-text); margin: 12px 0 2px; }
.cpp-person__role { font: 400 0.9375rem/1.3 'Roboto', sans-serif; color: var(--cpp-grey, #4c4c50); margin: 0; }
@media (max-width: 62.5em) { .cpp-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 43.75em) { .cpp-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .cpp-person__photo { height: 170px; } }

/* ---------- Athlete page: identity card ---------- */
/* The data sits BESIDE the photograph. Most athletes have three or four rows filled in, so a
   two-column layout that grows downwards keeps a thin profile looking finished and a full one
   (nine rows) in the same frame. */
.cpp-athlete-hero {
	display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px;
	align-items: start; margin: 8px 0 32px;
}
.cpp-athlete-hero--nophoto { grid-template-columns: minmax(0, 1fr); }
.cpp-athlete-hero__photo { margin: 0; }
/* A fixed height rather than an aspect-ratio: WordPress prints width/height attributes on the
   image and the resulting `height: auto` wins, which let a full-body cut-out grow to 950px tall.
   Cropping from the top keeps the face in frame — the same treatment the athlete grid uses. */
.cpp-athlete-hero__photo img {
	display: block; width: 100%; height: 340px; object-fit: cover; object-position: top center;
	border-radius: 6px; background: var(--cpp-surface, #f2f2f2);
}
.cpp-athlete-hero__program {
	margin: 0 0 6px; font: 700 0.875rem/1.2 'Roboto', sans-serif;
	text-transform: uppercase; letter-spacing: .08em;
}
.cpp-athlete-hero__program a { color: var(--cpp-green); text-decoration: none; }
.cpp-athlete-hero__program a:hover, .cpp-athlete-hero__program a:focus-visible { text-decoration: underline; }
.cpp-athlete-hero__name {
	margin: 0 0 20px; font: 700 2.75rem/1.05 'Roboto', sans-serif; color: var(--cpp-text);
}
.cpp-athlete-hero__facts {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 28px; margin: 0 0 20px; padding: 18px 0 0; border-top: 1px solid var(--cpp-border);
}
.cpp-athlete-hero__fact dt {
	font: 700 0.75rem/1.2 'Roboto', sans-serif; text-transform: uppercase; letter-spacing: .07em;
	color: var(--cpp-green); margin-bottom: 3px;
}
.cpp-athlete-hero__fact dd { margin: 0; font: 400 1.0625rem/1.35 'Roboto', sans-serif; color: var(--cpp-text); }
.cpp-athlete-hero__fact dd a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cpp-athlete-hero__fact dd a:hover, .cpp-athlete-hero__fact dd a:focus-visible { color: var(--cpp-green); }
.cpp-athlete-hero__games { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 0 0 14px; }
.cpp-athlete-hero__games-label {
	font: 700 0.75rem/1.2 'Roboto', sans-serif; text-transform: uppercase; letter-spacing: .07em; color: var(--cpp-green);
}
.cpp-athlete-hero__games ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cpp-athlete-hero__games li {
	font: 500 0.875rem/1 'Roboto', sans-serif; color: var(--cpp-green-dark, #005F2C);
	background: rgba(0, 122, 51, .09); border-radius: 999px; padding: 7px 13px;
}
.cpp-athlete-hero__social { display: flex; gap: 14px; margin: 0; font: 500 0.9375rem/1.2 'Roboto', sans-serif; }
.cpp-athlete-back { margin: 32px 0 0; }
.cpp-athlete-more-title { font: 700 1.375rem/1.2 'Roboto', sans-serif; margin: 0 0 16px; }
@media (max-width: 53.75em) {
	.cpp-athlete-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.cpp-athlete-hero__photo img { height: 320px; object-position: center 15%; }
	.cpp-athlete-hero__name { font-size: 2rem; margin-bottom: 16px; }
	.cpp-athlete-hero__facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

.cpp-athlete-profile { margin-top: var(--wp--preset--spacing--40, 1.5rem); }
.cpp-athlete-section { margin-block: var(--wp--preset--spacing--50, 2rem); }
.cpp-athlete-section > h2 {
	font-size: var(--wp--preset--font-size--2xl, 1.5rem);
	border-bottom: 2px solid var(--wp--preset--color--primary, #00833E);
	padding-bottom: .3em; margin-bottom: .8em;
}
.cpp-athlete-data {
	display: grid; grid-template-columns: max-content 1fr;
	gap: .35em 1.2em; margin: 0;
}
.cpp-athlete-data dt { font-weight: 700; color: var(--wp--preset--color--primary-dark, #005F2C); }
.cpp-athlete-data dd { margin: 0; }
.cpp-athlete-competicoes table { width: 100%; border-collapse: collapse; }
.cpp-athlete-competicoes th, .cpp-athlete-competicoes td {
	border: 1px solid var(--wp--preset--color--neutral-300, #d4d4d4); padding: .4em .6em;
}
.cpp-athlete-competicoes-img { max-width: 100%; height: auto; }
.cpp-athlete-gallery-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--wp--preset--spacing--30, 1rem);
}
.cpp-athlete-gallery-grid img { width: 100%; height: auto; border-radius: 4px; }
.cpp-athlete-video-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--30, 1rem);
}
.cpp-athlete-video { position: relative; aspect-ratio: 16 / 9; }
.cpp-athlete-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 4px; }

/* ============================================================================
   NEWS POST EDITOR — canvas typography preview (single-post editor only)
   ----------------------------------------------------------------------------
   editor-news.js adds `cpp-news-editing` to the canvas <body> only on the post
   ('post' type) edit screen. These rules nudge the title + body in that canvas to
   read closer to the published article (Roboto, red title, prose paragraph size)
   so writing feels less bare. They do NOT — and cannot — reproduce the template
   chrome (hero image, frame, meta row); that's why the tip panel points editors to
   Pré-visualizar for the true look. Scoped to this body class so the front end and
   every other editor are untouched.
   ============================================================================ */
body.cpp-news-editing .editor-styles-wrapper {
	font-family: 'Roboto', sans-serif;
}
/* Title field → red, like .cpp-page-title on the front end. */
body.cpp-news-editing .editor-post-title__input,
body.cpp-news-editing .wp-block-post-title,
body.cpp-news-editing h1.wp-block-post-title {
	color: var(--cpp-red);
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
}
/* Body paragraphs → match the front-end prose size/leading. Do NOT override the
   layout width here: the title block and body both use the theme's native
   contentSize (780px), so constraining the body to a different measure pushes it
   out of alignment with the title. Keep them on the same column. */
body.cpp-news-editing .block-editor-block-list__layout p {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cpp-text);
}

/* ---------- LA28 countdown band (source: Liferay web-content "SECÇÃO LA28", added 2026-08) ----------
   Faithful port of the source's inline CSS. The source page has a 10px root font-size, so its rem
   values are converted to px here (1.8rem → 18px, 3.8rem → 38px, 7rem → 70px …). Barlow Condensed
   is self-hosted (Google Fonts latin subset, 400 + 700) — the source @imports it from Google. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-condensed-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); }

.cpp-la28 { position: relative; overflow: hidden; color: #fff; isolation: isolate; } /* no explicit width: .alignfull's negative margins stretch it to the viewport */
.cpp-la28, .cpp-la28 * { box-sizing: border-box; } /* the source runs under Bootstrap's global border-box: the tiles' 152px min-width INCLUDES padding+border */
.cpp-la28__bg { position: absolute; inset: -4%; background-size: cover; background-position: center 30%; filter: saturate(1.1); animation: cpp-la28-zoom 20s ease-in-out infinite alternate; will-change: transform; z-index: 0; }
@keyframes cpp-la28-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .cpp-la28__bg { animation: none; } }
.cpp-la28__overlay { position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgba(0,30,15,.92) 0%, rgba(0,30,15,.72) 35%, rgba(0,20,10,.55) 65%, rgba(0,10,5,.40) 100%),
	            radial-gradient(ellipse 140% 100% at 50% 110%, rgba(0,60,30,.35) 0%, transparent 65%); }
.cpp-la28__inner { position: relative; z-index: 2; box-sizing: border-box; max-width: 1100px; margin: 0 auto; padding: 80px 40px 72px; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.cpp-la28__header { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.cpp-la28__eyebrow { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 1.125rem; line-height: 24px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.8); text-shadow: 0 1px 6px rgba(0,0,0,.5); margin: 0 0 10px; }
.cpp-la28 h2.cpp-la28__title { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: clamp(1.625rem, 5.5vw, 2.375rem); line-height: 1; text-transform: uppercase; letter-spacing: .04em; color: #fff; margin: 0; text-shadow: 0 2px 20px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.4); }
.cpp-la28__sub { font-family: 'Roboto', sans-serif; font-size: 1.21875rem; line-height: 24px; color: rgba(255,255,255,.82); letter-spacing: .06em; text-shadow: 0 1px 8px rgba(0,0,0,.55); margin: 0 0 10px; }
.cpp-la28__countdown { display: flex; align-items: flex-start; gap: 0; }
.cpp-la28__unit { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cpp-la28__val { display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: clamp(2.375rem, 10vw, 4.375rem); line-height: 1; min-width: clamp(88px, 15vw, 152px); text-align: center; padding: 22px 10px 18px;
	background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(255,255,255,.14); color: #fff; letter-spacing: -.02em; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.cpp-la28__sep { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 400; font-size: clamp(1.75rem, 7vw, 3.125rem); line-height: 1; padding: 22px 8px 0; color: rgba(255,255,255,.2); align-self: flex-start; }
.cpp-la28__lbl { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 1.09375rem; line-height: 24px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.75); text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.cpp-la28__footer { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; padding-top: 4px; }
.cpp-la28__text { font-family: 'Roboto', sans-serif; font-size: 1.25rem; line-height: 24px; color: rgba(255,255,255,.82); text-align: center; text-shadow: 0 1px 8px rgba(0,0,0,.5); margin: 0 0 10px; }
.cpp-la28__text strong { color: #fff; font-weight: 600; }
.cpp-la28 .cpp-la28__btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 30px; background: #00833e; border: 1px solid rgba(255,255,255,.2); color: #fff; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 0.9375rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .18s, border-color .18s; }
.cpp-la28 .cpp-la28__btn:hover, .cpp-la28 .cpp-la28__btn:focus-visible { background: #006630; color: #fff; border-color: rgba(255,255,255,.35); }
@media (max-width: 37.5em) {
	.cpp-la28__inner { padding: 60px 20px 52px; gap: 36px; }
	.cpp-la28__sep { padding: 18px 4px 0; }
	.cpp-la28__footer { flex-direction: column; gap: 16px; }
}

/* ---------- "Onde Praticar" / Mapa de Inclusão Desportiva (blocks/onde-praticar + venue-details) ----------
   Ported from the source page's computed styles: 60/40 split (filters | district map), green
   14px/700 labels, 315×35 selects, 24px counter, full-width club cards with a white→#f3f1f1
   diagonal gradient, 1px #efefef border, 18px/700 #4c4c50 name, two 50% columns, 16px icons. */
.cpp-onde-page .cpp-onde-intro { max-width: 684px; }
.cpp-onde-page .cpp-onde-intro h2 { font-family: 'Roboto', sans-serif; font-size: 1.09375rem; line-height: 21.5px; font-weight: 700; color: #333; margin: 10px 0; padding-bottom: 10px; }
.cpp-onde-page .cpp-onde-intro p { font-size: 1rem; line-height: 21.5px; font-weight: 500; color: #333; margin: 0 0 10px; padding-top: 8px; }
.cpp-onde { margin-top: 8px; }
.cpp-onde__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.cpp-onde__filters { flex: 0 1 684px; min-width: 0; }
.cpp-onde__cols { display: flex; gap: 17px; align-items: flex-start; }
.cpp-onde__col { flex: 0 1 315px; min-width: 0; }
.cpp-onde__field { margin: 0 0 16px; }
.cpp-onde__label { display: block; font-family: 'Roboto', sans-serif; font-size: 0.875rem; line-height: 20px; font-weight: 700; color: #00833e; margin: 0 0 5px; }
.cpp-onde__select { display: block; width: 100%; max-width: 315px; height: 35px; padding: 4px 6px; font: 400 0.875rem/1.4 'Roboto', Helvetica, Arial, sans-serif; color: #555; background: #fff; border: 1px solid #ccc; border-radius: 2px; }
.cpp-onde__select:disabled { color: #999; background: #f7f7f7; }
.cpp-onde__counter { font-family: 'Roboto', sans-serif; font-size: 1.5rem; line-height: 24px; color: #333; padding-top: 4px; text-align: left; }
.cpp-onde__scroll { display: block; font-size: 1rem; line-height: 24px; padding: 5px 0; }
.cpp-onde__empty { font-size: 1rem; color: #333; margin: 8px 0 0; }
.cpp-onde__map { flex: 0 0 456px; position: relative; text-align: center; margin-bottom: 8px; } /* the source's -50px pull-up overlapped the note here (no floats on WP) */
.cpp-onde__map-img { display: inline-block; width: 265px; height: 415px; max-width: 100%; }
.cpp-onde__map-canvas { position: absolute; top: 0; left: 50%; margin-left: -132.5px; width: 265px; height: 415px; pointer-events: none; }
.cpp-onde__map area { cursor: pointer; }
.cpp-onde__sep { border: 0; border-top: 1px solid #ddd; margin: 0 0 20px; }
.cpp-onde__note { font-size: 1rem; line-height: 24px; color: #333; margin: 0 0 20px; }
.cpp-onde__note p { margin: 0 0 8px; }
.cpp-onde__note a { color: var(--cpp-link-blue); text-decoration: underline; }
.cpp-onde__list { display: block; }
.cpp-club { display: block; box-sizing: border-box; width: 100%; min-width: 0; overflow-wrap: anywhere; word-break: break-word; padding: 20px; margin: 0 0 15px; color: #000; text-decoration: none; background: linear-gradient(to right bottom, #fff, #f3f1f1); border: 1px solid #efefef; box-shadow: 0 1px 4px rgba(0,0,0,.08); font-family: 'Roboto', sans-serif; font-size: 1rem; line-height: 24px; }
a.cpp-club:hover, a.cpp-club:focus-visible { border-color: #00833e; text-decoration: none; color: #000; }
.cpp-club.is-hidden { display: none; }
.cpp-club__name { font-family: 'Roboto', sans-serif; font-size: 1.125rem; line-height: 25px; font-weight: 700; color: #4c4c50; margin: 10px 0 15px; }
.cpp-club p { margin: 0 0 10px; font-size: 1rem; line-height: 24px; color: #000; }
.cpp-club__cols { display: flex; flex-wrap: wrap; gap: 0 20px; }
.cpp-club__col { flex: 1 1 45%; min-width: 240px; }
.cpp-club__line { display: block; line-height: 24px; }
.cpp-club__icon { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; background: no-repeat center / 16px 16px; }
.cpp-club__icon--phone { background-image: url('../images/phone-icon.png'); }
.cpp-club__icon--mail { background-image: url('../images/mail-icon.png'); }
.cpp-club__icon--web { background-image: none; }
.cpp-club__icon--web::before { content: "\1F310"; font-size: 0.875rem; line-height: 16px; }
.cpp-venue .cpp-club { cursor: default; }
.cpp-venue__def { margin: 0 0 16px; font-size: 1rem; }
.cpp-venue__desc { max-width: 741px; margin: 0 0 24px; }
.cpp-venue__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0 0 24px; }
.cpp-venue__img { width: 100%; height: auto; border: 1px solid #efefef; }
.cpp-venue__back { margin: 24px 0 40px; }
@media (max-width: 60em) {
	.cpp-onde__top { flex-direction: column-reverse; }
	.cpp-onde__map { flex-basis: auto; margin-bottom: 0; }
	.cpp-onde__filters { flex-basis: auto; width: 100%; }
}
@media (max-width: 43.75em) {
	/* source (≤768px): the Portugal map is hidden; the two filters stay side by side */
	.cpp-onde__map { display: none; }
	.cpp-onde__cols { gap: 17px; }
	.cpp-onde__col { flex: 1 1 0; width: auto; }
	.cpp-onde__select { max-width: none; }
	.cpp-onde__counter { font-size: 1.375rem; }
}

/* ---------- Documents (blocks/documents-list, blocks/publication-download) ---------- */
.cpp-docs, .cpp-interior-prose ul.cpp-docs { list-style: none; margin: 8px 0 32px; padding: 0; max-width: 741px; }
.cpp-docs__item { list-style: none; }
.cpp-docs__item { border-bottom: 1px solid #e5e5e5; }
.cpp-docs__link { display: flex; align-items: center; gap: 12px; padding: 14px 4px; color: #333; text-decoration: none; font-size: 1rem; line-height: 22px; }
.cpp-docs__link:hover .cpp-docs__title, .cpp-docs__link:focus-visible .cpp-docs__title { color: #00833e; text-decoration: underline; }
.cpp-docs__icon { flex: 0 0 28px; width: 28px; height: 34px; border: 2px solid #bd0b2e; border-radius: 3px; position: relative; box-sizing: border-box; }
.cpp-docs__icon::after { content: "PDF"; position: absolute; left: -2px; right: -2px; bottom: 4px; font: 700 0.5625rem/0.75rem 'Roboto', sans-serif; color: #fff; background: #bd0b2e; text-align: center; letter-spacing: .04em; }
.cpp-docs__title { flex: 1 1 auto; font-weight: 500; }
.cpp-docs__meta, .cpp-docs__date { flex: 0 0 auto; color: #808080; font-size: 0.8125rem; white-space: nowrap; }
.cpp-pub-download { margin: 20px 0 0; }
.cpp-pub-download__size { font-weight: 400; opacity: .85; }

/* ---------- Interior pages: per-page parity notes (QA 2026-09-14) ---------- */
/* The source shows no date on "Mensagem do Presidente" (it does on Apresentação and Contactos). */
body.page-id-30 .cpp-page-date { display: none; }
/* Image captions («Legenda» in the image details). A caption sat in the body text's size and
   colour, so it read as one more paragraph. Smaller, italic, muted grey (#4E4E50, 8.6:1 on white)
   and a thin green rule on the left mark it as belonging to the photo above. Classic-editor
   captions render as figure.wp-caption > figcaption.wp-caption-text; block images as
   .wp-element-caption. The photo and sports grids style their own figcaptions and are untouched.
   editor-content.css gives the editor the same look. */
.wp-caption { max-width: 100%; margin: 1.5rem 0; }
.wp-caption img { display: block; }
.wp-caption .wp-caption-text,
.wp-block-image .wp-element-caption {
	margin: 8px 0 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--cpp-green);
	font-size: 0.875rem; line-height: 1.45; font-style: italic; color: var(--cpp-text-muted); text-align: left;
}

/* Contactos: the source table has no borders — a plain two-column block with a caption on top. */
.cpp-interior-prose table { border-collapse: collapse; margin: 0 0 1em; }
.cpp-interior-prose table caption { text-align: left; font-weight: 700; padding: 0 0 6px; }
.cpp-interior-prose td, .cpp-interior-prose th { padding: 2px 16px 2px 0; vertical-align: top; border: 0; }
.cpp-interior-prose a { color: var(--cpp-link-blue); }

/* `.table-content` is the SOURCE theme's own class, and several migrated pages (CPP360 above all)
   are built from tables carrying it. The colours that make those pages readable — a green bar per
   measure, alternating white/grey rows — live in the source's stylesheet, not in the pasted markup,
   so the tables came across grey-less and the page did not look like its original. These are the
   five rules from `web-cpp-theme/css/main.css`, copied as they are. They sit AFTER the prose table
   rules above on purpose: same specificity, so the later one wins. */
.table-content { border-collapse: collapse; }
.table-content th { text-align: left; font-size: 1.125rem; background: #00833e; padding: 10px 14px; color: #fff; }
.table-content td { padding: 8px 12px; }
.table-content tr { background: #fff; }
.table-content tr:nth-child(even) { background-color: #f2f2f2; }
/* Two of the five measure headings are a <p> inside the <th> rather than bare text. The source lets
   them inherit the cell's 18px; our prose rules set paragraphs to 16px, which made one bar's title
   visibly smaller than the rest. */
.table-content th p { font-size: inherit; margin: 0; }
/* The measure titles are an <h4> inside the header cell. Our heading scale renders them at 24px with
   a heading's margins, which turned the source's 61px green bar into a 115px one; on the source they
   simply take the cell's own size. */
.table-content th h1, .table-content th h2, .table-content th h3,
.table-content th h4, .table-content th h5, .table-content th h6 {
	font-size: inherit; line-height: 1.2; margin: 10px 0;
}

/* ---------- Archive pages (Publicações, Vídeos, Revistas): interior archetype ---------- */
.cpp-archive .cpp-archive-cards .wp-block-post-title a { color: #00833e; text-decoration: none; }
.cpp-archive .cpp-archive-cards .wp-block-post-title a:hover { text-decoration: underline; }
.cpp-archive .wp-block-query-pagination { margin: 24px 0 0; }
@media (max-width: 43.75em) {
	.cpp-archive .cpp-archive-card { align-items: center; text-align: center; }
	.cpp-archive .cpp-archive-card .wp-block-post-featured-image { width: 100%; max-width: 260px; }
}

/* ---------- 404 ---------- */
/* The source site answers a bare "Erro 404 / Lamentamos, mas a página não existe!" with no way out.
   Keeping the wording, adding a search box and the main sections so a visitor is never stuck. */
.cpp-404 { padding: 0 20px; margin: 0 auto 64px; max-width: 1170px; }
.cpp-404-hero {
	background: var(--cpp-green-light);
	border-radius: 4px;
	padding: 40px 32px 36px;
	margin: 32px 0 0;
	text-align: center;
}
.cpp-404-code {
	font: 700 5.75rem/1 'Roboto', sans-serif;
	color: var(--cpp-green);
	margin: 0;
	letter-spacing: -0.02em;
}
.cpp-404-title {
	font: 700 1.875rem/1.2 'Roboto', sans-serif;
	color: var(--cpp-red);
	margin: 8px 0 0;
	text-transform: none;
}
.cpp-404-lead {
	font-size: 1.0625rem;
	line-height: 26px;
	color: var(--cpp-text);
	margin: 12px auto 24px;
	max-width: 540px;
}
.cpp-404-search.wp-block-search { max-width: 460px; margin: 0 auto; }
.cpp-404-search .wp-block-search__inside-wrapper { border: 0; padding: 0; gap: 0; display: flex; }
.cpp-404-search .wp-block-search__input {
	flex: 1 1 auto; min-width: 0; height: 44px; border: 1px solid var(--cpp-border);
	border-right: 0; border-radius: 3px 0 0 3px; padding: 0 14px;
	font: 400 0.9375rem/2.75rem 'Roboto', sans-serif; color: var(--cpp-text); background: #fff;
}
.cpp-404-search .wp-block-search__button {
	flex: 0 0 auto; height: 44px; border: 0; border-radius: 0 3px 3px 0; margin: 0;
	padding: 0 22px; background: var(--cpp-green); color: #fff; cursor: pointer;
	font: 500 0.9375rem/2.75rem 'Roboto', sans-serif;
}
.cpp-404-search .wp-block-search__button:hover,
.cpp-404-search .wp-block-search__button:focus-visible { background: var(--cpp-green-dark); }
.cpp-404-subtitle {
	font: 700 1.25rem/1.3 'Roboto', sans-serif; color: var(--cpp-text);
	margin: 40px 0 16px; text-transform: none;
}
.cpp-404-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.cpp-404-grid li { list-style: none; margin: 0; }
.cpp-404-grid a {
	display: block; height: 100%; box-sizing: border-box;
	border: 1px solid var(--cpp-border); border-radius: 4px; padding: 16px 18px;
	text-decoration: none; color: var(--cpp-text); background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cpp-404-grid a:hover, .cpp-404-grid a:focus-visible {
	border-color: var(--cpp-green); box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.cpp-404-grid strong { display: block; color: var(--cpp-green); font: 700 1rem/1.375rem 'Roboto', sans-serif; }
.cpp-404-grid span { display: block; margin-top: 4px; font-size: 0.8125rem; line-height: 19px; color: var(--cpp-grey); }
@media (max-width: 56.25em) {
	.cpp-404-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 43.75em) {
	.cpp-404-hero { padding: 28px 18px 26px; }
	.cpp-404-code { font-size: 4rem; }
	.cpp-404-title { font-size: 1.5rem; }
	.cpp-404-lead { font-size: 1rem; line-height: 24px; }
	.cpp-404-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Modalidade (single sport) ---------- */
/* Matched to the source detail page (measured 2026-09-16): the family is the red page title, then a
   small circular photo with the modality's name beside it in grey (.title-sport h3, #4c4c50), the
   description at the FULL content width rather than the 741px reading column, and a rounded
   "< Voltar" button. `.box-rounded-image` on the source is a 2px #efefef ring around the circle. */
.cpp-sport-head { display: flex; align-items: center; gap: 20px; margin: 24px 0 20px; }
.cpp-sport-photo { flex: 0 0 auto; display: block; line-height: 0; }
.cpp-sport-photo img {
	width: 55px; height: 55px; object-fit: cover; border-radius: 50%;
	border: 2px solid #efefef; display: block; box-sizing: border-box;
}
.cpp-sport-name {
	margin: 0; font: 700 1.25rem/1.625rem 'Roboto', sans-serif; color: #4c4c50; text-transform: none;
}
.cpp-sport .cpp-sport-prose { max-width: none; }
.cpp-sport-back { margin: 36px 0 48px; }
.cpp-btn-back {
	display: inline-block; padding: 12px 26px; border: 1px solid var(--cpp-border);
	border-radius: 24px; background: #fff; color: var(--cpp-text); text-decoration: none;
	font: 500 1rem/1.25rem 'Roboto', sans-serif; transition: background .15s ease, border-color .15s ease;
}
.cpp-btn-back:hover, .cpp-btn-back:focus-visible {
	background: var(--cpp-green-light); border-color: var(--cpp-green); color: var(--cpp-green);
}
@media (max-width: 43.75em) {
	.cpp-sport-head { gap: 14px; margin: 18px 0 16px; }
	.cpp-sport-name { font-size: 1.125rem; line-height: 24px; }
}

/* ---------- Section index (blocks/section-links) ---------- */
.cpp-section-links {
	list-style: none; margin: 8px 0 40px; padding: 0; max-width: 900px;
	display: grid; grid-template-columns: repeat(var(--cpp-section-cols, 2), 1fr); gap: 12px;
}
.cpp-section-links__item { list-style: none; margin: 0; }
.cpp-section-links__link {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%;
	box-sizing: border-box; border: 1px solid var(--cpp-border); border-radius: 4px;
	padding: 14px 16px; background: #fff; color: var(--cpp-text); text-decoration: none;
	font: 500 1rem/1.375rem 'Roboto', sans-serif;
	transition: border-color .15s ease, background .15s ease;
}
.cpp-section-links__link:hover, .cpp-section-links__link:focus-visible {
	border-color: var(--cpp-green); background: var(--cpp-green-light);
}
.cpp-section-links__link:hover .cpp-section-links__label { color: var(--cpp-green); }
.cpp-section-links__arrow { flex: 0 0 auto; color: var(--cpp-green); font-size: 1.25rem; line-height: 1; }
.cpp-section-links__empty { color: var(--cpp-grey); font-style: italic; }
@media (max-width: 43.75em) {
	.cpp-section-links { grid-template-columns: 1fr; }
}

/* ---------- Modalidades grid (blocks/sports-grid) ---------- */
/* Matched to the source's ul.sports-list (web-cpp-theme/css/main.css), measured 2026-09-16:
   li width 160px, margin 0 30px 15px 0; figure white, height 150px, padding-top 10px,
   1px #eee border, border-radius 20px, hover #f4f5f5; img max-height 90px, border-radius 50%,
   padding 5px; figcaption height 55px, vertically centred, 1.7rem (= 17px: the source sets
   html{font-size:62.5%}, this theme does not, so the value is written out in px). */
.cpp-sports-grid {
	list-style: none; margin: 16px 0 40px; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, 160px); gap: 15px 30px;
}
.cpp-sports-grid__item { list-style: none; margin: 0; width: 160px; }
.cpp-sports-grid__link { display: block; text-decoration: none; color: #4c4c50; }
.cpp-sports-grid__figure {
	margin: 0; background: #fff; border: 1px solid #eee; border-radius: 20px;
	min-height: 150px; padding: 10px 0 0; text-align: center;
	display: flex; flex-direction: column; align-items: center;
	transition: background-color .15s ease;
}
.cpp-sports-grid__link:hover .cpp-sports-grid__figure,
.cpp-sports-grid__link:focus-visible .cpp-sports-grid__figure { background: #f4f5f5; }
.cpp-sports-grid__img {
	max-height: 90px; width: auto; height: auto; max-width: 100%;
	border-radius: 50%; padding: 5px; box-sizing: border-box; display: block;
}
.cpp-sports-grid__img--empty { width: 90px; height: 90px; background: var(--cpp-surface); }
.cpp-sports-grid__caption {
	min-height: 55px; width: 160px; box-sizing: border-box; padding: 5px;
	display: flex; align-items: center; justify-content: center;
	font: 400 1.0625rem/1.3125rem 'Roboto', sans-serif; color: #4c4c50;
}
.cpp-sports-grid__link:hover .cpp-sports-grid__caption { color: var(--cpp-green); }
.cpp-sports-grid__empty { color: var(--cpp-grey); font-style: italic; }
/* Narrow screens: let the cards share the width evenly instead of leaving a ragged right edge. */
@media (max-width: 43.75em) {
	.cpp-sports-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.cpp-sports-grid__item, .cpp-sports-grid__caption { width: auto; }
}

/* ---------- Prémio Científico ---------- */
/* The source shows the entry state as a centred bold line above the description, and indents the
   participation conditions two levels (a./b. then i. then 1./2.). */
.cpp-premio-status {
	text-align: center; font-weight: 700; font-size: 1.125rem; color: var(--cpp-red);
	background: var(--cpp-surface); border-radius: 4px; padding: 12px 16px; margin: 0 0 24px;
	max-width: 741px;
}
.cpp-premio-cond { margin: 0 0 10px; }
.cpp-premio-cond.cpp-premio-l1 { padding-left: 24px; }
.cpp-premio-cond.cpp-premio-l2 { padding-left: 48px; }
@media (max-width: 43.75em) {
	.cpp-premio-cond.cpp-premio-l1 { padding-left: 14px; }
	.cpp-premio-cond.cpp-premio-l2 { padding-left: 28px; }
}

/* ---------- Index pages: no publication date ---------- */
/* A page whose body is just an index (the modality grid or the section list) is furniture, not an
   article: the source shows no date on these, and a "16 Set 2026" above a list of sports reads as
   if the list itself were news. :has() is the whole support story here — where it is missing the
   only consequence is that the date stays visible. */
.cpp-interior:has(.cpp-sports-grid) .cpp-page-date,
.cpp-interior:has(.cpp-photo-grid) .cpp-page-date,
.cpp-interior:has(.cpp-athletes) .cpp-page-date,
.cpp-interior:has(.cpp-sitemap) .cpp-page-date,
.cpp-interior:has(.cpp-section-links) .cpp-page-date { display: none; }

/* An index block uses the whole 1170 frame, not the 741px prose column: the source's modality
   grid is six cards wide, and capping it at the reading width squeezes it to three. Scoped with
   :has() so ordinary article text keeps its measure. */
.cpp-interior-prose:has(.cpp-sports-grid),
.cpp-interior-prose:has(.cpp-photo-grid),
.cpp-interior-prose:has(.cpp-athletes),
.cpp-interior-prose:has(.cpp-sitemap),
.cpp-interior-prose:has(.cpp-section-links) { max-width: none; }

/* ---------- Fotografias (galeria) ---------- */
/* The source shows three album cards per row with a cover photo and a caption. The albums
   themselves are empty on the live source site, so these are presented as photographs rather
   than as links to nothing — see tools/migrate/fix-galeria.mjs for the evidence. */
.cpp-photo-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px; margin: 16px 0 48px;
}
.cpp-photo-grid__item { margin: 0; }
.cpp-photo-grid__item img {
	width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
	border-radius: 4px; background: var(--cpp-surface);
}
.cpp-photo-grid__item figcaption {
	margin-top: 10px; font: 500 1rem/1.375rem 'Roboto', sans-serif; color: var(--cpp-text);
}
/* cpp/photo-gallery (2026-10-12): the same grid, now a list of cards from the Fotografias records.
   The whole photo + title is the link; date and event sit under it in the muted grey. */
.cpp-photo-cards, .cpp-interior-prose ul.cpp-photo-cards { list-style: none; padding: 0; max-width: none; margin: 16px 0 48px; }
.cpp-interior-prose ul.cpp-photo-cards > li { margin: 0; padding: 0; }
.cpp-photo-card { margin: 0; }
.cpp-photo-card__link { display: block; color: var(--cpp-text); text-decoration: none; }
.cpp-photo-card__img {
	width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block;
	border-radius: 4px; background: var(--cpp-surface); transition: opacity .15s ease;
}
.cpp-photo-card__link:hover .cpp-photo-card__img { opacity: .85; }
.cpp-photo-card__title { display: block; margin-top: 10px; font: 500 1rem/1.375rem 'Roboto', sans-serif; }
.cpp-photo-card__link:hover .cpp-photo-card__title { color: var(--cpp-green); text-decoration: underline; }
.cpp-photo-card__link:focus-visible { outline: 3px solid var(--cpp-green); outline-offset: 3px; }
.cpp-photo-card__meta { margin: 4px 0 0; font-size: .875rem; color: var(--cpp-text-muted); }
.cpp-photo-pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 48px; }

/* A photo's own page (single-photo.html, cpp/photo-details). */
.cpp-photo-detail__figure { margin: 0 0 12px; }
.cpp-photo-detail__img { display: block; width: 100%; max-width: 1024px; height: auto; border-radius: 4px; }
.cpp-photo-detail__meta { margin: 0 0 20px; color: var(--cpp-text-muted); }
.cpp-photo-detail__meta a { color: var(--cpp-green); }
.cpp-photo-detail__desc { max-width: 741px; margin: 0 0 24px; }
@media (max-width: 56.25em) { .cpp-photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 37.5em) { .cpp-photo-grid { grid-template-columns: 1fr; } }

/* ---------- Atletas (blocks/athletes-grid) ---------- */
/* Matched to the source's .thl-filter-box + .card-group (web-cpp-theme/css/main.css, measured
   2026-09-16): a green filter bar, then four white cards per row with a 240px photo, the name at
   1.7rem and the modality at 1.5rem in #4c4c50. The source's rem values are written out in px
   because it sets html{font-size:62.5%} and this theme does not. */
.cpp-athletes { margin: 16px 0 48px; }
.cpp-athletes__filter {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px;
	padding: 20px; background: var(--cpp-green); color: #fff; border-radius: 4px;
}
.cpp-athletes__label { font: 400 1.5625rem/1.2 'Roboto', sans-serif; padding-right: 13px; white-space: nowrap; }
.cpp-athletes__select {
	font: 400 1rem/1.4 'Roboto', sans-serif; padding: 8px 12px; min-width: 240px; max-width: 100%;
	border: 1px solid #fff; border-radius: 3px; background: #fff; color: var(--cpp-text); cursor: pointer;
}
/* F-15: the live count that announces a filter change. It is real, visible text — a count is
   useful to everyone, and a visually-hidden status is the kind of thing that silently rots. */
.cpp-athletes__count {
	margin: 12px 0 0; text-align: center;
	font: 400 1rem/1.4 'Roboto', sans-serif; color: var(--cpp-text-muted);
}
.cpp-athletes__grid {
	list-style: none; margin: 20px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.cpp-athletes__item { list-style: none; margin: 0; }
.cpp-athletes__link {
	display: block; height: 100%; background: #fff; color: #4c4c50; text-decoration: none;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2); transition: box-shadow .3s ease, transform .3s ease;
}
.cpp-athletes__link:hover, .cpp-athletes__link:focus-visible {
	box-shadow: 0 6px 16px 0 rgba(0, 0, 0, .28); transform: translateY(-2px);
}
.cpp-athletes__photo { display: block; width: 100%; height: 240px; overflow: hidden; background: var(--cpp-surface); }
.cpp-athletes__photo img { width: 100%; height: 240px; object-fit: cover; display: block; }
.cpp-athletes__body { display: block; padding: 2px 16px 16px; }
.cpp-athletes__name {
	display: block; font: 700 1.0625rem/1.25rem 'Roboto', sans-serif; color: #4c4c50;
	margin-top: 15px; padding-top: 8px;
}
.cpp-athletes__sport { display: block; font: 400 0.9375rem/1.25rem 'Roboto', sans-serif; color: #4c4c50; padding-bottom: 8px; }
.cpp-athletes__link:hover .cpp-athletes__name { color: var(--cpp-green); }
.cpp-athletes__none, .cpp-athletes__empty { color: var(--cpp-grey); font-style: italic; margin: 24px 0; }
@media (max-width: 68.75em) { .cpp-athletes__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 51.25em)  { .cpp-athletes__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 35em)  {
	/* Two columns, not one: a 42-athlete roster one card per row is an extremely long scroll, and
	   the portrait is still legible at half a phone's width. */
	.cpp-athletes__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.cpp-athletes__photo, .cpp-athletes__photo img { height: 170px; }
	.cpp-athletes__body { padding: 2px 10px 12px; }
	.cpp-athletes__name { font-size: 0.9375rem; line-height: 19px; margin-top: 10px; padding-top: 6px; }
	.cpp-athletes__sport { font-size: 0.8125rem; line-height: 18px; }
	.cpp-athletes__filter { flex-direction: column; align-items: stretch; text-align: center; }
	.cpp-athletes__label { padding-right: 0; font-size: 1.25rem; }
}

/* Athlete profile: the results table migrated from the source's "Competições" tab. */
.cpp-athlete-results { border-collapse: collapse; width: 100%; max-width: 741px; margin: 0 0 24px; }
.cpp-athlete-results th {
	background: var(--cpp-green); color: #fff; text-align: center; font-weight: 700;
	padding: 8px 10px; border: 1px solid #669900;
}
/* Each cell holds one line per participation (the source stacks them and lines the columns up by
   eye), so the lines need room to breathe and the first column carries the reading weight. */
.cpp-athlete-results td {
	padding: 10px 12px; border: 1px solid #669900; vertical-align: top;
	font: 400 1rem/1.7 'Roboto', sans-serif;
}
.cpp-athlete-results td:first-child { font-weight: 500; }
.cpp-athlete-results tr:nth-child(even) td { background: rgba(102, 153, 0, .05); }
@media (max-width: 43.75em) {
	/* Let the table scroll sideways instead of squeezing "1.º Lugar" onto three lines. The cells
	   already carry their own line breaks, so nowrap only stops the squeeze. */
	.cpp-athlete-results { display: block; overflow-x: auto; }
	.cpp-athlete-results td, .cpp-athlete-results th { white-space: nowrap; }
	.cpp-athlete-results td { font-size: 0.9375rem; padding: 8px 10px; }
}

/* Related athletes at the foot of a profile: the same cards, smaller, and never one per row on a
   phone — four full-width portraits turned the end of every profile into a long scroll. */
.cpp-athletes--compact .cpp-athletes__grid { gap: 16px; margin-top: 8px; }
.cpp-athletes--compact .cpp-athletes__photo,
.cpp-athletes--compact .cpp-athletes__photo img { height: 180px; }
.cpp-athletes--compact .cpp-athletes__name { font-size: 0.9375rem; margin-top: 10px; }
.cpp-athletes--compact .cpp-athletes__sport { font-size: 0.8125rem; }
@media (max-width: 35em) {
	.cpp-athletes--compact .cpp-athletes__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.cpp-athletes--compact .cpp-athletes__photo,
	.cpp-athletes--compact .cpp-athletes__photo img { height: 150px; }
}

/* ---------- Mapa do site (blocks/sitemap) ---------- */
.cpp-sitemap { margin: 16px 0 48px; }
.cpp-sitemap__list,
.cpp-interior-prose .cpp-sitemap__list { list-style: none; margin: 0; padding: 0; }
.cpp-sitemap__list > li,
.cpp-interior-prose .cpp-sitemap__list > li { list-style: none; }
.cpp-sitemap__list--0 { columns: 2; column-gap: 48px; }
.cpp-sitemap__list--0 > li { break-inside: avoid; margin: 0 0 28px; }
.cpp-sitemap__list--0 > li > a,
.cpp-sitemap__list--0 > li > span {
	display: block; font: 700 1.125rem/1.5rem 'Roboto', sans-serif; color: var(--cpp-red);
	text-decoration: none; margin-bottom: 8px;
}
.cpp-sitemap__list--1, .cpp-sitemap__list--2 { padding-left: 18px; }
.cpp-sitemap__list--1 > li, .cpp-sitemap__list--2 > li { margin: 0 0 4px; }
.cpp-sitemap__list--1 > li > a, .cpp-sitemap__list--2 > li > a {
	font: 400 1rem/1.5rem 'Roboto', sans-serif; color: var(--cpp-text); text-decoration: none;
}
.cpp-sitemap__list--2 > li > a { font-size: 0.9375rem; color: var(--cpp-text-muted); }
.cpp-sitemap a:hover, .cpp-sitemap a:focus-visible { color: var(--cpp-green); text-decoration: underline; }
.cpp-sitemap__empty { color: var(--cpp-grey); font-style: italic; }
@media (max-width: 43.75em) { .cpp-sitemap__list--0 { columns: 1; } }

/* ---------- Agenda page + event page ---------- */
.cpp-events-heading { font: 700 1.375rem/1.3 'Roboto', sans-serif; color: var(--cpp-red); margin: 32px 0 12px; text-transform: none; }
.cpp-events-year { font: 700 1.125rem/1.3 'Roboto', sans-serif; color: var(--cpp-text-muted); margin: 26px 0 10px; text-transform: none; }
.cpp-events-list .cpp-event-card { border: 1px solid var(--cpp-border); margin-bottom: 14px; }
.cpp-event-details { margin: 20px 0 28px; max-width: 741px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; }
.cpp-event-details dt { font-weight: 700; color: var(--cpp-green); }
.cpp-event-details dd { margin: 0; color: var(--cpp-text); }
.cpp-event-details a { color: var(--cpp-link-blue); }
@media (max-width: 37.5em) { .cpp-event-details { grid-template-columns: 1fr; gap: 2px 0; } .cpp-event-details dd { margin-bottom: 8px; } }
.cpp-event-kicker { margin: 0 0 4px; font: 700 0.8125rem/1.2 'Roboto', sans-serif; color: var(--cpp-green); text-transform: uppercase; letter-spacing: .08em; }
.cpp-event-kicker a { color: inherit; text-decoration: none; }
.cpp-event-kicker a:hover { text-decoration: underline; }
.cpp-interior:has(.cpp-event-details) .cpp-page-date { display: none; }
.cpp-events-filter { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.cpp-events-filter label { font-weight: 700; color: var(--cpp-text); }
.cpp-events-count { margin: 0 0 0 auto; font-size: 0.9375rem; color: var(--cpp-text-muted); }   /* F-15 */
.cpp-events-year-select { font: 400 1rem/1.4 'Roboto', sans-serif; padding: 7px 12px; border: 1px solid var(--cpp-border); border-radius: 3px; background: #fff; color: var(--cpp-text); cursor: pointer; }

/* ---------- Revista reader (blocks/revista-reader + PDF.js) ---------- */
/* The publication template is a `constrained` group, so the reader opts out of the 780px cap the
   same way the agenda does — a magazine page is unreadable at reading-column width. */
.wp-block-group .cpp-reader { max-width: var(--wp--style--global--wide-size, 1170px) !important; width: 100%; margin: 28px auto 0; }
.cpp-reader {
	border: 1px solid var(--cpp-border); border-radius: 4px; overflow: hidden; background: #fff;
}
.cpp-reader__bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
	padding: 10px 14px; background: var(--cpp-green); color: #fff;
}
.cpp-reader__group { display: flex; align-items: center; gap: 6px; }
.cpp-reader__group--search { flex: 1 1 200px; min-width: 0; }
.cpp-reader__btn {
	appearance: none; border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #fff;
	border-radius: 3px; cursor: pointer; padding: 6px 10px; min-width: 34px;
	font: 500 0.9375rem/1.2 'Roboto', sans-serif; text-decoration: none; text-align: center;
}
.cpp-reader__btn--wide { padding: 6px 14px; }
.cpp-reader__btn:hover, .cpp-reader__btn:focus-visible { background: rgba(255, 255, 255, .18); }
.cpp-reader__btn[aria-pressed="true"] { background: #fff; color: var(--cpp-green); }
.cpp-reader__pages { display: flex; align-items: center; gap: 6px; font: 500 0.9375rem/1.2 'Roboto', sans-serif; }
.cpp-reader__page {
	width: 3.5em; padding: 5px 6px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 3px;
	background: rgba(255, 255, 255, .12); color: #fff; font: 500 0.9375rem/1.2 'Roboto', sans-serif; text-align: center;
}
.cpp-reader__find {
	flex: 1 1 auto; min-width: 0; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 3px; background: #fff; color: var(--cpp-text); font: 400 0.9375rem/1.2 'Roboto', sans-serif;
}
.cpp-reader__findinfo { font-size: 0.8125rem; opacity: .9; white-space: nowrap; }
.cpp-reader__stage { position: relative; background: #e9e9ea; }
.cpp-reader__viewerContainer {
	position: absolute; inset: 0; overflow: auto;
}
.cpp-reader__stage { height: 78vh; min-height: 460px; }
.cpp-reader:fullscreen .cpp-reader__stage { height: calc(100vh - 56px); }
.cpp-reader__status {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font: 400 1rem/1.4 'Roboto', sans-serif; color: var(--cpp-text-muted); z-index: 2; background: #e9e9ea;
}
/* `display` set by a class beats the browser's own `[hidden] { display: none }`, so the overlay has
   to be told to go: without this it stays as an opaque grey sheet over the pages once they load. */
.cpp-reader__status[hidden] { display: none !important; }
.cpp-reader.is-error .cpp-reader__status { color: var(--cpp-red); }
.cpp-reader__noscript { padding: 16px; margin: 0; }
/* PDF.js paints each page into .page; give them room and a card edge like a printed sheet. */
.cpp-reader .pdfViewer .page { margin: 14px auto; border: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
@media (max-width: 43.75em) {
	.cpp-reader__bar { gap: 6px 10px; padding: 8px 10px; }
	.cpp-reader__btn { padding: 6px 8px; font-size: 0.875rem; }
	.cpp-reader__btn--wide { padding: 6px 10px; }
	/* A two-page spread on a 390px screen is two unreadable pages, and the button costs a whole
	   toolbar row that the reading area needs more. */
	.cpp-reader__btn[data-act="spread"] { display: none; }
	.cpp-reader__stage { height: 68vh; min-height: 380px; }
}

/* ==========================================================================
   AMA checklists — measured 2026-10-09 (docs/cpp/accessibility-assessment-2026-10.md)
   «Conteúdo» 2.3 lines ≤ 100 characters · 2.4 line spacing ≥ 1.5 ·
   5.2 interactive elements ≥ 44 × 44 CSS px. Hit areas grow; what you see does not.
   ========================================================================== */

/* 2.4 — the three places measured below 1.5 */
.cpp-video-title, .cpp-revista-title { line-height: 1.5; }
.cpp-la28__text { line-height: 1.5; }
.cpp-interior .wp-block-post-content p,
.cpp-interior .wp-block-post-content li { line-height: 1.5; }

/* 2.3 — body text at the full 1 140 px column ran to 105–126 characters a line */
.cpp-interior .wp-block-post-content > p,
.cpp-interior .wp-block-post-content > ul,
.cpp-interior .wp-block-post-content > ol,
.cpp-onde__note p,
.wp-block-post-excerpt__excerpt { max-width: 80ch; }
.wp-block-group > .cpp-intro-text.has-text-align-center { max-width: 80ch; margin-inline: auto; }

/* 5.2 — hero dots (the other carousels already use 44 px squares, as on the old site):
   a 44 px button that draws the same 11 px dot */
.cpp-hero-carousel .cpp-carousel-dots { gap: 0; }
.cpp-hero-carousel .cpp-carousel-dot { position: relative; width: 44px; height: 44px; background: transparent; border-radius: 0; }
.cpp-hero-carousel .cpp-carousel-dot::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px;
	margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: rgba(255,255,255,.6);
}
.cpp-hero-carousel .cpp-carousel-dot[aria-current="true"] { background: transparent; }
.cpp-hero-carousel .cpp-carousel-dot[aria-current="true"]::before { background: #fff; }
.cpp-hero-carousel .cpp-carousel-dot:focus-visible { outline-offset: -8px; }

/* 5.2 — buttons and controls that were 30–40 px tall */
.cpp-btn-outline,
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers,
.cpp-cookie-accept { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.cpp-cal-nav { min-width: 44px; min-height: 44px; }
.cpp-onde__select { height: 44px; }

/* 5.2 — footer links: a taller hit box with negative margins, so the footer keeps its layout */
.cpp-footer-links li a, .cpp-footer-contacts a {
	display: inline-block; padding-block: 12px; margin-block: -12px;
}

/* Search label, visible (inc/accessibility.php; AccessMonitor `labelPosNo`). In the top bar it sits
   left of the field, in the bar's own text style; elsewhere core's label layout applies. */
.cpp-search .cpp-search-label {
	margin: 0 10px 0 0; font: 400 0.875rem/1 'Roboto', sans-serif; color: #4c4c50; white-space: nowrap;
}
.cpp-search.wp-block-search { margin-left: 25px; }

/* Search results (ARTE Transação 3.2 / 4.3, 2026-10-09): the count under the title, the error under
   the field when the query was blank. Same type and colours as the page text. */
.cpp-search-count { margin: 0 0 1.5rem; font-size: 1rem; color: #4c4c50; }
.cpp-search-error { margin: .5rem 0 1.5rem; font-size: 1rem; color: #D90000; }
main .wp-block-search__input[aria-invalid="true"] { border-color: #D90000; }

/* ================================================================================================
   ARTE checklists "Conteúdo" and "10 aspetos funcionais", 2026-10-09 (docs/cpp/selo-2026/checklists).
   Appended in one block so each rule says which item it answers.
   ============================================================================================== */

/* 10 aspetos 1.2 / Conteúdo 5.2 — on a phone the pause button sat over the «Menu» button (a tap on
   «Menu» paused the carousel). Bottom-left is free: the arrows are centred, the dots are hidden here. */
@media (max-width: 48.8125em) {
	.cpp-carousel-pause { width: 44px; height: 44px; top: auto; right: auto; bottom: 0.35rem; left: 0.35rem; }
	.cpp-hero-carousel .cpp-carousel-dots { display: none; }  /* 20 × 44 px cannot fit 390 px; arrows + pause do the job */
	.cpp-navbar-inner > .cpp-mobile-toggle { width: 44px; min-width: 44px; }
	.cpp-primary-nav-wrap.is-open .cpp-primary-nav .wp-block-navigation-item__content,
	.cpp-primary-nav-wrap.is-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding-block: 12px; min-height: 44px; }
}

/* Conteúdo 5.2 — the remaining controls under 44 px */
.cpp-reader__btn { min-width: 44px; min-height: 44px; }
.cpp-reader__page, .cpp-reader__find { min-height: 44px; box-sizing: border-box; }
.cpp-events-year-select { min-height: 44px; }
.cpp-article .cpp-article-cat a,
.cpp-athlete-hero__program a { display: inline-block; padding-block: 14px; margin-block: -14px; }

/* Conteúdo 3.3 — a link is told apart by more than its colour, and text links share one colour */
.cpp-footer-contacts a { text-decoration: underline; text-underline-offset: 2px; }
main .wp-block-post-content :is(p, li, td, dd) > a:not([class]),
.cpp-onde p > a:not([class]) { color: var(--cpp-link-blue); text-decoration: underline; }

/* Conteúdo 1.3 — every page shows its update date, index pages included, at the same 14 px */
.cpp-page-date { font-size: 0.875rem; }
body .cpp-interior:has(.cpp-sports-grid) .cpp-page-date,
body .cpp-interior:has(.cpp-photo-grid) .cpp-page-date,
body .cpp-interior:has(.cpp-athletes) .cpp-page-date,
body .cpp-interior:has(.cpp-sitemap) .cpp-page-date,
body .cpp-interior:has(.cpp-section-links) .cpp-page-date { display: block; }
.cpp-site-updated { margin: 6px 0 0; color: #fff; font-size: 0.875rem; line-height: 1.5; }

/* Conteúdo 2.1 — body text at 16 px everywhere (theme.json's 16 px became a fluid 14–16 px clamp) */
.wp-block-post-content { font-size: 1rem; }
.cpp-person__role, .cpp-athletes__sport { font-size: 1rem; }
.cpp-athlete-hero__fact dt { font-size: 1rem; letter-spacing: .04em; }
@media (max-width: 48.8125em) {
	.cpp-athletes__name, .cpp-athletes--compact .cpp-athletes__name { font-size: 1rem; }
	.cpp-athletes__sport { font-size: 1rem; }
}

/* Conteúdo 2.2 — secondary text at 14 px (≥ 10 pt) */
.cpp-event-month, .cpp-cookie-bar { font-size: 0.875rem; }

/* Conteúdo 2.3 — at 80ch Roboto still fitted ~102 characters; 72ch keeps lines under 100 */
.cpp-interior .wp-block-post-content > p,
.cpp-interior .wp-block-post-content > ul,
.cpp-interior .wp-block-post-content > ol,
.cpp-interior .wp-block-post-content .mr p,
.cpp-onde__note p,
.wp-block-post-excerpt__excerpt { max-width: 72ch; }
.cpp-club p { max-width: 72ch; }

/* Conteúdo 2.4 — line height 1.5 */
.cpp-la28__sub, .cpp-la28__eyebrow { line-height: 1.5; }
.cpp-person__name, .cpp-person__role { line-height: 1.5; }
.cpp-athlete-hero__fact dt, .cpp-athlete-hero__fact dd { line-height: 1.5; }
.cpp-athletes__name, .cpp-athletes__sport { line-height: 1.5; }

/* 10 aspetos 6.1 — role labels were #808080 on white, 3.95:1 */
.cpp-person__role { color: #595959; }

/* Conteúdo 1.2 — a defined term shows that it is defined */
abbr[title] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }

/* Conteúdo 4.1 — "Nesta página" index on long pages (inc/content-a11y.php) */
.cpp-toc { margin: 0 0 2rem; padding: 16px 20px; background: #f5f5f5; border-left: 4px solid var(--cpp-green); max-width: 72ch; }
.cpp-toc__title { margin: 0 0 8px; font-weight: 700; }
.cpp-toc ol { margin: 0; padding-left: 1.25rem; }
.cpp-toc li { margin: 4px 0; line-height: 1.5; }
.cpp-toc a { color: var(--cpp-link-blue); text-decoration: underline; }

/* Second pass, after the re-run of "Conteúdo" (2026-10-09 15:45) */
footer.has-neutral-700-background-color .cpp-footer-contacts a { text-decoration: underline; text-underline-offset: 2px; }  /* 3.3: the footer rule above out-ranked .cpp-footer-contacts a */
.cpp-athletes--compact .cpp-athletes__name, .cpp-athletes--compact .cpp-athletes__sport { font-size: 1rem; }               /* 2.1/2.2 */
.cpp-athlete-hero__program, .cpp-athlete-hero__program a { font-size: 1rem; line-height: 1.5; }                             /* 2.1/2.4 */
.cpp-toc a { display: inline-block; padding-block: 12px; margin-block: -8px; }                                             /* 5.2: index links 44 px tall */
@media (max-width: 48.8125em) {
	.cpp-news-carousel .cpp-carousel-dots, .cpp-destaques-carousel .cpp-carousel-dots { display: none; }                   /* 5.2: 20 × 44 px dots shrink to 11.8 px; the arrows remain */
}