/*
Theme Name: Reformatus Gyujtemenyek Custom 2025
Theme URI: https://rg.aprdev.net
Author: the Aprilred team
Author URI: https://aprilred.com/
Description: Custom theme for the Reformatus Gyujtemenyek website.
Version: 1.1
Tags: reformatus, gyujtemenyek, rg
Text Domain: rg
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wp-site-blocks > *:first-child,
.entry-content > *:first-child,
.content > *:first-child {
  margin-top: 0 !important;
}

a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

li {
    list-style: none;
}

h2 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 2.813rem;
    margin-bottom: 2.813rem;
}

h3 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.875rem;
    line-height: 1; 
}

p {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.196rem;
}

:root {
  --accent-clr: #248052;
  --base-clr: #F5F5F5;
  --white-clr: #ffffff;
  --black-clr: #000000;
  --grey-clr: #434343;
}

/* General */

body {
    background-color: var(--base-clr);
}

.wrap {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.site-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.site-main {
    margin-bottom: 4rem;
}

.site-content {
    flex-grow: 1;
}

.button {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  letter-spacing: 0.3px;
  color: var(--accent-clr);
  border: 1px solid var(--accent-clr);
  width: fit-content;
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.button a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.625rem 1.875rem;
  text-decoration: none;
  color: inherit;
}

.button:hover {
  background-color: #248052; /* or var(--accent-clr) if you prefer */
  color: var(--white-clr);
}

.button:hover a {
  color: var(--white-clr);
}

.flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

/* Header */

header {
    background-color: var(--white-clr);
}

.site-header-main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--white-clr);
    padding-inline: 0 !important;
}

.site-branding {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

header .site-branding {
    background-color: var(--white-clr);
    padding-left: 2rem;
}

.custom-logo {
    height: 3.875rem;
    width: 3.188rem;
}

.site-title {
    width: 50%;
}

.site-title a {
    font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  color: var(--black-clr);
}

.site-header-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--black-clr);
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    flex: 1;
    position: relative;
}

