/* ==========================================================================
   Site-wide header -- "Warm Card Bar"
   Restyles GeneratePress's own nav (logo, menu, mobile toggle, search icon)
   into a floating cream card that matches the rest of the design system.
   Deliberately does NOT touch menu structure/markup: the menu is still the
   real "Primary Menu" edited at Appearance > Menus, so adding, removing or
   reordering items there just works -- nothing here is hardcoded to the
   current items.

   Convention: the LAST item in the Primary Menu is automatically styled as
   the solid orange CTA button (see ".main-nav > ul > li:last-child" below).
   Put whatever should be the button last in the menu order.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --hd-ink:#1a1d1a;
  --hd-paper:#f7f4ee;
  --hd-card:#fffdf9;
  --hd-line:#e4ddd0;
  --hd-muted:#6a6459;
  --hd-accent:#e8552b;
  --hd-accent-dark:#c8421e;
  --hd-chip:#f1ece2;
  --hd-radius:14px;
  --hd-shadow:0 1px 2px rgba(26,29,26,.06),0 8px 24px rgba(26,29,26,.07);
}

/* ---------- the bar itself ---------- */
.main-navigation{
  /* same soft gradient language as .hd-hero / .hd-cat-hero, so the header
     doesn't read as a flat white strip sitting on top of the hero's gradient */
  background:linear-gradient(180deg, #fffaf2 0%, var(--hd-card) 100%);
  border:1px solid var(--hd-line);
  border-radius:var(--hd-radius);
  box-shadow:var(--hd-shadow);
  max-width:1200px;
  margin:20px auto 0;
}
.main-navigation .inside-navigation{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:10px 20px;
}

/* ---------- logo (now lives inside the nav at every width, see functions.php) ---------- */
.main-navigation .hd-mobile-logo{ flex:0 0 auto; }
.main-navigation .hd-mobile-logo a{ display:flex; align-items:center; }

/* ---------- primary menu (desktop: inline row) ---------- */
.main-navigation .main-nav{ flex:1 1 auto; min-width:0; }
.main-navigation .main-nav ul{
  display:flex; align-items:center; flex-wrap:wrap;
  margin:0; padding:0; list-style:none;
}
.main-navigation .main-nav > ul > li{ position:relative; }
.main-navigation .main-nav > ul > li > a{
  display:block;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:.9rem; font-weight:600;
  color:var(--hd-ink);
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li > a:focus{
  background:var(--hd-paper);
  color:var(--hd-accent-dark);
}

/* dedicated CTA item -- add the CSS class "menu-cta" to ONE menu item in
   Appearance > Menus (enable the "CSS Classes" field under Screen Options
   if it's hidden) to make that specific item the solid-orange button.
   Not tied to item order or label, so any item can be the CTA, and nothing
   else is affected when items are added/removed/reordered. */
.main-navigation .main-nav > ul > li.menu-cta{ margin-left:6px; }

/* Mobile: the closed menu (#primary-menu) is a 0-height, full-width flex row.
   The bar's 20px row-gap was still added above it, so the bar had ~20px more
   space at the bottom than at the top. No row gap when closed; when the menu
   is open, give it its own top spacing instead. */

/* Logo size. The SVG has almost no built-in padding, so it is set smaller
   than the old padded logo (200px wide ~ 50px tall on desktop). */
#site-navigation .hd-logo-svg{ width:200px !important; }

/* Article pages: featured image as a floating card under the header bar
   (it used to sit flush against the bar's bottom edge, with square corners). */
.single .inside-article > .featured-image.page-header-image-single{
  margin:28px auto 0 !important;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(26,29,26,.06),0 8px 24px rgba(26,29,26,.07);
}
.single .inside-article > .featured-image.page-header-image-single img{ display:block; width:100%; }
/* GeneratePress paints #page near-white; with the image now inset, that
   showed as a pale band around it. Same fix as the homepage cards. */
.single .site{ background:transparent; }

/* Space above the footer = space below the header bar on every template
   (28px desktop, 16px phone). The footer card's own margin-top provides the
   gap, so the content's trailing padding/margins are zeroed. */
.hd-home .site-main, .hd-cat-archive .site-main, .hd-static-page .site-main{ padding-bottom:0 !important; }
.single .hd-wrap{ padding-bottom:0 !important; }
.single .hd-wrap > :last-child, .single .hd-wrap > :last-child > :last-child, .single .hd-wrap .hd-faq:last-child{ margin-bottom:0 !important; }
.hd-static-page .hd-page-wrap{ padding-bottom:0 !important; }
.hd-static-page .hd-page-wrap > :last-child{ margin-bottom:0 !important; }

/* Top Produse: the article grid sits straight on the page background like
   the homepage's "Ultimele ghiduri publicate", not inside a card. */
.hd-static-page .hd-section-card:has(> .hd-grid){ background:transparent; border:0; box-shadow:none; padding:28px 20px 0; }

@media (max-width:600px){
  .hd-site-footer{ margin-top:16px !important; }
  .hd-static-page .hd-section-card:has(> .hd-grid){ padding:20px 0 0; }
}
@media (max-width:768px){
  .single .inside-article > .featured-image.page-header-image-single{ margin:16px 18px 0 !important; width:auto; }
}
@media (max-width:768px){
  #site-navigation .inside-navigation{ row-gap:0; column-gap:10px; }
  /* logo + search + menu button must fit on one row down to ~360px wide */
  #site-navigation .hd-logo-svg{ width:min(42vw,168px) !important; }
  #site-navigation.toggled .main-nav{ margin-top:14px; }
}
.main-navigation .main-nav > ul > li.menu-cta > a{
  background:var(--hd-accent);
  color:#fff;
  padding:8px 16px;
  border-radius:10px;
  font-weight:700;
}
.main-navigation .main-nav > ul > li.menu-cta > a:hover,
.main-navigation .main-nav > ul > li.menu-cta > a:focus{
  background:var(--hd-accent-dark);
  color:#fff;
}

/* submenus (safe defaults in case a dropdown is added later) */
.main-navigation .main-nav ul ul{
  display:none; flex-direction:column; position:absolute; top:100%; left:0; z-index:20;
  min-width:200px; margin-top:6px; padding:6px;
  background:var(--hd-card); border:1px solid var(--hd-line); border-radius:12px; box-shadow:var(--hd-shadow);
}
.main-navigation .main-nav ul li:hover > ul,
.main-navigation .main-nav ul ul.toggled-on{ display:flex; }
.main-navigation .main-nav ul ul li > a{ border-radius:8px; }

/* ---------- search icon (GP's built-in nav search / modal trigger) ---------- */
.main-navigation .menu-bar-items{ flex:0 0 auto; }
.main-navigation .menu-bar-item a{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:10px;
  background:var(--hd-chip);
  color:var(--hd-ink);
  transition:background-color .15s ease, color .15s ease;
}
.main-navigation .menu-bar-item a:hover,
.main-navigation .menu-bar-item a:focus{
  background:var(--hd-accent);
  color:#fff;
}
.main-navigation .menu-bar-item .gp-icon{ display:flex; }
.main-navigation .menu-bar-item svg{ fill:currentColor; width:16px; height:16px; }

/* the search modal GP opens on click (confirmed live: .gp-modal__overlay >
   .gp-modal__container > .search-modal-form > .search-modal-fields >
   input.search-field + button) */
.gp-modal__overlay{ background:rgba(26,29,26,.45); }
.gp-modal__container{
  background:var(--hd-card);
  border-radius:var(--hd-radius);
  box-shadow:var(--hd-shadow);
  border:1px solid var(--hd-line);
}
.search-modal-form{ padding:8px; }
.search-modal-fields{ display:flex; gap:8px; }
.search-modal-fields .search-field{
  flex:1 1 auto;
  font-family:'Hanken Grotesk',sans-serif;
  font-size:1rem;
  color:var(--hd-ink);
  background:var(--hd-paper);
  border:1px solid var(--hd-line);
  border-radius:10px;
  padding:12px 16px;
}
.search-modal-fields .search-field:focus{
  outline:none;
  border-color:var(--hd-accent);
}
.search-modal-fields button{
  flex:0 0 auto;
  width:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--hd-accent);
  color:#fff;
  border:none;
  border-radius:10px;
}
.search-modal-fields button svg{ fill:currentColor; }
.search-modal-fields button:hover{ background:var(--hd-accent-dark); }

/* ---------- mobile hamburger toggle ----------
   display is intentionally NOT set here -- GP itself shows/hides this button
   at its own nav breakpoint (768px); we only restyle its look, and only turn
   it into a flex container (for centering the icon) inside that breakpoint
   below, so it never appears next to the desktop inline menu. */
.main-navigation .menu-toggle{
  align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:11px;
  background:var(--hd-chip);
  border:none;
  color:var(--hd-accent);
}
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus{
  background:var(--hd-chip);
  color:var(--hd-accent-dark);
}
.main-navigation .menu-toggle .gp-icon{ color:inherit; }
.main-navigation .menu-toggle svg{ fill:currentColor; width:15px; height:15px; }
.main-navigation .menu-toggle .mobile-menu{ display:none; } /* hide the "Menu" text label, icon-only chip */

/* ---------- mobile (<=768px, matches GP's own nav breakpoint) ---------- */
@media(max-width:768px){
  .main-navigation .menu-toggle{ display:flex; }
  .main-navigation{
    /* 18px matches the sitewide mobile gutter standard (see site-design.css /
       comparison-articles.css) -- this bar is coupled to GP's own 768px nav
       breakpoint rather than the usual 600px card breakpoint, since its
       layout mode (inline vs. hamburger) changes at 768px, not 600px. */
    margin:16px 18px 0;
    max-width:none;
  }

  /* the toggled-open menu wraps to its own full-width row (flex:1 1 100%,
     order:10 -- set in functions.php) -- style that row as a stacked list */
  .main-navigation .main-nav{ width:100%; }
  .main-navigation .main-nav ul{
    flex-direction:column;
    align-items:stretch;
    padding-top:6px;
  }
  .main-navigation .main-nav > ul > li{
    border-top:1px solid var(--hd-line);
  }
  .main-navigation .main-nav > ul > li:first-child{ border-top:none; }
  .main-navigation .main-nav > ul > li > a{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 6px; border-radius:0;
  }
  .main-navigation .main-nav > ul > li:not(.menu-cta) > a::after{
    content:'\203A'; color:var(--hd-muted); font-size:1.1rem; font-weight:400;
  }
  .main-navigation .main-nav > ul > li.menu-cta{
    border-top:none; margin:10px 0 6px;
  }
  .main-navigation .main-nav > ul > li.menu-cta > a{
    text-align:center; justify-content:center; padding:13px;
  }

  /* submenus become inline, indented, non-floating on mobile */
  .main-navigation .main-nav ul ul{
    position:static; box-shadow:none; border:none; margin:0 0 0 14px; padding:0;
    background:transparent;
  }
}