/**
 * DS—Camoes Main Styles
 * Base mobile-first styles (0-767px)
 */


/*
——————————————————————————————————————————
CSS VARIABLES
——————————————————————————————————————————
*/

:root {
	/* Colors */
	--K-base:	 	 	#FFFFFF;
	--K-base-ink:     	#000000;
	--K-negative:		#000000;
	--K-negative-ink:	#FFFFFF;
	--K-accent:  		#0000FF;
	--K-accent-ink:		#FFFFFF;
	--K-muted:   		#767676;
	
	/* Font Families */
	--FF01: "EasyGrotesk", sans-serif;
	--FF02: var(--FF01);
	
	/* Font sizes */
	--FS00: 0.85rem; /* 14px */
	--FS01: 1.00rem; /* 16px */
	--FS02: 1.25rem; /* 20px */
	--FS03: 1.50rem; /* 24px */
	--FS04: 2.00rem; /* 32px */
	--FS05: 2.25rem; /* 36px */
	--FS06: 2.50rem; /* 40px */
	--FS07: 3.00rem; /* 48px */
	--FS08: 4.00rem; /* 64px */
	--FS09: 5.00rem; /* 80px */
	--FS10: 6.00rem; /* 96px */

	/* Sizes */
	--S00: 0.50rem; /*  8px */
	--S01: 1.00rem; /* 16px */
	--S02: 1.25rem; /* 20px */
	--S03: 1.50rem; /* 24px */
	--S04: 2.00rem; /* 32px */
	--S05: 2.50rem; /* 40px */
	--S06: 3.00rem; /* 48px */
	--S07: 4.00rem; /* 64px */
	--S08: 5.00rem; /* 80px */
	--S09: 6.00rem; /* 96px */
	--S10: 7.00rem; /* 112px */
	--S11: 8.00rem; /* 128px */

	--TopBar: 48px;

	/* Grids */
	--G01: repeat(11, 1fr);
	--G02: repeat(12, 1fr);
	
	/* Aceleration & Transitions */
	--A01: 0.2s ease;
	--A02: 0.3s ease;
	--A03: 0.5s ease;
	--A04: 10.0s ease;
}

/*
——————————————————————————————————————————
GLOBAL RESET & BASE STYLES
——————————————————————————————————————————
*/

*														{ box-sizing: border-box; }
*:not(p)												{ margin: 0; padding: 0; }
img 													{ max-width: 100%; height: auto; display: block; }
a 														{ color: var(--K-base-ink); text-decoration: none;}
a:hover 												{ color: var(--K-base-ink); text-decoration: underline; }
p:first-child											{ margin-top: 0; }
p:last-child											{ margin-bottom: 0; }


/*
——————————————————————————————————————————
TYPOGRAPHY
——————————————————————————————————————————
*/

/* FONT FAMILIES */
body, .archive-filter__select							{ font-family: var(--FF01); font-weight: 400; }

/* FONT SIZES & VARIANTS */
body 													{ font-size: var(--FS01); line-height: 1.50em; }

h1, h2, h3, h4, h5, h6									{ text-box: trim-both cap alphabetic; }

h1 														{ font-size: var(--FS08); line-height: 1.30em; font-weight: 400; }
h2 														{ font-size: var(--FS05); line-height: 1.30em; font-weight: 400; }
h3 														{ font-size: var(--FS04); line-height: 1.30em; font-weight: 400; }
h4 														{ font-size: var(--FS03); line-height: 1.30em; font-weight: 400; }
h5 														{ font-size: var(--FS02); line-height: 1.40em; font-weight: 400; }
h6 														{ font-size: var(--FS01); line-height: 1.40em; font-weight: 400; }

.site-branding *										{ font-size: var(--FS02); line-height: 1.20em; font-weight: 400; letter-spacing: 0.02em;  text-box: none; }

.main-navigation 										{ font-size: var(--FS02); line-height: 1.00em; font-weight: 500; }
.main-navigation .sub-menu								{ font-weight: 400; }

.lang-switcher                 							{ font-size: var(--FS00); line-height: 1.00em; font-variant-numeric: tabular-nums; }

