/**
 * @file layout.css
 * One universal horizontal container used for every top-level page region
 * (nav, title, breadcrumb, main content) so they all start from the same
 * left edge site-wide, instead of each section picking its own padding.
 */

.site-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/*
 * Drupal automatically names its "Content" region wrapper "region-content"
 * (<div class="region region-content">) - this happens to collide with an
 * unrelated Tailwind utility class of the same name compiled into
 * main.min.css (padding-inline + margin-inline: auto), which was silently
 * adding an extra ~1rem of padding inside .site-container on every page.
 * Targeting both classes together outranks the single-class utility.
 */
.region.region-content {
  padding-inline: 0;
  margin-inline: 0;
  max-width: none;
}

/*
 * Logo sits on its own row above the menu (see page.html.twig). Sized to
 * 3x the menu link text's line-height (24px, measured via
 * getBoundingClientRect - link font-size is 16px/1rem, unaffected by the
 * body-text 18px override since it's set via its own Tailwind utility
 * class, not inherited).
 */
.site-logo-row {
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo img {
  display: block;
  height: 72px;
  width: auto;
}

/*
 * Main menu: full-width black bar (edge-to-edge, like the site footer's
 * background/content split), with flush colored buttons - one per menu
 * item, targeted by link path (not position) so colors stay attached to
 * the right item regardless of future reordering, and new items just
 * need one added rule. Colors are placeholders until finalized; only the
 * hex values need to change later, not this structure.
 */
.primary-menu-wrapper {
  background: #223028;
}

.primary-menu-inner {
  padding-inline: 0;
}

.primary-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.primary-menu-wrapper a {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 0;
}

.primary-menu-wrapper a:hover {
  opacity: 0.85;
  text-decoration: none;
}

/*
 * Mobile hamburger toggle. Hidden on desktop - the menu just renders
 * normally there via .primary-menu-nav (a plain wrapping div, doesn't
 * affect desktop's existing flex/wrap styling above since none of it
 * uses a direct-child ">" selector).
 */
.mobile-menu-toggle {
  display: none;
}

@media (max-width: 800px) {
  /*
   * Block, not flex - the button and the nav are stacked, not side-by-
   * side competing for width. A flex row here was the earlier bug: the
   * button and nav were flex siblings, so nav only got the leftover
   * width after the button, and align-items: center vertically centered
   * the short button against the nav's full stacked height instead of
   * sitting in its own row.
   */
  .primary-menu-inner {
    /* Top only, not padding-block - bottom padding here showed as a
       sliver of the wrapper's own dark background below the last menu
       item when open. */
    padding-top: 0.5rem;
  }

  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .hamburger-icon,
  .hamburger-icon::before,
  .hamburger-icon::after {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
  }

  .hamburger-icon {
    position: relative;
  }

  .hamburger-icon::before,
  .hamburger-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .hamburger-icon::before {
    top: -7px;
  }

  .hamburger-icon::after {
    top: 7px;
  }

  /* Collapsed by default; JS (lib/mobile-menu.js) toggles .is-open. */
  .primary-menu-nav {
    display: none;
    width: 100%;
  }

  .primary-menu-nav.is-open {
    display: block;
  }

  /*
   * Full-width stacked buttons, edge to edge - not sized to each link's
   * own text like the desktop row layout. flex-wrap: nowrap explicitly
   * overrides the base rule's "wrap" - left as "wrap" with
   * flex-direction: column, it can split into a second column instead
   * of one straight list. li gets width: 100% directly too, since that's
   * the actual flex item here (the ul's direct child) - the <a> having
   * width: 100% only sizes it against whatever width the li itself
   * already has, which isn't reliably the full row without its own rule.
   */
  /*
   * The base theme wraps this <ul> in its own extra <nav class="flex
   * justify-start relative"> (a row-direction flex container, not
   * anything in this file). With no flex-grow, the <ul> just shrink-
   * wraps to its widest item's content width ("ÕPPEPROGRAMMID") instead
   * of filling that row - every button then matches that shrink-wrapped
   * width, not the actual screen width. width: 100% + flex-grow here
   * makes the <ul> actually fill its row, which is the real missing
   * piece the li/a fixes above never addressed.
   */
  .primary-menu-wrapper ul {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100% !important;
    flex-grow: 1 !important;
  }

  /*
   * The actual rendered <li> markup carries baked-in Tailwind utility
   * classes from the base theme's own menu template (flex, flex-wrap,
   * justify-between, md:max-w-[375px] and friends - not anything in this
   * file) that fight a plain width:100% here. !important forces this
   * to win outright rather than chasing exactly which utility is
   * responsible. display:block on the li also stops its own
   * justify-between from letting the <a> inside shrink to content width
   * instead of filling the row.
   */
  .primary-menu-wrapper li {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  .primary-menu-wrapper a {
    width: 100% !important;
    max-width: none !important;
  }
}

.primary-menu-wrapper a[href="/"] {
  background: #223028;
}

.primary-menu-wrapper a[href="/oppeprogrammid"] {
  background: #c97b2c;
}

.primary-menu-wrapper a[href="/sundmused"] {
  background: #4c6b4a;
}

.primary-menu-wrapper a[href="/kontakt"] {
  background: #543412;
}

.primary-menu-wrapper a[href="/kerksuskeskus"] {
  background: #8fa37a;
}

/*
 * Gap above the page title (between it and the black menu bar) and below
 * it (before whatever follows - body text, listings, cards).
 */
header[role="banner"] {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

/*
 * Underline below the page title, full width of its container ("border
 * to border"). Color/thickness come from --page-title-line-* (theme.css)
 * so a page/section can override just the color later without touching
 * this rule - e.g. .node--11 { --page-title-line-color: ...; }
 */
header[role="banner"] h1 {
  padding-bottom: 0.75rem;
  border-bottom: var(--page-title-line-height) solid var(--page-title-line-color);
}

/*
 * Block titles (h3, applied via the .block-heading class added in
 * templates/block/block.html.twig and
 * templates/block/block--system-menu-block.html.twig) don't get the
 * underline by default - only page titles (h1, above) do. The front
 * page is an exception: its column titles (Sündmused/Ellamaa küla/
 * Loodusselts) keep the line, restored below via .node--11.
 */
.block-heading {
  padding-bottom: 0.5rem;
}

/*
 * Front page doesn't need a "Avaleht" page title above the hero image -
 * hidden here rather than removing the title block itself, so it's a
 * one-line revert if that changes later. Scoped to just the title block,
 * NOT the whole header[role="banner"] wrapper (that was the original
 * approach, but the same "header" region also holds the primary local
 * tasks block - View/Edit/Delete/Layout/Revisions - so hiding the whole
 * wrapper silently hid editors' only way to reach Layout Builder on the
 * front page too. Found 2026-08-30 when Marje reported no Layout option
 * there despite having it everywhere else.)
 */
body.path-frontpage #block-ellamaa-theme-page-title {
  display: none;
}

/*
 * The header[role="banner"] margin above still applies even when both
 * blocks inside it render empty - which is the normal case for a public/
 * anonymous visitor on the front page (no page title shown, and no
 * edit/layout tabs since they have no edit permissions) - leaving a
 * visible blank gap between the menu and the hero image. Zero it out
 * specifically on the front page; logged-in editors just get their
 * tabs list sitting flush against the menu bar instead, which is fine.
 */
body.path-frontpage header[role="banner"] {
  margin: 0;
}

/*
 * Deliberate exception: the front page's hero section (the first Layout
 * Builder section on node 11) breaks out of .site-container to run
 * edge-to-edge, unlike every other section on the site. Several unstyled
 * wrapper divs sit between .layout-content and the actual sections, so
 * we drop the constraint at the outer level and re-apply it per-section,
 * skipping the first one. Scoped via body.path-frontpage rather than
 * .node--11, since .layout-content is an ANCESTOR of .node--11 in the DOM
 * (article.node--11 is nested inside it) - a ".node--11 .layout-content"
 * descendant selector can never match, which silently no-opped this whole
 * rule until now (confirmed via querySelectorAll returning 0 elements).
 */
.path-frontpage .layout-content.site-container {
  padding-inline: 0;
  max-width: none;
}

.node--11 [class*="layout--"] {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.node--11 [class*="layout--"]:first-of-type {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/*
 * 15px accent strip under the hero image, same colors as the main menu
 * buttons, split into equal responsive bands (percentage-based gradient
 * stops, not fixed pixel widths, so it scales with viewport width).
 */
.node--11 [class*="layout--"]:first-of-type::after {
  content: "";
  display: block;
  width: 100%;
  height: 15px;
  background: linear-gradient(
    to right,
    #223028 0% 20%,
    #4c6b4a 20% 40%,
    #8fa37a 40% 60%,
    #c97b2c 60% 80%,
    #543412 80% 100%
  );
}

/*
 * Hero text overlay. White text since the current hero image is dark;
 * revisit if a brighter image is ever used instead. The 30% black
 * background layer behind the text (not the whole image) exists
 * specifically so the text stays readable even if a brighter hero image
 * replaces this one later - the dark image alone is enough contrast for
 * now, but that won't always be true.
 */
.hero-block {
  position: relative;
}

.hero-overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fcf9ef;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.75rem 1.5rem;
  font-family: "Ephesis", cursive;
  font-size: 3rem;
  font-weight: 400;
  text-align: center;
  max-width: 80%;
}

/* Hero image is much shorter on phones - scale the overlay down so the
   text (and its background box) stays inside the image instead of
   spilling into the menu above and content below. */
@media (max-width: 600px) {
  .hero-overlay-text {
    padding: 0.25rem 0.6rem;
    font-size: 1.625rem;
  }
}

/*
 * Core's "33/34/33" three-column preset gives the middle column 34% vs
 * 33% for the outer two (see threecol_section.css) - a deliberate core
 * default, not a bug, but it means images sharing one fixed aspect ratio
 * render at slightly different heights across the three Sündmused/Küla/
 * Loodusselts columns. Force genuinely equal thirds instead - but only
 * once there's room for three columns side by side (768px, the standard
 * tablet breakpoint - matches every iPad in portrait or landscape).
 * Below that, force single-column stacking; core's own breakpoint
 * (40em/640px) would otherwise create an unequal-thirds 3-column state
 * between 640-768px, still too narrow to read comfortably.
 */
@media screen and (max-width: 767px) {
  .node--11 [class*="layout--threecol"] > .layout__region {
    flex: 1 1 100% !important;
  }
}

@media screen and (min-width: 768px) {
  .node--11 [class*="layout--threecol"] > .layout__region {
    flex: 1 1 0 !important;
  }
}

/*
 * Spacing for the Sündmused/Küla/Loodusselts row: gap above it (from the
 * hero image), gap between the three columns, and gap between each
 * column's title and its content below.
 */
.node--11 [class*="layout--threecol"] {
  margin-top: 3rem;
  gap: 2rem;
}

/*
 * Gap between the Küla/Loodusselts images and the link list below them
 * (Küla lugu/Rahvamaja/Kontakt, Valgejärve matkarada/Õppeprogrammid) -
 * :first-child targets just the top of the list, pushing the whole
 * block down from the image above.
 */
.node--11 [class*="layout--threecol"] .layout__region h4:first-child {
  margin-top: 1.5rem;
}

/*
 * Front page exception: these column titles keep the underline that
 * .block-heading no longer has by default site-wide, plus their existing
 * size/spacing (unchanged from before). A small square marker sits before
 * the text - display: flex on the h3 lays the ::before square out as a
 * flex item next to the (anonymous) text node, no wrapper markup needed.
 */
.node--11 [class*="layout--threecol"] .layout__region h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 2.75rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--block-title-line-height) solid var(--block-title-line-color);
}

.node--11 [class*="layout--threecol"] .layout__region h3::before {
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  flex-shrink: 0;
  background: #c97b2b;
}

/*
 * Document download links (any file field rendered with the core
 * file_default formatter - Drupal wraps these in <span class="file">)
 * styled as buttons site-wide, with a document icon from the theme's
 * Phosphor icon set (icons/phosphor/file.svg) via CSS mask so it can be
 * colored to match the button text without a template override.
 */
.file a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.625rem 1.25rem;
  background: var(--button-document-color);
  color: #fff;
  border-radius: var(--radius-md, var(--radius));
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.file a:hover {
  opacity: 0.9;
  text-decoration: none;
}

.file a::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  background-color: currentColor;
  mask: url("../icons/phosphor/file.svg") no-repeat center / contain;
  -webkit-mask: url("../icons/phosphor/file.svg") no-repeat center / contain;
}

