/*!
Theme Name: Aroeira
Author: Marco Reixa
*/
:root {

	--headerLarge: 			90px;
	--headerRegular: 		90px;
	--mainNav: 				60px;
	--availableHeight: 	 	calc(100dvh - var(--headerRegular) - var(--mainNav));
	--galleryH:				100vw;
	
	--gapSmall:				20px;
	--gapBase:				30px;
	--gapMedium: 			60px;
	--gapLarge: 			90px;
	--gapBig: 				120px;
	--gapExtra: 			180px;

    --black: 				#000000;
	--pink:	 				#E0749D; /* #F093B2 #E0749D #DA5B9F #D4529B #C9228C */
	--white: 				#FFFFFF;
  }

@scope (.home) {
  :scope {
    --availableHeight: calc(100dvh - var(--headerLarge) - var(--mainNav));
  }
}

*							{ box-sizing: border-box !important; }
img							{ border: none; display: block; }
a							{ color: var(--black); text-decoration: underline; }
a:visited					{ color: var(--black); text-decoration: underline; }
a:hover						{ color: var(--pink); text-decoration: underline; }
p:first-of-type				{ margin-top: 0; }
p:last-of-type				{ margin-bottom: 0; }

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

/* FAMILIES */

html, body, h1, h2, h3, h4, h5, h6								{ font-family: "source-serif-4", serif; font-weight: 400; font-style: normal; }

#masthead,
#site-navigation,
#colophon,
.menu-toggle,
.info-text,
.eyebrow,
.sans,

.privacy-policy h4,
.privacy-policy li::marker,

.page-template-tpl-alt .secondary-content h1,
.page-template-tpl-alt .secondary-content h2,
.page-template-tpl-alt .secondary-content h3,
.page-template-tpl-alt .secondary-content h4,
.page-template-tpl-alt .secondary-content h5					{ font-family: "letter-gothic-std", monospace !important;  font-weight: 700; font-style: normal; }


/* SIZE AND STYLES*/

html,body														{ font-size: 16px; line-height: 1.50em; }

#masthead														{ font-size: 10px; line-height: 1.30em; text-transform: uppercase; }
#site-navigation												{ font-size: 30px; line-height: 1.00em; text-transform: uppercase; }
.menu-toggle													{ font-size: 16px; line-height: 1.00em; text-transform: uppercase; }

h1 																{ font-size: 48px; line-height: 1.10em; font-weight: 600; margin: 0; padding: 0; text-transform: none; }
h2 																{ font-size: 40px; line-height: 1.20em; font-weight: 600; margin: 0; padding: 0; text-transform: none; }
h3 																{ font-size: 32px; line-height: 1.20em; font-weight: 600; margin: 0; padding: 0; text-transform: none; }
h4 																{ font-size: 24px; line-height: 1.20em; font-weight: 600; margin: 0; padding: 0; text-transform: none; }
h5 																{ font-size: 20px; line-height: 1.50em; font-weight: 600; margin: 0; padding: 0; text-transform: none; }
h6 																{ font-size: 18px; line-height: 1.50em; font-weight: 600; margin: 0; padding: 0; text-transform: none; }

.featured-events	h3 											{ font-weight: 400; font-style: italic; }
.info-text			h6 											{ font-weight: 400; font-style: italic; }

h1.sans 														{ font-size: 40px; line-height: 1.30em; margin: 0; padding: 0; text-transform: uppercase; }
h2.sans 														{ font-size: 32px; line-height: 1.30em; margin: 0; padding: 0; text-transform: uppercase; }
h3.sans 														{ font-size: 24px; line-height: 1.30em; margin: 0; padding: 0; text-transform: uppercase; }
h4.sans 														{ font-size: 20px; line-height: 1.50em; margin: 0; padding: 0; text-transform: uppercase; }
h5.sans 														{ font-size: 16px; line-height: 1.50em; margin: 0; padding: 0; text-transform: uppercase; }