.text-small 											{ font-size: var(--FS00); line-height: 1.00em; }
.text-featured 											{ font-size: var(--FS01); line-height: 1.50em; }
.text-regular 											{ font-size: var(--FS02); line-height: 1.50em; }
.text-large 											{ font-size: var(--FS04); line-height: 1.30em; }

.eyebrow 												{ font-size: var(--FS00); line-height: 1.50em; letter-spacing: 0.05em; text-transform: uppercase; }

.link-regular 											{ font-size: var(--FS01); line-height: 1.00em; font-weight: 500; letter-spacing: 0.02em; }
.bt-regular 											{ font-size: var(--FS01); line-height: 1.00em; font-weight: 400; letter-spacing: 0.02em; }
.bt-round 												{ font-size: var(--FS01); line-height: 1.00em; font-weight: 400; }

.archive-filter-block,
.archive-filter-toggle::before							{  font-size: var(--FS03); line-height: 1.00em; }

/*
——————————————————————————————————————————
LAYOUT
——————————————————————————————————————————
*/

body 													{ width: 100%; height: 100%; margin: 0; padding: 0; background: var(--K-base); color: var(--K-base-ink); display: flex; flex-direction: column; }

.site-bar												{ width: 100%; height: var(--TopBar); margin: 0; padding: 0 var(--S02); position: fixed; top: 0; left: 0; background: var(--K-base); display:grid; grid-template-columns: var(--G01); gap: var(--S02); z-index: 999; }
.site-header 											{ width: 100%; height: auto; margin: 0; padding: var(--TopBar) var(--S02) var(--S04) var(--S02); display:grid; grid-template-columns: var(--G01); gap: var(--S02); }	
.site-layout 											{ width: 100%; height: auto; margin: 0 0 50vh 0; padding: 0 var(--S02); background-color: var(--K-base); display: grid; grid-template-columns: var(--G01); gap: var(--S02); position: relative; z-index: 100; }
.site-side          									{ width: 100%; height: calc(100dvh - var(--TopBar)); margin: 0; padding: 0 var(--S02) var(--S02); position: fixed; top: 0; left: 0; background: var(--K-base); visibility: hidden; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; transform: translateY(-100%); transition: transform var(--A02), visibility var(--A02) allow-discrete; z-index: 900;  }
.site-main												{ grid-column: 1 / span 12; /*border-top: solid 1px var(--K-base-ink);*/; }
.site-footer 											{ width: 100%; height: 50vh; padding: var(--S04); background: var(--K-accent); color: var(--K-accent-ink); position: fixed; bottom: 0; left: 0; z-index: 1; }

/*
——————————————————————————————————————————
HEADER & NAVIGATION
——————————————————————————————————————————
*/

/* SITE BAR */
.site-bar__left 										{ grid-column: 1 / span 4; display: flex; align-items: center; justify-content: flex-start; }
.site-bar__right 										{ grid-column: 5 / span 7; display: flex; align-items: center; justify-content: flex-start; }
.site-bar__left a 										{ color: var(--K-base-ink); text-decoration: none; }
.site-bar__left a:hover 								{ color: var(--K-base-ink); text-decoration: none; }

/* SITE HEADER */
.site-branding 											{ grid-column: 1 / span 11;  }
.site-branding a 										{ color: var(--K-base-ink); text-decoration: none; display: block; }
.site-branding a:hover 									{ color: var(--K-base-ink); text-decoration: none; }

.site-branding a span:nth-child(1) 						{ display: inline-flex; }
.site-branding a span:nth-child(2) 						{ display: inline-flex; }
.site-branding a span:nth-child(3) 						{ display: flex; }

.site-branding a span:nth-child(1)::after 				{ content: "\A"; white-space: pre; display: block; }
.site-branding a span:nth-child(2)::after 				{ content: "\A"; white-space: pre; display: block; }

/* SITE SIDE */
.site-side.toggled  									{ transform: translateY(var(--TopBar)); visibility: visible; transition: transform var(--A02), visibility 0s linear 0s; }
.site-side__top 										{ padding: var(--S02) 0 0 ; border-top: solid 1px var(--K-base-ink); }
.site-side__bottom 										{ padding: 0; }