.main-navigation{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.dropdown-toggle {
    display: none;
}

.primary-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.primary-menu li a {
    color: inherit;
}

.primary-menu .current-menu-item {
    font-weight: 700;
}

.menu-toggle {
    display: none;
}

.primary-menu li:has(ul) {
    position: relative;
}

.primary-menu li ul {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-direction: column;
    position: absolute;
     top: 100%;
    left: -2rem;
    z-index: 999;
    background-color: var(--white-clr);
    width: fit-content;
    padding: 2rem;
}

.primary-menu li:hover > ul,
.primary-menu li ul:hover {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.primary-menu li ul li {
    background-color: var(--white-clr);
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* unique two column layout of one menu item */


.unique .sub-menu {
  display: none;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 0.5rem 1.5rem;
  justify-items: center;
}

.unique > ul.sub-menu > li.title1 > ul.sub-menu {
    width: 12.75rem !important;
}

.unique > ul.sub-menu > li.title2 > ul.sub-menu {
    width: 12.75rem !important;
        transform: translateX(0.5rem);
}

.unique > ul.sub-menu {
    width: 24rem;
    justify-items: start;
    justify-content: start;
}

.primary-menu li.unique:hover > ul,
.primary-menu li.unique ul:hover {
    display: grid;
}

.sub-menu li.title1,
.sub-menu li.title2 {
    font-weight: 600;
}

.sub-menu .title1 ul,
.sub-menu .title2 ul {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.sub-menu .title1 ul li {
    padding-right: 2rem;
}

.sub-menu .title1 ul li, 
.sub-menu .title2 ul li {
    font-weight: 400;
    margin-bottom: 0;
}

.primary-menu li.title1:hover > ul,
.primary-menu li.title1 ul:hover {
    display: flex;
}

.primary-menu li.title2:hover > ul,
.primary-menu li.title2 ul:hover {
    display: flex;
}

.primary-menu li.menu-item-has-children > a {
    pointer-events: none;
    cursor: default;
}

.primary-menu li a {
    position: relative;
}

.primary-menu li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 1px;
    background-color: var(--black-clr);
    transition: width 0.5s;
    z-index: 999;
}

.primary-menu li a:hover::after {
    text-decoration: underline;
    width: 100%;
}

/*secondary menu*/

.primary-menu .lang-item {
    text-transform: uppercase;
}

.lang-switcher ul li.current-lang {
  font-weight: 700;
}

.secondary-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.search-box {
    height: 100%;
}

.search-box img{
    height: 20px;
    width: auto;
    aspect-ratio: 1 / 1;
}

.lang-switcher {
    padding-right: 2rem;
}

.lang-switcher ul{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    text-transform: uppercase;
}

.secondary-menu {
	margin-inline: 2.5rem;
}

.section-search-form {
	position: absolute;
	top: 50px;
	right: 1.5rem;
	width: 400px;
	z-index: 4;
	background-color: var(--white-clr);
    border: 1px solid black;
}

.section-search-form form {
	padding: 1rem;
    font-family: "Playfair Display", serif;
}

.section-search-form form input.search-field {
	background-color: var(--white-clr);
	padding: 0.5rem 1rem;
	color: var(--black-clr);
	outline: 1px solid transparent;
	border: 1px solid var(--accent-clr);
    width: 100%;
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
}

.section-search-form form input:focus {
	border: 2px solid var(--accent-clr);
    outline: none;
}

.section-search-form form input:focus input {
	color: rgba(14, 108, 60, 0.1);
}

.section-search-form form label {
	color: #000;
}

.section-search-form button.search-submit {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--accent-clr);
	color: var(--white-clr);
	outline: none;
    border: none;
    box-shadow: none;
	margin-top: 0.5rem;
    font-family: "Barlow", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.section-search-form button.search-submit span {
    transition: transform 0.3s ease;
}

.section-search-form button:hover span {
	transform: scale(1.1);
}

.secondary-menu svg {
	width: 25px;
	height: 25px;
    transition: transform 0.3s ease;
}

.secondary-menu svg:hover {
    transform: scale(1.2); /* 20% larger */
}

.section-search-form,
.close-search-icon {
	display: none;
}

.search-icon,
.close-search-icon {
	cursor: pointer;
}

.search-page .page-title {
    margin-block: 3rem;
}

.search-results .results-article {
    margin-bottom: 2rem;
}

.search-results .results-article:has(.post-thumbnail) {
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-bottom: 2rem;
}

.search-results .results-article img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.search-results header:has(h2) {
    background-color: var(--white-clr);
    padding: 1.5rem;
}

.search-results header h2 {
    font-size: 2rem;
}

.search-results .page-title {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 2.813rem;
    margin-bottom: 2.813rem;
}

.search-results .pagination {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: 2rem;
}

.search-results .nav-links {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.25rem;
}

.search-results .nav-links .current {
    font-weight: 700;
}






/* Footer */

.site-footer {
    background-color: var(--grey-clr);
    color: var(--white-clr);
    padding-block: 4.75rem;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
}

footer .site-title a {
    color: var(--white-clr);
}

.footer-navigation ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.5rem;
}

/* News Block and News Listing */

.news-title, .listing-title {
    padding-top: 3.75rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.news-title.subtitle {
    padding-bottom: 2rem;
}

.news-title .button {
    margin-top: -3rem;
}

/* ===== Container layout ===== */

.news-content {
    padding-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  width: 100%;
  grid-auto-flow: row dense; /* helps auto-place rows neatly */
}

/* ===== Cards ===== */
.news-card {
  background: var(--white-clr); 
}

.page-template-page-news .news-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.page-template-page-news .news-content .news-card {
    height: 100%;
}

.page-template-page-home .news-card {
    flex-basis: 50%;
}

.page-template-page-news  .news-card .news-image img,
.page-template-page-news .news-card  .news-image {
    display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.news-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.8rem;
}


.news-card .news-details {
    min-width: 0;          
    overflow-wrap: break-word;
    box-sizing: border-box;
    padding: 1.436rem;
    gap: 1rem;
}

.news-card .news-details h3 {
    font-size: 1.346rem;
}

.news-card .news-details p {
    font-size: 1rem;
}

.page-template-page-news .news-details h3 {
    font-size: 1.346rem !important;
}

.page-template-page-news .news-details p {
    font-size: 1rem !important;
}

.page-template-page-news .news-card {
    background-color: var(--white-clr) !important;
}



/* Events Block */


.events-title {
    padding-top: 3.75rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.events-title .button {
    margin-top: -3rem;
}

#my-calendar {
    display: flex;
    width: 100%;
    gap: 2rem;
}

/* Calendar column */
.simple-calendar {
    flex: 1;
}

/* Event listings column */
#event-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.month-year {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 2.25rem;
    text-transform: capitalize;
    padding-left: 1.5rem;
}

.calendar-container {
    margin-bottom: 3.75rem;
}

.simple-calendar table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white-clr);
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.308rem;
    border-bottom: 2rem solid var(--white-clr);
}

