/* =========================================================
   Mobile-first styles
   Organized sections:
   1) CSS Variables
   2) Base
   3) Navbar (container, logo, hamburger)
   4) Menu + Dropdowns
   5) Search (shared look) + mobile visibility
   6) Panel / Hero
   7) Content area, grids, links
   8) Article typography
   9) Tablet overrides (768–1023px)
  10) Desktop overrides (≥1024px)
  11) RTL
  12) Enhancements
   ========================================================= */

/* 1) CSS Variables */
:root {
  --nav-color: #001f3f;   /* Navbar + accents (also category & page-link color) */
  --panel-color: #ffffff; /* Content panel */
  --margins-color: #f8f8f8;
  --font-color: #000000;
  --blue-link: #0000ee;   /* Keep for things like suggestion links */
  --gray-desc: #333333;
}

/* 2) Base */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: var(--font-color);
  background: var(--margins-color);
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure at least full viewport height */
}

main {
  flex: 1 0 auto; /* Grow to fill space, don't shrink */
}

/* 3) Navbar (container, logo, hamburger) */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: var(--nav-color);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  z-index: 100;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.logo img {
  height: 40px;
  vertical-align: bottom;
}

#hamburger {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  cursor: pointer;
}

/* 4) Menu + Dropdowns */
.nav-menu {
  display: none;  /* shown when hamburger toggles */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Only let [hidden] hide the menu below desktop; desktop is controlled by media rules */
@media (max-width: 1023px) {
  .nav-menu[hidden] { display: none !important; }
}

.nav-menu li { margin: 0 1rem; }

.nav-menu a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

/* Mobile menu open state */
.nav-menu.active {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--nav-color);
  padding: 1rem;
  z-index: 101;
}
.nav-menu.active li { margin: 1rem 0; }

/* Dropdowns */
.dropdown { position: relative; }

.dropdown-menu {
  display: none;
  position: absolute;
  background: var(--nav-color);
  list-style: none;
  padding: .5rem;
  margin: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  border-radius: 4px;

  /* auto-size to longest item (no wrapping) */
  white-space: nowrap;
  min-width: max-content;
}
.dropdown:hover .dropdown-menu { display: block; }

/* One item per line (anchors inside dropdown) */
.dropdown-menu a {
  color: #ffffff;
  display: block;
  white-space: nowrap;
  padding: .5rem .75rem;
  font-weight: 300;
}
.dropdown-menu a + a { margin-top: .25rem; }

/* Ensure the categories dropdown overlays other menu items on mobile/tablet */
.nav-menu .dropdown-menu {
  z-index: 1000;                       /* above sibling <li> items and overlays */
  background-color: var(--nav-color);  /* explicit opaque background */
  opacity: 1;
}

/* 5) Search (shared look) + mobile visibility */
.search-input {
  padding: .5rem;
  border: none;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

/* Desktop search container (top bar) is hidden on mobile */
.search-container {        /* top-bar (desktop) search form */
  display: none;
  position: relative;      /* anchor suggestions under the input */
}

/* Mobile search lives inside the hamburger menu */
.nav-menu .mobile-only { display: block; }

.nav-menu .search-container-mobile {
  display: block;
  width: 100%;
}

/* Suggestions dropdowns: shared base look */
.search-results {
  background: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
  display: none;
  z-index: 102;
}

/* Desktop suggestions: absolute so they float under the input */
#search-results {
  position: absolute;
  width: 100%;
}

/* Mobile suggestions: render inline under the input */
#search-results-mobile {
  position: static;
  max-height: 240px;
}

.search-results li { padding: .5rem; }
.search-results a { color: var(--blue-link); text-decoration: none; }

/* 6) Panel / Hero */
.panel {
  margin-top: 60px;
  background: var(--panel-color);
  padding: 0;
  box-shadow: 0 0 10px rgba(0,0,0,.05);
  border-radius: 8px;
}

.hero {
  position: relative;
  height: 40vh;
  overflow: hidden;
  z-index: 1;
}
.hero img.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(0,0,0,.5);
  overflow: hidden;
  z-index: 2;

  /* Mobile-first padding: keep title away from edges */
  padding: 0 1rem 1rem;
}

.hero-overlay h1 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  padding-top: 5px;

  /* Fallback size if JS is off */
  font-size: clamp(2rem, 6vw, 2.5rem);

  /* Do NOT split words */
  overflow-wrap: normal;   /* don't break long words */
  word-break: keep-all;    /* never break within words (where supported) */
  -webkit-hyphens: none;
  hyphens: none;

  max-width: 92vw;         /* keep a little margin inside the hero on phones */
}

/* Ultra-small devices: a touch tighter */
@media (max-width: 360px) {
  .hero-overlay { padding: 0 .75rem .75rem; }
  .hero-overlay h1 { font-size: 1.15rem; }
}

/* Step up hero title on larger screens */
@media (min-width: 768px) {
  .hero-overlay { padding: 1rem 2rem; }
  .hero-overlay h1 { font-size: clamp(2.2rem, 3vw, 3.2rem); }
}

