/* ========= GLOBAL HEADER =========
   Base variables + layout for the site header
   =============================================================== */

:root {
  --header-bg: #1d1d1d;        /* Header and mobile panel background */
  --header-fg: #ffffff;        /* Foreground text color */
  --header-fg-dim: #cccccc;    /* Muted text color (links/inactive) */
  --container-padding: 16px;   /* Not used in header padding rules */
}

/* Hide Drupal admin UI bits inside header area (dev only) */
.site-header .contextual { display: none !important; }
.site-header .block-system-messages-block { display: none !important; }

/* Header: fixed height (don't change), sits above the mobile panel */
.site-header {
  background-color: var(--header-bg);
  color: var(--header-fg);
  font-family: sans-serif;
  height: 62px;                /* ← do not change per request */
  padding-left: 60px;          /* align content with page */
  padding-right: 60px;         /* right alignment for the panel anchor */
  position: sticky;          /* create stacking context */
  top: 0;
  z-index: 1000;               /* keep header above the mobile panel */
}

/* Header inner layout */
.site-header .container {
  max-width: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  align-items: stretch;
  height: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px;
  @media all and (min-width: 1024px) {
    gap: 16px;
  }
}

/* Highlighted link */
#block-ominimo-main-menu ul li {
  display: flex;
  align-items: center;
}
#block-ominimo-main-menu a[data-drupal-link-system-path="portal"],
#block-ominimo-main-menu a[data-drupal-link-system-path="user/login"],
#block-ominimo-main-menu a[data-drupal-link-system-path="user/logout"] {
  padding: 16px 12px;
  line-height: 1em;
  border-radius: 30px;
  background-color: #574CF9;
  color: #FFFFFF;
  box-sizing: border-box;
  display: block;
}


/* Branding (Ominimo + Zurich) */
.branding {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-height: 38px;
  zoom: 0.75;
  @media all and (min-width: 960px) {
    zoom: 1;
  }
}
.branding .ominimo-logo img { height: 38px; width: auto; display: block; }
.powered-by { display: flex; align-items: center; gap: 8px; color: var(--header-fg-dim); font-size: 12px; }
.powered-by img { height: 40px; width: auto; display: block; }

/* Desktop nav (links in a row) */
.main-nav { display: flex; align-items: center; }
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  @media all and (min-width: 800px) {
    gap: 24px;
  }
}
.main-nav a { color: var(--header-fg-dim); text-decoration: none; font-size: 13px; transition: color .2s ease; }
.main-nav a:hover, .main-nav a.is-active { color: var(--header-fg); }

/* ========= HAMBURGER BUTTON (icon images version) =========
   We show/hide real images for menu/close based on aria-expanded.
   =============================================================== */

.menu-toggle {
  display: none;               /* shown on <=768px */
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 24px;
  height: 24px;
  appearance: none;
  outline: none;
}
.menu-toggle img { width: 24px; height: 24px; display: block; }

/* Default: show hamburger, hide close */
.menu-toggle .icon-close { display: none; }
/* When opened: swap icons */
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Center the button inside its wrapper vertically */
.menu-toggle-wrap { display: flex; align-items: center; justify-content: center; height: 100%; }

/* ========= MOBILE TWEAKS @ 425px ========= */
@media (max-width: 600px) {
  .site-header { padding-left: 20px; padding-right: 20px; }  /* requested mobile padding */
  .site-header .container { flex-direction: row; align-items: center; gap: 12px; }

  /* Scale down logos for compact width */
  .branding { width: 275px; flex: 0 0 275px; gap: 10px; }
  .branding .ominimo-logo img { height: 26px; }
  .powered-by img { height: 27px; }
  .powered-by { font-size: 11px; gap: 6px; }

  .main-nav { flex: 1 1 auto; min-width: 0; }
  .main-nav ul { gap: 16px; flex-wrap: wrap; }
}

/* ========= MOBILE PANEL (<=768px) =========
   Opens directly BELOW the header (top: 62px),
   sticks to the RIGHT edge following header padding,
   has SHARP edges and same background color as the header,
   fixed width 375px with safety max-width on very narrow screens.
   =============================================================== */