.simple-calendar thead,
.simple-calendar tr,
.simple-calendar td {
    background-color: var(--white-clr);
}

#event-listings p {
    padding: 1rem 2rem;
}

.simple-calendar th,
.simple-calendar td {
    text-align: center;
    padding: 1.681rem 0.942rem;
    cursor: pointer;
    border-radius: 4px;
}

.simple-calendar th {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.681rem;
    line-height: 1; 
    background-color: var(--white-clr);
}

.simple-calendar td.day-cell {
    width: 4rem;
    height: 4rem !important;
    position: relative;
    z-index: 1;
    padding: 0 !important;
}

.simple-calendar td.day-cell span.square {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.simple-calendar td.day-cell span {
    position: relative;
    z-index: 3;
}

.simple-calendar td.day-cell.today.selected span.square {
    background-color: var(--accent-clr);
    color: var(--white-clr);
}

.simple-calendar td.day-cell.today span.square {
    background-color: var(--accent-clr);
    color: var(--white-clr);
}

.simple-calendar td.day-cell.selected span.square {
    border: 2px solid var(--accent-clr);
    color: var(--accent-clr);
}

.day-cell:hover span.square,
.today:hover span.square {
    border: 2px solid rgba(14, 108, 60, 0.1);
    color: var(--accent-clr);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
}

.simple-calendar .calendar-header {
    background-color: var(--white-clr);
}

.nav-arrows {
    padding: 2rem 2rem 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
}

.nav-arrows button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-arrows button i {
    padding: 1.5rem;
    font-size: 2rem;
}

.nav-arrows button:hover {
    color: var(--accent-clr);
}

/* Event row: flex with date + info */
.event-row {
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5rem;
}

/* Event date block */
.event-date {
    text-align: center;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-clr);
    padding: 0 1rem 0 1rem;
    color: var(--white-clr);
}

/* Event info block */
.event-info h4 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.625rem;
    margin-bottom: 1rem;
}

.event-info p {
     font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.196rem;
    padding-bottom: 0.5rem;
}

.event-month {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.625rem;
}

.event-day {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5rem;
}

.event-weekday {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.125rem;
}

/*Contact Block*/

.contact-block {
    min-height: 21.875rem;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    transition: transform 0.5s ease;
    overflow: hidden;
    cursor: pointer;
}

.green-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 65, 31, 0.82);
    backdrop-filter: blur(1.5px);
    transition: background-color 0.8s ease, backdrop-filter 0.5s ease;
}

a.map-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    opacity: 0;           /* fully invisible */
    visibility: hidden;   /* prevents interaction */
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

a.map-link span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--accent-clr);
    background-color: var(--white-clr);
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    margin-right: 2rem;
}

a.map-link span .btn {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1rem;
    letter-spacing: 0.3px;
    color: var(--white-clr);
    background-color: var(--accent-clr);
    width: fit-content;
    padding: 0.625rem 1.875rem;
}

a.map-link span .accent {
    font-weight: 600;
    font-size: 1.2rem;
}

.contact-block h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: var(--white-clr);
    transition: opacity 0.8s ease;
}

.contact-block:hover .green-overlay {
    background-color: transparent;
    backdrop-filter: blur(0); /* remove blur on hover */
}

.contact-block:hover h2 {
    opacity: 0;
}

.contact-block:hover {
    transform: scale(1.05); /* slight zoom */
}