.hero-logo {
  max-height: 30%;
  max-width: 80%;
  width: auto;
  height: auto;
  padding: .5rem;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* 7) Content area, grids, links */
.content { padding: 1rem 1rem; min-height: 100px; }

/* List page intro blocks (home + section landing pages) */
.home-title {
  margin: 0.5rem 0 0.75rem;
  padding-inline: 1rem;  /* align with article padding */
  text-align: center;
}

.home-intro,
.section-intro {
  margin: 0 0 1.25rem;
}

.categories-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* Homepage cards / page links */
.category-link,
.page-link {
  text-decoration: none;
  color: var(--nav-color);       /* your change retained */
  display: block;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: box-shadow .2s;
}
.category-link:hover,
.page-link:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  text-decoration: none;
}
.category-link:hover h2 { text-decoration: none; }

.category-link h2 {
  margin: 0 0 .5rem;
  font-weight: bold;
  color: var(--nav-color);       /* your change retained */
}
.category-link p { margin: 0; color: var(--gray-desc); }
.page-link { font-weight: 500; }

/* 8) Article typography */
article {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--font-color);
  margin: 0;
  padding: 0;
}

.content article p,
.content article h1,
.content article h2,
.content article h3,
.content article ul,
.content article ol { margin: 1rem 0; }

/* Justified body text, no automatic hyphenation */
.content > article p,
.content > article blockquote p {
  /*text-align: justify;
  text-justify: inter-word;*/
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: break-word;
}

/* Keep headings/code/tables left-aligned */
.content > article h1,
.content > article h2,
.content > article h3,
.content > article h4,
.content > article pre,
.content > article code,
.content > article table { text-align: left; }

/* Slightly nicer headings */
.content > article h1,
.content > article h2,
.content > article h3 { text-wrap: balance; }

/* Inner horizontal padding for content pages only */
.content > article { padding-inline: 1rem; }

/* 9) Footer */
footer {
  background: var(--nav-color); /* Matches navbar background */
  color: #ffffff; /* White text */
  text-align: center; /* Centered text */
  padding: 0.1rem; /* Consistent with navbar padding */
}

/* 10) Tablet overrides (768–1023px)
      - Keep hamburger & mobile search
      - Keep two-column categories
      - Full-width panel (no side margins) for an app-like feel */
@media (min-width: 768px) and (max-width: 1023px) {
  .panel {
    width: 100%;
    margin: 60px 0 2rem;
    border-radius: 0;
  }

  /* Keep two columns on tablet */
  .categories-grid { grid-template-columns: 1fr 1fr; }

  /* NAV: keep mobile behavior on tablet */
  .nav-container { justify-content: space-between; }
  .nav-menu { display: none; }         /* closed by default */
  .nav-menu.active {                   /* opens under the bar */
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--nav-color);
    padding: 1rem;
    z-index: 101;
  }

  #hamburger { display: inline-block; } /* keep hamburger visible */
  .search-container { display: none; }  /* hide top-bar search on tablet */
  .mobile-only { display: block; }      /* show mobile search in menu */

  /* Slightly wider inner padding for reading on tablet */
  .content > article { padding-inline: 1.5rem; }
}

/* 11) Desktop overrides (≥1024px)
       - Centered menu, right-aligned search
       - Hide hamburger + mobile search
       - Panel back to 60% with side margins */
@media (min-width: 1024px) {
  .panel {
    width: 60%;
    margin: 60px auto 2rem;
    border-radius: 8px;
  }

  .nav-container { justify-content: space-between; }

  /* Center menu; show as row */
  .nav-menu {
    display: flex;
    order: 2;
    flex: 1;
    justify-content: center;
    position: static;
    padding: 0;
  }
  .nav-menu.active {
    display: flex;     /* same as closed on desktop */
    position: static;
    padding: 0;
  }

  /* Show the top-bar search on the right */
  .search-container {
    display: block;
    order: 3;
    margin-left: auto;  /* push to right edge */
  }

  /* Hide mobile search + hamburger on desktop */
  .mobile-only { display: none !important; }
  #hamburger { display: none; }

  /* Keep two columns on desktop */
  .categories-grid { grid-template-columns: 1fr 1fr; }

  /* Extra breathing room for article content on desktop */
  .content > article { padding-inline: 2rem; }
}

/* 12) RTL */
html[dir="rtl"] .logo { order: 3 !important; }

/* 13) Enhancements */
@media (max-width: 360px) {
  /* If justification looks too tight on very small screens, relax it */
  .content > article p,
  .content > article blockquote p { text-align: left; }

  /* (Optional) allow hyphenation only on the tiniest devices */
  .content > article p,
  .content > article li,
  .content > article blockquote p {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

@supports (text-wrap: pretty) {
  .content > article p,
  .content > article li,
  .content > article blockquote p {
    text-wrap: pretty; /* reduces rivers/gaps while hyphenation is off */
  }
}

/* Force the menu visible on desktop widths even if earlier rules linger */
@media (min-width: 1024px) {
  .nav-menu { display: flex !important; }
}



.article-video {
  padding: 1rem;
}

.article-video-frame {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.article-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}