@media (min-width: 769px) {
  .menu-toggle-wrap {
    display: none;
  }
}
@media (max-width: 768px) {
  .menu-toggle { display: inline-flex; align-items: center; }

  /* Hide any inline/desktop nav rendering inside other .main-nav wrappers */
  .main-nav:not(#primary-nav) { display: none; }

  /* The dropdown panel */
  #primary-nav {
    display: none;                 /* hidden by default */
    position: fixed;
    z-index: 900;                  /* below .site-header (1000) so it never covers it */
    top: 62px;                     /* start EXACTLY under the header */
    right: 0;                   /* align to header's right padding on desktop */
    left: 0;
    transform: none;
    box-sizing: border-box;

    width: 100%;
    height: 100%;
    overflow-y: auto;

    padding: 20px;
    background: var(--header-bg);  /* same color as header */
    border-radius: 0;              /* sharp corners per request */
    box-shadow: none;              /* no shadow */
  }
  #primary-nav.is-open { display: block; }

  /* Vertical list of links (pills) inside the panel */
  #primary-nav nav > ul,
  #primary-nav .menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #primary-nav a {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border: 1px solid #2e2e2e;
    border-radius: 999px;          /* pill buttons (keep rounded for items) */
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
    color: var(--header-fg);
    font-size: 14px;
    text-decoration: none;
  }
  #primary-nav a:hover { border-color: #3a3a3a; }

  #primary-nav a::after {
    content: '›';                  /* simple chevron; replace with SVG if needed */
    font-size: 18px;
    line-height: 1;
    opacity: .8;
    margin-left: 12px;
  }

  #block-ominimo-main-menu a[data-drupal-link-system-path="portal"],
  #block-ominimo-main-menu a[data-drupal-link-system-path="user/login"],
  #block-ominimo-main-menu a[data-drupal-link-system-path="user/logout"] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-size: 14px;
    text-decoration: none;
  }

  #block-ominimo-main-menu a[data-drupal-link-system-path="portal"]::after,
  #block-ominimo-main-menu a[data-drupal-link-system-path="user/login"]::after,
  #block-ominimo-main-menu a[data-drupal-link-system-path="user/logout"]::after {
    content: '›';
    font-size: 18px;
    line-height: 1;
    opacity: .8;
    margin-left: 12px;
  }

}

/* Lock background scrolling when the panel is open (JS toggles .nav-open) */
html.nav-open, body.nav-open { overflow: hidden; }



/* =========================================================
   GLOBAL FOOTER — OMINIMO
   Matches header spacing, flexible height, responsive layout
   ========================================================= */

/* Hide Drupal contextual/admin UI while styling */
.om-footer .contextual { display: none !important; }

/* Reset margins/paddings added by Drupal fields or wrappers */
.om-footer :where(p, ul, li, nav, .field, .paragraph) {
  margin: 0;
  padding: 0;
}

/* =========================================================
   MAIN WRAPPER
   ========================================================= */
