/* Import Adobe Fonts */
@import url("https://use.typekit.net/vxf4baj.css");

:root {
  /* Brand Colors */
  --color-primary: #122535;
  --color-secondary: #A68966;
  --color-accent: #D4AF37;

  /* Typography */
  --color-headline: #122535;
  --color-body: #4A5568;

  /* Neutrals */
  --color-neutral-dark: #2D3748;
  --color-neutral-light: #F4F1EA;
  --color-white: #FFFFFF;

  /* UI Feedback */
  --color-info: #5F7D95;
  --color-warning: #C2935C;
  --color-success: #4B6344;
  --color-error: #8B0000;

  --font-heading-display: "alegreya", serif;
  --font-body: "source-sans-3", sans-serif;

  --fs-text: clamp(1rem, 0.9rem + 0.25vw, 1rem);         /* ~16px */
  --fs-h1:   clamp(2rem, 1.2rem + 2.5vw, 2.5rem);        /* ~40px */
  --fs-h2:   clamp(1.75rem, 1.1rem + 2vw, 2.125rem);     /* ~34px */
  --fs-h3:   clamp(1.5rem, 1rem + 1.6vw, 1.75rem);       /* ~28px */
  --fs-h4:   clamp(1.25rem, 0.9rem + 1.2vw, 1.5rem);     /* ~24px */
  --fs-h5:   clamp(1.125rem, 0.85rem + 0.9vw, 1.25rem);  /* ~20px */
  --fs-h6:   clamp(1rem, 0.8rem + 0.6vw, 1.125rem);      /* ~18px */

  /* Font Weights */
  --fw-300: 300;
  --fw-regular: 400;
  --fw-700: 700;

  /* Font Styles */
  --fs-normal: normal;
  --fs-italic: italic;
}

/* General CSS */
/* Sets Alegreya for every element as defined */
h1, h2, h3 {
  font-family: var(--font-heading-display);
}
/* Sets Source Sans 3 for every element as defined */
h4, h5, h6,
body,
p, li, td, th,
label, input, textarea, select, button {
  font-family: var(--font-body);
}

/* Outer full-width container */
.section-full {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Inner contained content */

.section-inner {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.header-sticky-transparent {
    width: 100% !important;
    height: 100px !important;
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1000;

    display: flex;
    align-items: center;

    /* Glass effect */
    background: rgba(20, 20, 20, 0.35);   /* tint layer */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);   /* Safari support */

    /* optional: subtle border for premium look */
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner-grid {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.header-inner-grid .main-navigation {
  margin-left: auto;
  margin-right: 0;
}

@media (max-width: 768px) {
.header-inner-grid .main-navigation {
  margin-left: auto;
  margin-right: 0rem;
}
}

.header-inner-grid .custom-lang-switcher--desktop {
  margin-left: 0;
}

/* Header CSS */
/* 1. Desktop Styles - Keep as is */
.custom-header-nav .gb-menu .gb-menu-link {
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important; 
    color: #ffffff !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* Hover effect */
.custom-header-nav .gb-menu .gb-menu-link:hover {
    opacity: 0.7;
}

@media (max-width: 768px) {
    /* 1. Force the Overlay to be Full Screen Height */
    .gb-menu-container--mobile.gb-menu-container--toggled {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        background-color: var(--color-primary, #122535)!important;
    }

    /* 2. Style the Menu Links for Mobile */
    .gb-menu-container--mobile.gb-menu-container--toggled .gb-menu-link {
        font-family: var(--font-heading-display)!important;
        font-size: 1.8rem !important;
        font-weight: var(--fw-700) !important; 
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        text-transform: none;
        letter-spacing: 0.05em;
    }

    /* 3. Center the List Items (Updated ID to #menu-main-menu) */
    .gb-menu-container--toggled ul[id^="menu-main-menu-"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }
}


button.toggle-button {
  background: transparent !important;
}

.logo-wrapper {
  width: max-content;
  background: transparent;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.8rem;
  margin-top: 0;
}

.custom-lang-switcher {
    display: inline-block;
    white-space: nowrap;
}

.custom-lang-switcher .lang-link,
.custom-lang-switcher .lang-active {
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    color: #ffffff !important;
    display: inline;
}

.custom-lang-switcher .lang-active {
    font-weight: var(--fw-700) !important;
}

.custom-lang-switcher .lang-link {
    text-decoration: none;
}

.custom-lang-switcher .lang-link:hover {
    text-decoration: underline;
}

.custom-lang-switcher .lang-separator {
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    color: #ffffff !important;
    padding: 0 0.25em;
    display: inline;
}

/* Hide desktop version on mobile (below 768px) */
@media (max-width: 768px) {
    .custom-lang-switcher--desktop {
        display: none;
    }
    
    /* Show and center mobile version */
    .language-switcher-mobile .custom-lang-switcher--desktop {
        display: inline-block;
        width: 100%;
    }
    
    .language-switcher-mobile {
        text-align: center;
        display: block;
        width: 100%;
    }
}

/* Homepage CSS */
.home-hero {
    aspect-ratio: 16 / 9;
    position: relative;
}

@media (max-width: 1024px) {
    .home-hero {
        aspect-ratio: 9 / 16;
    }
}