/* PRIMARY NAVIGATION */
.main-navigation .menu                              	{ margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--S01); list-style: none; }
.main-navigation .menu > li                         	{ margin: 0; padding: 0; display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows var(--A02); }
.main-navigation .menu > li.is-open                 	{ grid-template-rows: auto 1fr; gap: var(--S01); }
.main-navigation .menu > li > a                     	{ width: 100%; align-self: start; display: flex; align-items: center; justify-content: space-between; color: var(--K-base-ink); text-decoration: none; }

.main-navigation .sub-menu                          	{ margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--S01); list-style: none; overflow: hidden; min-height: 0; }
.main-navigation .sub-menu > li                     	{ margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--S01); }
.main-navigation .sub-menu > li > a                 	{ width: 100%; padding-left: var(--S02); display: flex; align-items: center; justify-content: space-between; color: var(--K-base-ink); text-decoration: none; }
.main-navigation .menu > li.is-open .sub-menu       	{ overflow: visible; }

.main-navigation a:hover, 
.main-navigation a:focus-visible                    	{ text-decoration: none; }

.main-navigation a::after                           	{ content: ''; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; background: transparent; opacity: 0; transition: opacity var(--A01), background-color var(--A01); }
.main-navigation a:hover::after,
.main-navigation a:focus-visible::after             	{ opacity: 1; }

.main-navigation .current-menu-item > a::after,
.main-navigation .current-page-item > a::after          { opacity: 1; background-color: currentColor; }

.main-navigation .current-menu-ancestor > a::after,
.main-navigation .current-page-ancestor > a::after,
.main-navigation .current-menu-parent > a::after,
.main-navigation .current-page-parent > a::after,
.main-navigation .menu > li:has(.current-menu-ancestor, .current-page-ancestor, .current-menu-parent, .current-page-parent) > a::after        { opacity: 1; }

body.is-menu-open 										{ overflow: hidden; }
 
/* MOBILE MENU TOGGLE */
.menu-toggle 											{ width: var(--TopBar); height: var(--TopBar); background: none; border: none; cursor: pointer; padding: 0; position: fixed; top:0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; z-index: 1000; }
.menu-toggle:focus 										{ outline: 2px solid var(--K-base-ink); outline-offset: -2px; }
.menu-toggle span 										{ display: block; width: 28px; height: 2px; background: var(--K-base-ink); transform-origin: center; transition: transform var(--A02), opacity var(--A02); }

.menu-toggle.toggled span:nth-child(1)					{ transform: translateY(8px) rotate(45deg); }
.menu-toggle.toggled span:nth-child(2) 					{ opacity: 0; }
.menu-toggle.toggled span:nth-child(3) 					{ transform: translateY(-8px) rotate(-45deg); }

/* LANGUAGE SWITCHER */
.lang-switcher                       					{ padding: var(--S04) 0 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--S00); width: fit-content; font-variant-numeric: tabular-nums; }
.lang-switcher__item                 					{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--S01); color: var(--K-base-ink); text-decoration: none; }
.lang-switcher__item:hover           					{ text-decoration: none; }

/* Circle indicator — same logic as main navigation */
.lang-switcher__item::after          					{ content: ''; flex-shrink: 0; width: 12px; height: 12px; margin-left: 4px; border-radius: 50%; border: 1px solid currentColor; background: transparent; opacity: 0; transition: opacity var(--A01), background-color var(--A01); }
.lang-switcher__item:hover::after,
.lang-switcher__item:focus-visible::after				{ opacity: 1; }

/* Active language: filled circle */
.lang-switcher__item.is-active::after					{ opacity: 1; background-color: currentColor; }


/*
——————————————————————————————————————————
UI COMPONENTS
——————————————————————————————————————————
*/

.rule                                					{ width: 100%; height: 0; margin: 0; border: 0; border-top: solid 1px var(--K-base-ink); }
.rule-sticky											{ position: sticky; top: var(--TopBar); }