/* "Dokumendid" field label (see templates/field--field-dokument.html.twig)
   - same underline as page/block titles, plus margin below the line so
   the document buttons don't sit right against it. */
.field-heading {
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  padding-bottom: 0.5rem;
  border-bottom: var(--block-title-line-height) solid var(--block-title-line-color);
}

/*
 * Sidebar (page.sidebar_first/second) sits alongside the main content,
 * matching the same card-box pattern used for Õppeprogrammid/Sündmused
 * related-content sidebars. Only applies when a sidebar block is actually
 * placed and visible (see the has-sidebar class in page.html.twig) - pages
 * without one keep .layout-content's normal single-column behavior.
 */
.layout-main-row.has-sidebar {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.layout-main-row.has-sidebar .layout-content.site-container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  flex: 1 1 0;
  min-width: 0;
}

.layout-sidebar-first,
.layout-sidebar-second {
  flex: 0 0 330px;
  padding: 1rem;
  background: #f1ebdd;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, var(--radius));
}

/* Title 1.5x the link font-size (1.125rem), same convention as the
   Õppeprogrammid/Sündmused sidebars (.oppeprogramm-related/.sundmus-related).
   Pulled out to the box's edges (negative margin matching the box's own
   padding) so the colored band spans full-width with its own top corners,
   instead of sitting inset like the list below it. */
