:root {
	--cpp-font-scale: 1;
	--cpp-green: #00833E;
	--cpp-green-dark: #016530;
	--cpp-green-light: #E8F3EB;
	--cpp-blue: #0077B3;
	--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;
}
:focus-visible { outline: 2px solid var(--cpp-gold); outline-offset: 2px; }

/* ---------- 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; }
.cpp-cookie-inner a { color: var(--cpp-green); }
.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: 700px) { .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 icon (single icon → /acessibilidade/). Native core/image, but the
   <img> is hidden and the glyph is painted by a CSS background on the link, matching
   source (icon_contrast.svg at background-size 70% inside a 44×44 box). */
.cpp-access { display: flex; align-items: center; }
.cpp-access a {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0;
	background: url(../images/icon_contrast.svg) center/70% no-repeat;
}
.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;
	border: 1px solid #e2e2e2; border-right: 0; border-radius: 0;
	font-family: 'Roboto', sans-serif; font-size: 14px; 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: #00833e; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase;
}
.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). */
/* Native core/group of core/image links: div.cpp-social > figure.cpp-social-item.cpp-social-{net} > a > img.
   The <img> is hidden; each link paints the coloured glyph via background-image and swaps to a
   white-on-brand glyph on hover (source model). */
.cpp-social { display: flex; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; align-self: stretch; }
.cpp-social .cpp-social-item { display: flex; margin: 0; }
.cpp-social .cpp-social-item img { display: none; }
.cpp-social-item a {
	display: block; width: 45px; height: 60px;
	background-position: center; background-repeat: no-repeat; background-size: 28px;
	transition: background-color .15s ease;
}
.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_twitter.svg); }
.cpp-social-youtube a   { background-image: url(../images/icon_youtube.svg); }
.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: #10dffd; background-image: url(../images/icon_twitter_white.svg); }
.cpp-social-youtube a:hover   { background-color: #e31010; background-image: url(../images/icon_youtube_white.svg); }

/* 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; }

/* 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;
}
.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: 14px; }
.cpp-primary-nav .wp-block-navigation__container { align-items: stretch; gap: 0 !important; flex-wrap: nowrap; }
.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: 14px; 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: 17px; 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;
}
/* 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-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: 980px) {
	.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: 14px; 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: 15px; 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; }
}

@media (max-width: 700px) {
	.cpp-topbar-tools { gap: 14px; }
	.cpp-search input[type="search"] { min-width: 130px; }
	.cpp-logo-box { left: 15px; width: 150px; height: 90px; }
	.cpp-logo-link, .cpp-logo-box img { width: 145px; }
}

/* ---------- 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: 25px;
	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: 14px; }
.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%;
	background: rgba(0,0,0,0.3); 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; }
.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: 35px;
	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: 781px) {
	.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: 22px; 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: 31.5px; line-height: 40px;
	font-weight: 700; color: #4c4c50; margin: 10px 0; text-transform: none;
}
.cpp-intro .cpp-intro-text {
	font-size: 16px; 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: 35px;
	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: 14px; margin: 0 0 0.4rem; }
.cpp-news-body h3 {
	margin: 0 0 0.9rem; font-family: 'Roboto', sans-serif;
	font-size: 17px; 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: 16px; 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: 17px; 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) ---------- */
.cpp-agenda-cal { max-width: 540px; margin: 0 auto; background: #fff; border-radius: 4px; padding: 1.25rem 1.5rem 1.5rem; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
/* Month head: full-width GREEN bar, white uppercase Roboto 14/700. */
.cpp-cal-head {
	text-align: center; font-family: 'Roboto', sans-serif; text-transform: uppercase;
	letter-spacing: 0.02em; background: var(--cpp-green); color: #fff;
	font-size: 14px; font-weight: 700; padding: 10px 0; margin: -1.25rem -1.5rem 0.75rem;
}
.cpp-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Weekday headers: green Roboto 14/700. */
.cpp-calendar th { font-size: 14px; text-transform: none; color: var(--cpp-green); padding: 0.4rem 0; font-weight: 700; font-family: 'Roboto', sans-serif; }
.cpp-calendar td { text-align: center; padding: 0.5rem 0; height: 50px; font-size: 14px; color: var(--cpp-text); }
/* Today: pale-blue filled circle highlight (source rgba(154,214,227,.41), 50%). */
.cpp-calendar td.cpp-cal-today {
	background: rgba(154, 214, 227, 0.41); border-radius: 50%;
}
/* Adjacent (prev/next-month) days: faded #EEE bg, grey number. */
.cpp-calendar td.cpp-cal-adjacent { background: #eeeeee; color: var(--cpp-grey); }
.cpp-agenda-link { display: block; text-align: center; margin-top: 1rem; color: var(--cpp-green); font-weight: 600; text-decoration: none; }
.cpp-agenda-link:hover { text-decoration: underline; }

/* ---------- 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: 17px; 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: 18px; 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; }

@media (max-width: 781px) {
	.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: 22px;
	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: 781px) {
	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;
}

/* ---------- High contrast mode ---------- */
html.cpp-high-contrast { background: #000 !important; }
html.cpp-high-contrast body, html.cpp-high-contrast main, html.cpp-high-contrast article, html.cpp-high-contrast section { background: #000 !important; color: #fff !important; }
html.cpp-high-contrast a { color: var(--cpp-gold) !important; text-decoration: underline; }
html.cpp-high-contrast h1, html.cpp-high-contrast h2, html.cpp-high-contrast h3, html.cpp-high-contrast h4, html.cpp-high-contrast h5, html.cpp-high-contrast h6 { color: #fff !important; }
html.cpp-high-contrast .cpp-section-title { color: #fff !important; }
html.cpp-high-contrast .cpp-section-title::after { background: var(--cpp-gold); }
html.cpp-high-contrast .wp-block-button .wp-block-button__link { background: var(--cpp-gold) !important; color: #000 !important; border-color: var(--cpp-gold) !important; }
html.cpp-high-contrast :focus-visible { outline: 3px solid var(--cpp-gold) !important; outline-offset: 3px; }

/* ---------- 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: 31.5px;
	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: 14px;
	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: 22px;
	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: 18px;
	font-weight: 700;
	line-height: 40px;
	margin: 10px 0;
}

.cpp-interior-prose p {
	font-size: 16px;
	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: 16px;
	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: 14px; 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: 17px; 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: 15px; 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: 14px; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.cpp-article .cpp-article-date { font-size: 14px; 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: 14px; 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: 768px) {
	.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: 1024px) and (min-width: 769px) {
	.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) --------------------------- */
.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: 16px;
	line-height: 1.5;
	color: var(--cpp-text);
}