.contact-block:hover a.map-link {
   opacity: 1;
    visibility: visible;
}

/* Gallery Block */

/* ===== Splide core layout (keep this) ===== */
.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized,
.splide.is-rendered {
  visibility: visible;
}

.splide__track {
  overflow: hidden;
  position: relative;
  box-sizing: content-box;   /* needed so padding works as expected */
}

.splide__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.splide__arrow {
    background-color: transparent;
    border: none;
    outline: none;
    padding: 2rem;
    cursor: pointer;
}

.splide__arrows {
    display: flex;
    justify-content: center;
    align-items: center;
}

.splide__arrows button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.splide__sr {
    display: none;
}

.splide__arrow--prev {
    transform: rotate(180deg);
}

/* ===== Slides ===== */
.splide__slide {
  flex-shrink: 0;
  aspect-ratio: 1 / 1; /* square ratio */
  overflow: hidden;
  min-width: 0;       /* prevents flex overflow issues */
}

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills the square without distortion */
  display: block;
}

#image-carousel .splide__track {
  padding-left: 0;
  padding-right: 0;
}

.gallery-title {
    display: flex;
    align-items: center;
    padding-bottom: 3rem;
    margin-top: 3.75rem;
}

.gallery-title h2 {
    flex: 1;
    margin-block: auto;
}

/* Single Pages */

.header-images {
    padding-bottom: 2rem;
}

.header-images.option-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  grid-template-rows: repeat(2, auto);  
  gap: 1rem;
  width: 100%;
}

.header-images.option-3 .header-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 27.25rem;
}

.header-images.option-3 .header-image:first-child {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.header-images.option-3 .header-image:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
  height: auto;
}

.header-images.option-3 .header-image:nth-child(3) {
  grid-column: 3;
  grid-row: 2;
  height: auto;
}

.header-images.option-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-template-rows: repeat(1, auto);   
    gap: 1rem;
    width: 100%;
}

.header-images.option-2 .header-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 27.25rem;
}

.header-images.option-1 {
    width: 100%;
}

.header-images.option-1 .header-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 27.25rem;
}

.single-page-content h2 {
    font-size: 2.25rem;
    margin: 3.75rem auto;
    text-align: center;
}

.single-page-content p {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-block: 0.5rem;
}

.single-page-content .event-data {
    margin-top: -2rem;
    padding-bottom: 2rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.single-excerpt {
    padding-block: 1.5rem;
}

.single-content {
    padding-block: 1.5rem;
}

.single-content iframe {
    padding-block: 1.5rem;
    width: 50%;
    margin: 0 auto;
}

.single-content p:has(iframe) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.single-featured-image {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white-clr);
    padding-block: 1.5rem;
}

.single-featured-image img {
    width: 50%;
    aspect-ratio: 1/1;
    height: auto;
    object-fit: contain;
}

.single-date {
    text-align: center;
    margin: 0 auto;
    padding-bottom: 3rem;
}

.single-news .single-page-content h2 {
    margin-bottom: 1rem;
}

.news-header-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: repeat(2, auto);   /* 2 rows */
  gap: 1rem;
  width: 100%;
}

.news-header-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 27.25rem;
}

/* First image: spans 2 cols and 2 rows */
.news-header-image:first-child {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

/* Second image: top-right */
.news-header-image:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
  height: auto;
}

/* Third image: bottom-right */
.news-header-image:nth-child(3) {
  grid-column: 3;
  grid-row: 2;
  height: auto;
}

.page-template-default p {
   padding-block: 1rem; 
}

.page-template-default p:first-of-type {
    padding-top: 2.5rem;
}

.page-template-default p:last-of-type {
    padding-bottom: 4rem;
}

.page-template-page-about p {
    padding-block: 1rem;
}

.page-template-page-about p:first-of-type {
    padding-top: 2.5rem;
}

.page-template-page-about p:last-of-type {
    padding-bottom: 4rem;
}

.wide-header-image {
    width: 100%;
    height: 30dvh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* Events Page */

.message {
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
}

.events-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.event-card {
    background-color: var(--white-clr);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 1.5rem;
}

.event-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.event-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.8rem;
}