.link-regular 											{ color: var(--K-base-ink); text-decoration: underline; text-underline-offset: 2px; }
.link-regular:hover 									{ color: var(--K-base-ink); text-decoration: none;  }

.bt-regular												{ width: max-content; display: inline-flex; align-items: center; justify-content: center; padding: var(--S00) var(--S02); border-radius: 100px; border: solid 1px var(--K-base-ink); background-color: var(--K-base); color: var(--K-base-ink); transition: background-color var(--A01), color var(--A01), border-color var(--A01); }
.bt-regular:hover										{ background-color: var(--K-negative); color: var(--K-negative-ink); border-color: var(--K-negative); text-decoration: none; }

.bt-round												{ width: var(--S04); height: var(--S04); margin: 0; padding: 0; border-radius: var(--S04); display: inline-flex; align-items: center; justify-content: center; border: solid 1px var(--K-base-ink); background-color: var(--K-base); color: var(--K-base-ink); transition: background-color var(--A01), color var(--A01), border-color var(--A01); }
.bt-round:hover											{ background-color: var(--K-negative); color: var(--K-negative-ink); border-color: var(--K-negative); text-decoration: none; }
/*
——————————————————————————————————————————
CONTENT
——————————————————————————————————————————
*/

/* ARCHIVES */


/* PAGES */


/* Top Level Pages */
.page-root 												{ display: grid; grid-template-columns: var(--G02); gap: var(--S09) var(--S04); padding: var(--S04) 0  var(--S09) 0; }
.page-root:has(> :last-child.page-root__children ) 		{ padding-bottom: 0; }

.page-root__intro 										{ grid-column: 1 / span 8; }

.page-root__additional-texts 							{ grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--S04); }
.page-root__additional-text 							{ display:flex; flex-direction: column; gap: var(--S04); }

.page-root__children 									{ grid-column: 1 / span 12;  }
.page-root__children--base 								{ background-color: var(--K-base); color: var(--K-base-ink); /*border-top: solid 1px var(--K-base-ink);*/ }
.page-root__children--accent 							{ background-color: var(--K-accent); color: var(--K-accent-ink); }
.page-root__children-header 							{ padding: var(--S04); }

/* Sub Level Pages */
.page-branch 											{ display: grid; grid-template-columns: var(--G02); gap: var(--S09) var(--S04); padding: var(--S04) 0  var(--S09) 0; }

.page-branch__header									{ grid-column: 1 / span 8; display: flex; flex-direction: column; gap: var(--S01); }
.page-branch__main 										{ grid-column: 1 / span 8; }

.page-branch__blocks									{ grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--S09) var(--S04); }
.page-branch__block										{ display:flex; flex-direction: column; gap: var(--S04); }
.page-branch__block-image								{ width: 100%; height: auto; aspect-ratio: 16/9; margin: 0; padding: 0; }
.page-branch__block-image img							{ width: 100%; height: 100%; object-fit: cover; }

/* DEFAULT */
.entry-header { margin-bottom: var(--S02); }
.entry-title { margin-bottom: var(--S01); }

.post-thumbnail { margin-bottom: var(--S02); }
.post-thumbnail img { width: 100%; height: auto; }

.entry-content { margin-top: 1.5rem; }

/* LISTS */

/* Child Pages */
.children-list 											{ margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;  list-style: none; }
.children-list__item									{ margin: 0; padding: 0; display: flex; }

.children-list__link									{ height: 100%; width: 100%; padding: var(--S09) var(--S04); background-color: var(--K-base); color: var(--K-base-ink); text-decoration: none; display: flex; flex-direction: column; gap: var(--S04); transition: background-color var(--A01), color var(--A01); }
.children-list__link:hover								{ background-color: var(--K-negative); color: var(--K-negative-ink); text-decoration: none; }
.page-root__children--accent .children-list__link			{ padding: var(--S04); background-color: var(--K-accent); color: var(--K-accent-ink); }
.page-root__children--accent .children-list__link:hover	{ background-color: var(--K-base); color: var(--K-base-ink); }