.layout-sidebar-first .block-title,
.layout-sidebar-second .block-title,
.layout-sidebar-first h3,
.layout-sidebar-second h3 {
  margin: -1rem -1rem 1rem;
  padding: 1rem;
  font-size: 1.6875rem;
  font-weight: 600;
  background: #4d6b4a;
  color: #fff;
  border-radius: var(--radius-lg, var(--radius)) var(--radius-lg, var(--radius)) 0 0;
}

.layout-sidebar-first ul,
.layout-sidebar-second ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.layout-sidebar-first li,
.layout-sidebar-second li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.layout-sidebar-first li:first-child,
.layout-sidebar-second li:first-child {
  padding-top: 0;
}

.layout-sidebar-first li:last-child,
.layout-sidebar-second li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.layout-sidebar-first a,
.layout-sidebar-second a {
  font-size: 1.125rem;
  color: #000;
  text-decoration: none;
}

.layout-sidebar-first a:hover,
.layout-sidebar-second a:hover {
  color: var(--primary);
  text-decoration: underline;
}

@media (max-width: 800px) {
  .layout-main-row.has-sidebar {
    flex-direction: column;
  }

  /*
   * The parent's align-items: flex-start means flex children no longer
   * stretch to fill the cross axis once flex-direction switches to column -
   * each one instead shrinks to its own content's intrinsic width. The
   * sidebar got width: 100% here already; .layout-content needs the exact
   * same explicit width, otherwise (found 2026-09-23, every sidebar page -
   * Rahvamaja lugu, Küla lugu, etc.) the main content column collapses to a
   * sliver and its text wraps one word per line instead of spanning full
   * width. min-width: 0 on it (see base rule) makes this collapse total
   * rather than just "narrower than expected", since there's no floor.
   */
  .layout-main-row.has-sidebar .layout-content.site-container {
    width: 100%;
  }

  .layout-sidebar-first,
  .layout-sidebar-second {
    flex-basis: auto;
    width: 100%;
  }
}

/*
 * Kontakt page: the embedded Google Maps iframe ships with hardcoded
 * width="600" height="450" attributes (Google's own default embed code),
 * which stops well short of the actual column width in the two-column
 * layout it sits in. Fill the container instead, keeping the original
 * 4:3 aspect ratio via aspect-ratio rather than a fixed height.
 */
.node--10 iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 450;
}