.event-data span {
    font-weight: 600;
    color: var(--accent-clr);
    text-transform: capitalize;
}

.events .buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.filter-buttons {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--white-clr);
    margin-left: auto;
    border: 1px solid var(--accent-clr);
    cursor: pointer;
}

.filter-buttons .button {
  color: var(--black-clr);
  background-color: transparent;
  transition: none;
    border: 1px solid var(--accent-clr);
}

.filter-buttons .button:hover a {
  color: var(--black-clr);
}

.filter-buttons .button.active {
    background-color: var(--accent-clr);
    color: var(--white-clr);
}

.filter-buttons .button.active:hover a {
    color: var(--white-clr);
}



/* Links Page */
.links-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    width: 100%;
}

.links-card {
    background-color: var(--white-clr);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
}

.links-image {
    width: 100%;
}

.links-image img {
    display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.links-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    padding-inline: 1.5rem;
    padding-bottom: 1.5rem;
}

.links-details h3 {
    font-size: 1.346rem;
}

/* Publications Page */

.publications-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    width: 100%;
}

.publications-card {
    background-color: var(--base-clr);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
}

.publications-image {
    width: 100%;
}

.publications-image img {
    display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 0.7;
  object-fit: cover;
}

.publications-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    padding-inline: 1.5rem;
    padding-bottom: 1.5rem;
}

.publications-details h3 {
    font-size: 1.125rem;
    line-height: 1.3;
}


.home-content .news-card {
    flex-basis: 50%;
}

.home-content .inst-details {
    flex-basis: 50%;
}



@media (max-width:1440px) {
    .footer-content {
        padding-inline: 2rem;
    }

    .wrap {
        padding-inline: 2rem;
    }
}


.home-content {
    width: 100%;
    padding-block: 2rem;
}

.home-content .news-image img {
    width: 100%;
}

.news-block {
    display: flex;
    gap: 2rem;
}


.inst-details {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* CARD */
.inst-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* FULL CARD CLICK */
.inst-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* LOGO */
.inst-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.inst-logo img {
    height: 100%;
    max-height: 3.5rem; /* controlled by title height */
    width: auto;
    object-fit: contain;
}

/* CONTENT */
.inst-content {
    display: flex;
    align-items: center;
}

.inst-content h2 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.2;
}