.page-template-tpl-alt .secondary-content h1					{ font-size: 40px; line-height: 1.30em; margin: 0; padding: 0; text-transform: uppercase; }
.page-template-tpl-alt .secondary-content h2					{ font-size: 32px; line-height: 1.30em; margin: 0; padding: 0; text-transform: uppercase; }
.page-template-tpl-alt .secondary-content h3					{ font-size: 24px; line-height: 1.30em; margin: 0; padding: 0; text-transform: uppercase; }
.page-template-tpl-alt .secondary-content h4					{ font-size: 20px; line-height: 1.50em; margin: 0; padding: 0; text-transform: uppercase; }
.page-template-tpl-alt .secondary-content h5					{ font-size: 16px; line-height: 1.50em; margin: 0; padding: 0; text-transform: uppercase; }

.text-base 														{ font-size: 16px; line-height: 1.50em; }
.text-regular													{ font-size: 18px; line-height: 1.50em; }
.text-large 													{ font-size: 20px; line-height: 1.50em; }

.info-text 														{ font-size: 16px; line-height: 1.50em; text-transform: uppercase; }
.eyebrow 														{ font-size: 16px; line-height: 1.50em; text-transform: uppercase; }

.privacy-policy li::marker										{ font-size: 16px; line-height: 1.50em; text-transform: uppercase; }

#colophon														{ font-size: 16px; line-height: 1.50em; }
#colophon .footer-info											{ font-size: 16px; line-height: 1.00em; text-transform: uppercase; }

/*
——————————————————————————————————————————
STRUCTURE
——————————————————————————————————————————
*/

html, body                                                 		{ margin: 0 !important; padding: 0 !important; background-color: var(--white); color: var(--black); }

#page 															{ width: 100%; height: auto; margin: 0 !important; padding: 0 !important; position: relative; }
#primary 														{ width: 100%; height: auto; margin: 0 !important; padding: 0 0 var(--gapExtra) 0 !important; position: relative; display: flex; flex-direction: column; gap: var(--gapLarge); }
.home #primary 													{ padding-bottom: 0 !important; gap: 0; }

.main-grid 														{ display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gapBase); }
.half-grid 														{ display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gapBase); }

.agenda-block.main-grid											{ gap: var(--gapMedium) var(--gapBase); }
.agenda-block.half-grid											{ gap: var(--gapMedium) var(--gapBase); }


/*
——————————————————————————————————————————
UI ELEMENTS
——————————————————————————————————————————
*/

.bt-toggle 														{ width: 32px; height: 32px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; position: relative; }

.plus 															{ width: 24px; height: 24px; margin: 0; padding: 0; display: inline-block; position: relative; }
.plus::before, .plus::after 									{ content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 1px; background-color: currentColor; transform-origin: center; transition: transform 0.3s ease; }
.plus::before 													{ transform: translate(-50%, -50%) rotate(0deg); }
.plus::after 													{ transform: translate(-50%, -50%) rotate(90deg); }


/*
——————————————————————————————————————————
HEADER & NAV
——————————————————————————————————————————
*/

/* SITE HEADER */
#masthead 														{ width: 100%; height: var(--headerRegular); margin: 0; padding: var(--gapSmall) var(--gapSmall) var(--gapBase) var(--gapSmall) ; background-color: var(--white); color: var(--black); position: sticky; top: 0; transition: height 0.4s ease; z-index: 999; }
#masthead.large 												{ height: var(--headerLarge);}

#masthead 			img 										{ width: auto; height: 50px; margin: 0; padding: 0; transition: height 0.4s ease;  }
#masthead.large		img 										{ width: auto; height: 50px; margin: 0; padding: 0; }

#masthead 			.site-branding								{ width: 100%; height: auto; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; }

#masthead 			.header-flag								{ padding-top: 0; transition: padding 0.4s ease; }
#masthead.large  	.header-flag								{ padding-top: 0; }

#masthead a 													{ color: var(--black); text-decoration: none; }
#masthead a:active 												{ color: var(--black); text-decoration: none; }
#masthead a:hover 												{ color: var(--black); text-decoration: none; }