.om-footer {
  background-color: var(--header-bg);
  color: var(--header-fg);
  font-family: sans-serif;

  /* Flexible height (never clip content) */
  min-height: 295px;

  /* Same side spacing as header */
  padding-top: 24px;
  padding-bottom: 16px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Two-column grid: left flexible, right fixed (Figma: 390px) */
.om-footer__container {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 24px 40px;
  align-items: stretch; /* equal column height */

  max-width: 1440px;      /* ← max width */
  margin-inline: auto;    /* ← centers it horizontally */
  width: 100%;            /* ← allow it to fill full width up to max */
  box-sizing: border-box; /* safety */
  padding-inline: 60px;

}

/* =========================================================
   LEFT COLUMN — brand, nav, copyright
   ========================================================= */
.om-footer__left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* --- Brand (Ominimo + Zurich) --- */
.om-footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.om-footer__logo img,
.om-footer__powered img {
  height: 40px;
  width: auto;
  display: block;
}

/* =========================================================
   NAV (ALWAYS TWO COLUMNS) — prevents stretching and
   lets links size to their text, wrapping when needed
   ========================================================= */

/* Remove redundant Drupal wrappers so children sit directly in the grid */
.om-footer__nav > div,
.om-footer__nav > div > div,
.om-footer__nav > div > div > div { display: contents; }

/* GRID — two equal tracks that ignore intrinsic min-content width */
.om-footer__nav {
  display: grid;  /* ← MUST be grid */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 48px;
  max-width: 520px;
  min-width: 0;

  /* do not stretch items to fill track */
  justify-items: start;
  align-items: start;
}

/* wrappers inside nav should NOT occupy full track width */
.om-footer__nav .paragraph--type--footer-nav-item,
.om-footer__nav .field__item,
.om-footer__nav .paragraph {
  justify-self: start;
  width: auto;
  min-width: 0;   /* allow shrinking inside track */
}

/* links: natural width (inline), can wrap, never define track width */
.om-footer__nav .paragraph--type--footer-nav-item a {
  display: inline;            /* not block */
  width: auto;
  max-width: 100%;
  white-space: normal;        /* allow wrapping */
  overflow-wrap: anywhere;    /* break long words if needed */

  color: var(--header-fg);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
  transition: color .2s ease;
}
.om-footer__nav .paragraph--type--footer-nav-item a:hover { color: #fff; }

/* --- Copyright --- */
.om-footer__bottom {
  margin-top: auto; /* stick to bottom of left column on desktop/tablet */
  padding-top: 8px;
}
.om-footer__copy {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  margin: 0;
}

/* =========================================================
   RIGHT COLUMN — payments + social links
   ========================================================= */
.om-footer__right {
  width: 390px;          /* Figma width */
  max-width: 100%;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 24px;             /* section spacing (payments ↔ methods ↔ social) */
}

/* --- Payment section --- */
.om-footer__payments {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  gap: 12px;             /* internal spacing between title and logo */
}

/* Titles: "Payment processing", "We accept...", "Follow us" */
.om-footer__payments-title,
.om-footer__methods-title,
.om-footer__social-title {
  font-family: var(--font-manrope, inherit);
  font-weight: 500;      /* Medium */
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0;
  color: #fff;
  text-align: right;
  margin: 0;
}

/* Mollie logo */
.om-footer__mollie img {
  display: block;
  height: 32px;
  width: auto;
  margin-left: auto;
}

/* Payment methods block */
.om-footer__methods-title { margin-top: 24px; text-align: center}
.om-footer__methods-logos { margin-top: 12px; }
.om-footer__methods-logos img {
  display: block;
  max-width: 300px;
  width: 100%;
  height: auto;
  margin-left: auto;
}

/* --- Social (Follow us + icons) --- */
.om-footer__social {
  margin-top: auto;      /* align with copyright baseline */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;             /* title ↔ icons */
}
.om-footer__social-links {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}
.om-social-link a {
  display: inline-block;
  width: 28px;
  height: 28px;
}
.om-footer__social img {
  width: 28px;
  height: 28px;
  display: block;
}

/* =========================================================
   RESPONSIVE (≤767px)
   ========================================================= */
@media (max-width: 768px) {
  .om-footer {
    padding: 35px 20px;
    /* no fixed height; let content define it */
    min-height: 0;
  }

  /* Stack L/R columns; center items on left for nicer look */
  .om-footer__container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .om-footer__left { align-items: center; }

  /* Brand: logos next to each other and centered */
  .om-footer__brand {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 12px;
  }

  /* NAV remains TWO columns even on mobile */
  .om-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Right column stacked and centered with a separator on top */
  .om-footer__right {
    width: 100%;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
    gap: 16px;
  }

  .om-footer__payments { align-items: center; }
  .om-footer__social   { margin-top: 0; align-items: center; }

  .om-footer__bottom {
    order: 99;                    /* send copyright to the very bottom */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 12px;
    padding-top: 16px;
    text-align: center;       /* center the copyright text on phones */
  }

  .om-footer__mollie img { height: 28px; }
  .om-footer__methods-logos img { max-width: 260px; }
}

/* =========================
   FOOTER NAV — DESKTOP FIX
   ========================= */
@media (min-width: 768px) {
  .om-footer__nav {
    display: grid;                          /* ensure grid on desktop */
    grid-template-columns: max-content max-content; /* ← hug content */
    column-gap: 32px;                       /* gap between columns */
    row-gap: 8px;                           /* vertical space */
    justify-content: start;
    justify-items: start;
    align-items: start;
    max-width: none;
    min-width: 0;
  }

  .om-footer__nav .paragraph,
  .om-footer__nav .field__item,
  .om-footer__nav .paragraph--type--footer-nav-item {
    margin: 0;
    padding: 0;
    justify-self: start;
    width: auto;
    min-width: 0;
  }

  .om-footer__nav .paragraph--type--footer-nav-item a {
    display: inline;
    width: auto;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}


/* ===== MOBILE FIX: place items with grid-areas so copyright is LAST ===== */
@media (max-width: 768px) {
  .om-footer__container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "nav"
      "right"
      "copy";           /* ← copyright comes after right column */
    gap: 24px;
  }

  .om-footer__left { display: contents; }

  .om-footer__brand  { grid-area: brand; justify-content: center; text-align: center; }
  .om-footer__nav    { grid-area: nav; }
  /*
  .om-footer__right  {  }
  */
  .om-footer__bottom { grid-area: copy; }

  .om-footer__right  {
    grid-area: right;
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 20px;
    padding-top: 24px; }
  .om-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 12px;
    padding-top: 16px;
    text-align: center;
    width: 100%;
  }
  .om-footer__copy {
    text-align: center;
  }
}