.publication-image {
    width: 100%;
    background-color: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.publication-image img{
    width: 50%;
    padding-block: 1rem;
}

.splide-image {
    aspect-ratio: 1 / 1;
}

/* =====================================================
   RESPONSIVE STYLES — append to the end of style.css
   Breakpoints:
   - Tablet:        max-width 1024px
   - Mobile:        max-width 768px
   - Small mobile:  max-width 480px
   ===================================================== */


/* =====================================================
   TABLET  (max-width: 1024px)
   ===================================================== */
@media (max-width: 1024px) {

    /* ---------- Typography ---------- */
    h2 {
        font-size: 2.25rem;
        margin-bottom: 2rem;
    }
    h3 { font-size: 1.5rem; }
    p  { font-size: 1.1rem; }

    /* ---------- General ---------- */
    .wrap,
    .footer-content { padding-inline: 1.5rem; }

    .site-main { margin-bottom: 3rem; }

    /* ---------- Header / Navigation ---------- */
    header .site-branding   { padding-left: 1.5rem; }
    .secondary-menu         { margin-inline: 1rem; }
    .lang-switcher          { padding-right: 1.5rem; }
    .primary-menu           { gap: 1.25rem; }

    .site-title a           { font-size: 0.95rem; }

    /* ---------- News ---------- */
    .page-template-page-news .news-content {
        grid-template-columns: 1fr 1fr;
    }
    .news-block { gap: 1.5rem; }

    /* ---------- Publications: 3 columns instead of 4 ---------- */
    .publications-content {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ---------- Events / Calendar stacks ---------- */
    #my-calendar {
        flex-direction: column;
        gap: 1.5rem;
    }

    .simple-calendar th,
    .simple-calendar td { padding: 1.25rem 0.5rem; }

    .simple-calendar td.day-cell,
    .simple-calendar td.day-cell span.square {
        width: 3rem;
        height: 3rem !important;
    }

    /* ---------- Single page header images ---------- */
    .header-images.option-3 .header-image,
    .header-images.option-2 .header-image,
    .header-images.option-1 .header-image,
    .news-header-image {
        height: 22rem;
    }

    /* ---------- Search ---------- */
    .section-search-form {
        width: 350px;
    }

    /* ---------- Contact block ---------- */
    .contact-block { min-height: 18rem; }
}


/* =====================================================
   MOBILE  (max-width: 768px)
   ===================================================== */
@media (max-width: 768px) {

    /* ---------- Typography ---------- */
    h2 {
        font-size: 1.875rem;
        margin-bottom: 1.5rem;
    }
    h3 { font-size: 1.375rem; }
    p  { font-size: 1rem; }

    /* ---------- General ---------- */
    .wrap,
    .footer-content { padding-inline: 1rem; }

    .site-main { margin-bottom: 2rem; }

    /* prevent horizontal scroll caused by off-screen menu panel */
    body { overflow-x: hidden; }

    /* lock scroll while the slide-in menu is open */
    body.menu-open { overflow: hidden; }


    /* ============================================
       HEADER — slide-in mobile menu
       ============================================ */

    header { position: relative; }

    .site-header-main {
        position: relative;            /* anchor for the absolute menu */
        flex-wrap: nowrap;
        padding: 0.75rem 1rem !important;
        gap: 0.75rem;
    }

    header .site-branding {
        padding-left: 0;
        flex: 1;
        min-width: 0;
        gap: 0.75rem;
    }

    .custom-logo { height: 3rem; width: auto; }

    .site-title  { width: auto; flex: 1; }
    .site-title a { font-size: 0.875rem; }


    /* ----- Hamburger / X button (HTML+CSS animated) ----- */
    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
        order: 3;
        z-index: 110;                   /* sits above the slide panel */
        margin-left: auto;
    }

    .menu-toggle-icon {
        position: relative;
        display: block;
        width: 28px;
        height: 20px;
    }

    .menu-toggle-icon span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--accent-clr);
        border-radius: 2px;
        transition: top 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
        transform-origin: center;
    }

    .menu-toggle-icon span:nth-child(1) { top: 0; }
    .menu-toggle-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .menu-toggle-icon span:nth-child(3) { top: 100%; transform: translateY(-100%); }

    /* Active = X */
    .menu-toggle.is-active .menu-toggle-icon span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    .menu-toggle.is-active .menu-toggle-icon span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.is-active .menu-toggle-icon span:nth-child(3) {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }

    /* visually-hidden label for screen readers */
    .screen-reader-text {
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }


    /* ----- Slide-in panel ----- */
    .site-header-menu {
        display: flex;                  /* always rendered, positioned off-screen */
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 1.5rem;

        position: absolute;
        top: 100%;                      /* sits BELOW the header bar */
        right: 0;
        width: 85%;
        max-width: 360px;
        height: calc(100vh - 100%);     /* fills the rest of the viewport */
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;

        background-color: var(--white-clr);
        box-shadow: -6px 6px 18px rgba(0,0,0,0.1);
        padding: 1.5rem 1.25rem;

        transform: translateX(110%);    /* hidden off-screen to the right */
        transition: transform 0.35s ease;
        z-index: 100;
    }

    .site-header-menu.toggled-on {
        transform: translateX(0);
    }


    /* ----- Primary menu inside the panel ----- */
    .main-navigation {
        width: 100%;
        justify-content: flex-start;
    }

    .primary-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .primary-menu > li {
        width: 100%;
        position: relative;
        border-bottom: 1px solid #ececec;
    }

    .primary-menu > li > a {
        display: block;
        padding: 0.875rem 3rem 0.875rem 0;   /* leaves room for the chevron */
    }

    /* re-enable the parent link tap (we use a separate chevron now) */
    .primary-menu li.menu-item-has-children > a {
        pointer-events: auto;
        cursor: pointer;
    }

    /* kill the desktop hover-underline on mobile */
    .primary-menu li a::after { display: none; }


    /* ----- Submenu toggle (chevron) ----- */
    .submenu-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 3rem;
        height: 3rem;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-clr);
    }

    .submenu-toggle::before {
        content: '';
        display: block;
        width: 9px;
        height: 9px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform 0.3s ease;
    }

    .menu-item-has-children.submenu-open > .submenu-toggle::before {
        transform: rotate(-135deg) translate(-2px, -2px);
    }


    /* ----- Submenus: collapse / expand on mobile ----- */
    /* COLLAPSED state — also explicitly cancels hover-based opening
       so the chevron is the single source of truth on mobile.       */
    .primary-menu li ul,
    .primary-menu li:hover > ul,
    .primary-menu li ul:hover,
    .primary-menu li.unique:hover > ul,
    .primary-menu li.unique ul:hover,
    .unique .sub-menu {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        background-color: transparent;
        width: 100% !important;
        transform: none !important;
        padding: 0 0 0 1rem;
        gap: 0;

        max-height: 0 !important;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.3s ease;
    }

    .unique > ul.sub-menu > li.title1 > ul.sub-menu,
    .unique > ul.sub-menu > li.title2 > ul.sub-menu {
        width: 100% !important;
        transform: none !important;
    }

    /* OPEN state — chevron click adds .submenu-open on the <li>.
       !important is needed to beat the matching-specificity hover rules above. */
    .primary-menu li.menu-item-has-children.submenu-open > ul,
    .primary-menu li.menu-item-has-children.submenu-open > ul.sub-menu {
        max-height: 2000px !important;
        padding: 0.25rem 0 0.75rem 1rem !important;
    }

    .primary-menu li ul li {
        padding: 0.5rem 0;
        white-space: normal;
    }

    .primary-menu li ul li a { display: block; }


    /* ----- Secondary menu inside the panel ----- */
    .secondary-menu {
        margin-inline: 0;
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
        gap: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #ececec;
    }

    .lang-switcher { padding-right: 0; }

    /* search box dropdown stays in viewport */
    .section-search-form {
        position: fixed;
        top: 70px;
        left: 1rem;
        right: 1rem;
        width: auto;
    }


    /* ============================================
       CONTENT
       ============================================ */

    /* ---------- News ---------- */
    .page-template-page-news .news-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .news-content { padding-top: 1.5rem; }

    .news-block {
        flex-direction: column;
        gap: 1.5rem;
    }

    .home-content .news-card,
    .home-content .inst-details {
        flex-basis: 100%;
        width: 100%;
    }

    .news-card .news-details { padding: 1.25rem; }

    /* ---------- Section titles (button stacks under heading) ---------- */
    .news-title,
    .listing-title,
    .events-title,
    .gallery-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding-top: 2.5rem;
    }

    .news-title .button,
    .events-title .button {
        margin-top: 0;
    }

    .gallery-title { padding-bottom: 2rem; }

    /* ---------- Events page ---------- */
    .events-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .filter-buttons {
        margin-left: 0;
        flex-wrap: wrap;
    }

    /* ---------- Calendar ---------- */
    .calendar-container { margin-bottom: 2.5rem; }

    .simple-calendar table { font-size: 1rem; }

    .simple-calendar th {
        font-size: 1.125rem;
        padding: 0.75rem 0.25rem;
    }

    .simple-calendar td {
        padding: 0.75rem 0.25rem;
    }

    .simple-calendar td.day-cell,
    .simple-calendar td.day-cell span.square {
        width: 2.5rem;
        height: 2.5rem !important;
    }

    .month-year {
        font-size: 1.75rem;
        padding-left: 1rem;
    }

    .nav-arrows {
        padding: 1rem 1rem 0 0;
        gap: 1rem;
    }

    .nav-arrows button i {
        padding: 0.5rem;
        font-size: 1.5rem;
    }

    .event-info h4    { font-size: 1.375rem; }
    .event-info p     { font-size: 1rem; }
    .event-day        { font-size: 2rem; }
    .event-month,
    .event-weekday    { font-size: 1rem; }

    /* ---------- Single page header images: stack vertically ---------- */
    .header-images.option-3,
    .header-images.option-2,
    .news-header-images {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .header-images.option-3 .header-image:first-child,
    .header-images.option-3 .header-image:nth-child(2),
    .header-images.option-3 .header-image:nth-child(3),
    .news-header-image,
    .news-header-image:first-child,
    .news-header-image:nth-child(2),
    .news-header-image:nth-child(3) {
        grid-column: auto;
        grid-row: auto;
        height: 14rem;
    }

    .header-images.option-2 .header-image,
    .header-images.option-1 .header-image {
        height: 14rem;
    }

    /* ---------- Single page content ---------- */
    .single-page-content h2 {
        font-size: 1.75rem;
        margin: 2rem auto;
    }

    .single-page-content p { font-size: 1.05rem; }

    .single-page-content .event-data {
        flex-direction: column;
        gap: 0.75rem;
        padding-bottom: 1.5rem;
    }

    .single-content iframe,
    .single-featured-image img,
    .publication-image img {
        width: 100%;
    }

    .wide-header-image { height: 22dvh; }

    /* ---------- Links page ---------- */
    .links-content {
        grid-template-columns: 1fr;
    }

    /* ---------- Publications: 2 columns ---------- */
    .publications-content {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---------- Search results ---------- */
    .search-results .results-article:has(.post-thumbnail) {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .search-results header h2,
    .search-results .page-title {
        font-size: 1.875rem;
    }

    .search-results .nav-links {
        flex-wrap: wrap;
        gap: 1rem;
        font-size: 1.1rem;
    }

    /* ---------- Contact block ---------- */
    .contact-block { min-height: 14rem; }

    a.map-link span {
        padding: 1rem 1.25rem;
        margin: 1rem;
        font-size: 0.95rem;
    }

    /* ---------- Splide / gallery arrows tighter ---------- */
    .splide__arrow { padding: 1rem; }

    /* ---------- Footer ---------- */
    .site-footer { padding-block: 3rem; }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .footer-navigation ul { gap: 1rem; }
}


/* =====================================================
   SMALL MOBILE  (max-width: 480px)
   ===================================================== */
@media (max-width: 480px) {

    /* ---------- Typography ---------- */
    h2 {
        font-size: 1.625rem;
        margin-bottom: 1.25rem;
    }
    h3 { font-size: 1.25rem; }

    /* ---------- Header ---------- */
    .custom-logo {
        height: 2.5rem;
        width: auto;
    }

    .site-title a { font-size: 0.8rem; }

    .secondary-menu svg {
        width: 22px;
        height: 22px;
    }

    /* slide-in panel takes more of the screen on small phones */
    .site-header-menu {
        width: 92%;
        max-width: none;
    }

    /* ---------- Cards: tighter padding ---------- */
    .news-details,
    .event-details,
    .links-details,
    .publications-details,
    .news-card .news-details {
        padding: 1rem;
        gap: 0.75rem;
    }

    /* ---------- Publications: single column ---------- */
    .publications-content {
        grid-template-columns: 1fr;
    }

    /* ---------- Buttons ---------- */
    .button a {
        padding: 0.5rem 1.25rem;
        font-size: 0.95rem;
    }

    /* ---------- Calendar squeeze ---------- */
    .simple-calendar th,
    .simple-calendar td {
        padding: 0.5rem 0.125rem;
    }

    .simple-calendar th { font-size: 1rem; }

    .simple-calendar td.day-cell,
    .simple-calendar td.day-cell span.square {
        width: 2rem;
        height: 2rem !important;
        font-size: 0.9rem;
    }

    .month-year { font-size: 1.5rem; }

    /* ---------- Single page header images ---------- */
    .header-images.option-3 .header-image:first-child,
    .header-images.option-3 .header-image:nth-child(2),
    .header-images.option-3 .header-image:nth-child(3),
    .header-images.option-2 .header-image,
    .header-images.option-1 .header-image,
    .news-header-image {
        height: 11rem;
    }

    .single-featured-image img,
    .single-content iframe,
    .publication-image img {
        width: 100%;
    }

    /* ---------- Inst card stacks logo above text ---------- */
    .inst-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .inst-logo img { max-height: 3rem; }

    /* ---------- Section search form ---------- */
    .section-search-form { top: 60px; }
}