/* SITE NAVIGATION */
#site-navigation 												{ width: 100%; height: var(--mainNav); margin: 0; padding: 0; background-color: var(--white); position: sticky; bottom: 0; left: 0; display: flex; flex-direction: column-reverse; gap: 0; z-index: 888; }

#primary-menu 													{ width: 100%; height: auto; margin: 0; padding: var(--gapMedium) var(--gapSmall); list-style: none; display: none; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; }
#primary-menu li 												{ width: auto; height: auto; margin: 0; padding: 0; }

#primary-menu li a												{ color: var(--black); text-decoration: none; }
#primary-menu li a:hover,	
#primary-menu li.current-menu-item a,
#primary-menu li.current-menu-parent a 							{ color: var(--black); text-decoration: none; font-style: italic; }

#primary-menu li.lang-switcher									{ width: auto; height: auto; margin: 0; padding: var(--gapBase) 0 0 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; }
#primary-menu li.lang-switcher a.active							{ font-style: italic; }

.menu-toggle                                                	{ width: 100%; height: auto; margin: 0; padding: var(--gapSmall); display: flex; align-items: center; justify-content: space-between; color: var(--black); text-decoration: none; background: transparent; border-radius: 0; border: none; cursor: pointer; }
.menu-toggle:hover 												{ text-decoration: none; }

.menu-icon                                                  	{ width: auto; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column;  align-items: center; justify-content:center; transition: all .2s ease-in-out, background-color 1ms; -moz-transition: all .2s ease-in-out, background-color 1ms; -webkit-transition: all .2s ease-in-out, background-color 1ms; }
.menu-icon:after, .menu-icon:before, .menu-icon span        	{ width: 20px; height: 2px; margin: 2px 0; padding: 0; display: block; background-color: var(--black); transition: all .2s ease-in-out, background-color 1ms; -moz-transition: all .2s ease-in-out, background-color 1ms; -webkit-transition: all .2s ease-in-out, background-color 1ms; content: ''; }
#site-navigation.toggled .menu-icon:before                  	{ transform: translateY(6px) rotate(135deg); -webkit-transform: translateY(6px) rotate(135deg); -moz-transform: translateY(6px) rotate(135deg); }
#site-navigation.toggled .menu-icon:after						{ transform: translateY(-6px) rotate(-135deg); -moz-transform: translateY(-6px) rotate(-135deg); -webkit-transform: translateY(-6px) rotate(-135deg); }
#site-navigation.toggled .menu-icon span						{ transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); }

#site-navigation.toggled 										{ background-color: var(--pink); padding-top: 0; }
#site-navigation.toggled #primary-menu                    		{ display: flex; background-color: var(--pink); }



/*
——————————————————————————————————————————
CONTENT
——————————————————————————————————————————
*/

/* HOME PAGE */

/* Portada */
.portada-wrapper												{ width: 100%; height: var(--availableHeight); margin: 0; padding: 0 var(--gapSmall); position: relative; }

