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

:root {
--clr-primary: #ffd896;
--clr-white: #ffffff;
--clr-dark: #2b2217;
--clr-muted: #5a4a35;
--clr-gray: #999;
--ff-label: "Yeseva One", serif;
--ff-body: "Forum", serif;
--nav-h: 64px;
}

html,
body {
width: 100%;
height: 100%;
font-family: var(--ff-body);
background: var(--clr-white);
color: var(--clr-dark);
}

a {
text-decoration: none;
color: var(--clr-black);
font-family: var(--ff-label);
}

h1, h2, h3, h4, h5, h6, p {
transition: transform 0.3s ease;
}

h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, p:hover {
    transform: translateY(-5px) scale(1.025);
}

/* ===== NAV ===== */
nav {
height: var(--nav-h);
background: var(--clr-primary);
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
padding: 0 28px;
position: relative;
z-index: 10;
}

.nav-search-wrap {
position: relative;
display: flex;
align-items: center;
}

.nav-search-input {
background: var(--clr-white);
border: none;
border-radius: 50px;
padding: 8px 18px 8px 42px;
font-family: var(--ff-label);
font-size: 0.88rem;
color: var(--clr-dark);
width: 240px;
outline: none;
}
.nav-search-input::placeholder {
color: var(--clr-gray);
}

.nav-search-icon {
position: absolute;
left: 13px;
width: 17px;
height: 17px;
opacity: 0.55;
pointer-events: none;
}

.nav-links {
display: flex;
gap: 36px;
list-style: none;
align-items: center;
}
.nav-links a {
font-family: var(--ff-label);
font-size: 0.9rem;
color: var(--clr-dark);
text-decoration: none;
transition: opacity 0.2s;
}
.nav-links a:hover {
opacity: 0.55;
}

.nav-hamburger {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: none;
border: none;
font-size: 1.5rem;
color: var(--clr-dark);
line-height: 1;
padding: 4px 6px;
}

/* ===== DROPDOWN ===== */
.dropdown {
position: absolute;
top: var(--nav-h);
right: 0;
width: 220px;
background: var(--clr-primary);
border-radius: 0 0 16px 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
overflow: hidden;
max-height: 0;
transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 50;
}
.dropdown.open {
max-height: 220px;
}
.dropdown a {
display: block;
padding: 14px 24px;
font-family: var(--ff-label);
font-size: 1rem;
color: var(--clr-white);
text-decoration: none;
transition: background 0.2s;
}
.dropdown a:hover {
background: rgba(0, 0, 0, 0.08);
}
/* ===== SEARCH DROPDOWN ===== */
.search-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 100%;
min-width: 280px;
background: var(--clr-white);
border-radius: 14px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
overflow: hidden;
max-height: 0;
opacity: 0;
pointer-events: none;
transition:
max-height 0.25s ease,
opacity 0.2s ease;
z-index: 100;
}
.search-dropdown.open {
max-height: 320px;
opacity: 1;
pointer-events: auto;
}

/* individual result row */
.sri {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 16px;
text-decoration: none;
color: var(--clr-dark);
transition: background 0.15s;
border-bottom: 1px solid #f0ebe3;
}
.sri:last-child {
border-bottom: none;
}
.sri:hover,
.sri.active {
background: var(--clr-primary);
}

.sri-icon {
font-size: 1.25rem;
flex-shrink: 0;
width: 28px;
text-align: center;
}
.sri-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.sri-text strong {
font-family: var(--ff-label);
font-size: 0.88rem;
}
.sri-text small {
font-family: var(--ff-body);
font-size: 0.75rem;
color: var(--clr-muted);
}

.seo {
margin-left: 10%;
margin-right: 10%;
margin-bottom: 10%;
}

/* ===== SEO CONTENT SECTION ===== */
.seo-content-section {
  margin-top: 60px;
  border-top: 2px dashed var(--clr-primary, #fcd299);
  padding: 32px 10% 80px;
}

.seo-content-section h2,
.seo-content-section h3 {
  font-family: var(--ff-label, "Yeseva One", serif);
  color: var(--clr-black-accent, var(--clr-dark));
  line-height: 1.2;
}

.seo-content-section h2 {
  font-size: 1.8rem;
  margin-bottom: 18px;
}

.seo-content-section h3 {
  font-size: 1.25rem;
  margin: 18px 0 10px;
}

.seo-content-section p,
.seo-content-section li {
  font-family: var(--ff-body, "Forum", serif);
  font-size: 15px;
  line-height: 1.6;
  color: #5a534c;
}

.seo-content-section ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.seo-content-section li {
  margin: 6px 0;
}

.seo-content-section .seo-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 768px) {
  .seo-content-section {
    padding: 28px 16px 96px;
  }
  .seo-content-section .seo-content-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ===== TABLET ≤ 860px ===== */
@media (max-width: 860px) {
    html,
    body {
    overflow: auto;
    }
    .nav-links {
    display: none;
    }
    nav {
    justify-content: space-between;
    }
    nav {
    padding: 0 16px;
    gap: 12px;
    justify-content: space-between;
    }
    #custom-lang-selector {
    margin-left: 8px;
    }
    .nav-search-input {
    width: 60vw;
    font-size: 0.85rem;
    }
}

/* ===== PHONE ≤ 520px ===== */
@media (max-width: 520px) {
    :root {
    --nav-h: 56px;
    }

    nav {
    padding: 0 0px;
    gap: 8px;
    }
    .nav-search-wrap {
    width: fit-content;
    }
    .nav-search-input {
    width: 60vw;
    font-size: 0.85rem;
    }
    .nav-search-icon {
    width: 15px;
    height: 15px;
    left: 9px;
    }
    #custom-lang-selector > div {
    height: 60vh;
    padding: 4px 10px 4px 6px;
    }
    #current-flag {
    width: 24px;
    height: 24px;
    }
    #lang-dropdown {
        height:max-content;
    }
}