.children-list__image 									{ width: 100%; height: auto; aspect-ratio: 16/9; margin: 0; padding: 0; }
.children-list__image img								{ width: 100%; height: 100%; object-fit: cover; }

.children-list__meta 									{ padding: 0; display: flex; flex-direction: column; gap: var(--S06); }
.page-root__children--block .children-list__meta			{ padding: 0 var(--S04) var(--S04) var(--S04); }
.children-list__header									{ display: flex; flex-direction: column; gap: var(--S01); }

/* Related Links */
.link-list-wrap 										{ padding-top: var(--S04); display: flex; flex-direction: column; gap: var(--S03); }
.link-list 												{ margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--S00); list-style: disc; list-style-position: inside; }
.link-list--buttons 									{ list-style: none; gap: var(--S01); }
.link-list__item 										{ margin: 0; padding: 0; }


/*
——————————————————————————————————————————
POST NAVIGATION (PREV/NEXT)
——————————————————————————————————————————
*/

.post-navigation { margin-top: var(--S04); padding-top: var(--S02); border-top: solid 1px var(--K-base-ink); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: var(--S02); }
.post-navigation .nav-previous,
.post-navigation .nav-next { flex: 1; }

.post-navigation a {
	display: block;
	padding: var(--S01);
	border: solid 1px var(--K-base-ink);
	transition: border-color var(--A01);
}

.post-navigation a:hover { border-color: var(--K-base-ink); text-decoration: none; }

.post-navigation .nav-label {
	display: block;
	font-size: var(--FS00);
	color: var(--K-base-ink);
	margin-bottom: 0.5rem;
}

.post-navigation .nav-title { display: block; font-weight: 600; color: var(--K-base-ink); }
.post-navigation .nav-next { text-align: right; }


/*
——————————————————————————————————————————
POSTS PAGINATION
——————————————————————————————————————————
*/

.posts-navigation { margin-top: var(--S03); padding-top: var(--S02); border-top: solid 1px var(--K-base-ink); }
.posts-navigation .nav-links { display: flex; justify-content: space-between; }
.posts-navigation a { padding: 0.5rem var(--S01); border: solid 1px var(--K-base-ink); transition: border-color var(--A01); }
.posts-navigation a:hover { border-color: var(--K-base-ink); text-decoration: none; }


/*
——————————————————————————————————————————
ARCHIVE & SEARCH HEADERS
——————————————————————————————————————————
*/

.page-header { margin-bottom: var(--S03); padding-bottom: var(--S01); border-bottom: 2px solid var(--K-base-ink); }
.page-title { font-size: 2rem; margin-bottom: 0.5rem; }
.archive-description { color: var(--K-base-ink); margin-top: var(--S01); }


/*
——————————————————————————————————————————
NO RESULTS / 404
——————————————————————————————————————————
*/

.no-results,
.error-404 { text-align: center; padding: var(--S04) var(--S02); }

.no-results .page-content,
.error-404 .page-content { max-width: 600px; margin: var(--S02) auto 0; }


/*
——————————————————————————————————————————
READ MORE LINK
——————————————————————————————————————————
*/

.read-more 								{ display: inline-block; margin-top: var(--S01); font-weight: 600; color: var(--K-base-ink); }
.read-more:hover 						{ text-decoration: none; color: var(--K-muted); }


/*
——————————————————————————————————————————
FOOTER
——————————————————————————————————————————
*/




/* FOOTER NAVIGATION */
.footer-navigation 						{ margin-bottom: var(--S02); }
.footer-navigation ul 					{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--S02); }
.footer-navigation li 					{ margin: 0; }
.footer-navigation a 					{ color: var(--K-accent-ink); font-size: var(--FS00); transition: color var(--A01); }
.footer-navigation a:hover 				{ color: var(--K-accent-ink); text-decoration: none; }


/*
——————————————————————————————————————————
UTILITIES
——————————————————————————————————————————
*/

.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 !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}


/*
——————————————————————————————————————————
IMAGE ORIENTATION CLASSES
(from MU plugin ds-image-orientation-class.php)
——————————————————————————————————————————
*/

img.landscape { display: block; }
img.portrait { display: block; }
img.square { display: block; }