.portada 														{ width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.portada::-webkit-scrollbar 									{ display: none;}

.portada-media 													{ width: 100%; height: 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.portada-media img 												{ width: auto; height: 100%; margin: 0; padding: 0; object-fit: cover; display: block; }
.portada-media video 											{ width: auto; height: 100%; margin: 0; padding: 0; object-fit: cover; display: block; }

.id-paraiso 													{ width: auto; height: 50px; margin: 0; padding: 0; position: absolute; top: 20px; left: 40px; }
.id-hoje 														{ width: auto; height: 50px; margin: 0; padding: 0; position: absolute; bottom: 20px; right: 40px; }

/* featured events */
.featured-events												{ width: 100%; height: auto; margin: 0; padding: var(--gapBase) var(--gapSmall); display: flex; flex-direction: column; gap: var(--gapSmall); }
.featured-events__item 											{ width: 100%; height: auto; margin: 0; padding: var(--gapSmall); }
.featured-events__item a 										{ width: 100%; height: 100%; margin: 0; padding: var(--gapBase) 0px; color: var(--black); text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.featured-events__item a:visited								{ color: var(--black); text-decoration : none; }
.featured-events__item a:hover 									{ color: var(--pink); text-decoration : none; }
.featured-events__item h3 										{ text-align: center; }
.featured-events__item .info-text 								{ width: auto; height: auto; margin: 0; padding: 0; text-align: center; }

/* featured link */
.featured-item													{ width: 100%; height: var(--availableHeight); margin: 0; padding: 0 var(--gapSmall); position: relative; }
.featured-item figure 											{ width: 100%; height: 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.featured-item figure img 										{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.featured-item__text											{ width: auto; height: auto; margin: 0; padding: var(--gapBase); position: absolute; top: 0; left: var(--gapSmall); color: var(--black); }

.featured-item a.dark 											{ color: var(--black); text-decoration: none; }
.featured-item a.dark:visited 									{ color: var(--black); text-decoration: none; }
.featured-item a.dark:hover										{ color: var(--pink); text-decoration: none; }
.featured-item a.light 											{ color: var(--white); text-decoration: none; }
.featured-item a.light:visited 									{ color: var(--white); text-decoration: none; }
.featured-item a.light:hover									{ color: var(--pink); text-decoration: none; }

/* COVER BLOCK */
.cover-block 													{ width: 100%; height: var(--availableHeight); margin: 0; padding: 0 var(--gapSmall); position: relative; }
.cover-block figure 											{ width: 100%; height: 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cover-block figure img 										{ width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* HEADER BLOCK */
.header-block 													{ width: 100%; height: auto; margin: 0; padding: 0 var(--gapSmall); }
.header-block:first-child										{ padding-top: var(--gapLarge); }
.header 														{ width: auto; height: auto; margin: 0; padding: 0; grid-row: 1; grid-column: 1 / span 12; }

/* CONTENT BLOCK */
.content-block 													{ width: 100%; height: auto; margin: 0; padding: 0 var(--gapSmall); }
.content-block:first-child										{ padding-top: var(--gapLarge); }

.content-header 												{ width: auto; height: auto; margin: 0; padding: 0; grid-column: 1 / span 12; display: flex; flex-direction: column; gap: 5px; }
.content-aside 													{ width: auto; height: auto; margin: 0; padding: var(--gapBase) 0 0 0; grid-column: 1 / span 12; display: flex; flex-direction: column; gap: var(--gapBase); }
.content-main 													{ width: auto; height: auto; margin: 0; padding: 10px 0 0 0; grid-column: 1 / span 12; display: flex; flex-direction: column; gap: var(--gapBase); }

.content-block .grid-hack										{ display: none; }

.content-aside .info-text										{ width: auto; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.content-aside p												{ margin: 0; }
.content-aside p + p											{ margin-top: 12px; }

/* SECONDARY BLOCK */
.secondary-block 												{ width: 100%; height: auto; margin: 0; padding: 0 var(--gapSmall); }

.secondary-aside 												{ width: auto; height: auto; margin: 0; padding: 0; grid-column: 1 / span 12; display: flex; flex-direction: column; gap: var(--gapBase); }
.secondary-content 												{ width: auto; height: auto; margin: 0; padding: 5px 0 0 0; grid-column: 1 / span 12; display: flex; flex-direction: column; gap: var(--gapBase); }

.secondary-aside .info-text										{ width: auto; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.secondary-aside p												{ margin: 0; }
.secondary-aside p + p											{ margin-top: 12px; }

/* GALLERY BLOCK */
.gallery-block 													{ width: 100%; height: auto; margin: 0; padding: 0 var(--gapSmall) 90px var(--gapSmall); }

/* TRIPTYCH BLOCK */
.triptych-block 												{ width: 100%; height: auto; margin: 0; padding: var(--gapMedium) var(--gapSmall); display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--gapSmall); }
.triptych-block img 											{ width: 100%; height: auto; }

/* BIOS LIST */
.bios-list 														{ width: 100%; height: auto; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gapMedium) var(--gapBase); }
.bios-list__item 												{ width: 100%; height: auto; margin: 0; padding: 0; }
.bios-list__link 												{ width: 100%; height: auto; margin: 0; padding: var(--gapBase) 0 0 0; color: var(--black); text-decoration: none; display: flex; flex-direction: column; gap: var(--gapSmall); position: relative; }
.bios-list__link::before 										{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: var(--black); }
.bios-list__link:visited 										{ color: var(--black); text-decoration: none; }
.bios-list__link:hover 											{ color: var(--pink); text-decoration: none; }
.bios-list__link:hover::before 									{ background-color: var(--pink); }
.bios-list__details 											{ width: auto; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; }


/* ALTERNATIVE TEMPLATE */
.page-template-tpl-alt .secondary-content h5 + p 				{ margin-top: 0; }
.page-template-tpl-alt ol										{ width: 100%; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gapMedium); }
.page-template-tpl-alt ol h5									{ padding-bottom: 20px !important; }

/* AGENDA BLOCK */
.agenda-block 													{ width: 100%; height: auto; margin: 0; padding: 0 var(--gapSmall); }
.agenda-block:first-child										{ padding-top: var(--gapLarge); }

.agenda-block__item												{ width: auto; height: auto; margin: 0; padding: 0; }
.agenda-block__item:nth-child(odd) 								{ grid-column: 1 / span 12; }
.agenda-block__item:nth-child(even)								{ grid-column: 1 / span 12; }

.agenda-block__item	a											{ width: auto; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--gapBase); color: var(--black); text-decoration: none; }
.agenda-block__item	a:hover										{ color: var(--pink); text-decoration: none; }

.agenda-block__thumb											{ width: 100%; height: auto; margin: 0; padding: 0; aspect-ratio: 3/2; position: relative; }
.agenda-block__thumb figure										{ width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.agenda-block__thumb img										{ width: 100%; height: 100%; object-fit: cover; object-position: center; transition: filter 0.3s ease; }

.agenda-block__thumb::before 									{ content: ""; position: absolute; inset: 0; background-color: var(--pink); mix-blend-mode: screen; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 1; }
.agenda-block__item	a:hover	.agenda-block__thumb::before 		{ opacity: 1; }
.agenda-block__item	a:hover	.agenda-block__thumb img 			{ filter: grayscale(100%); }

.agenda-block__info 											{ width: 100%; height: 100%; margin: 0; padding: var(--gapSmall) var(--gapSmall) var(--gapSmall) 0; display: flex; flex-direction: column; gap: var(--gapSmall); }


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

#colophon 													{ width: 100%; height: auto; margin: 0; padding: var(--gapBase) var(--gapSmall); background-color: var(--pink); color: var(--black); display: flex; flex-direction: column; gap: var(--gapMedium); position: fixed; bottom: 0; z-index: -1; }
#colophon p:first-of-type 									{ margin-top: 0;}
#colophon p:last-of-type  									{ margin-bottom: 0; }

.visitor-info												{ width: 100%; height: auto; margin: 0; padding: 0; }

.visitor-info-map 											{ width: auto; height: auto; margin: 0; padding: 0; mix-blend-mode: multiply; display: none; }
.visitor-info-map img 										{ width: 100%; height: auto; margin: 0; padding: 0; filter: grayscale(100%); }
.visitor-info-details 										{ width: auto; height: max-content; margin: auto 0; padding: 0; grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gapBase);  }
.visitor-info-schedule										{ grid-column: 1 / span 12; }
.visitor-info-address 										{ grid-column: 1 / span 12; }
.visitor-info-contact 										{ grid-column: 1 / span 12; }

.footer-info 												{ width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: space-between; }

.footer-menu												{ width: auto; height: auto; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; }
.footer-menu li												{ width: auto; height: auto; margin: 0; padding: 0; }
.footer-menu li a											{ color: var(--black); text-decoration: none; padding: 0; }
.footer-menu li a:hover,	
.footer-menu li.current-menu-item a,
.footer-menu li.current-menu-parent a 						{  color: var(--black); text-decoration: none; font-style: italic; }