/* Extra theme styles live here */
.entry-title { margin: .25rem 0 .5rem; }
.archive-description { color: #666; margin-bottom: 1rem; }
.cart-link { margin-left: auto; }
.cart-link .cart-count { background: #dc3545; color: #fff; border-radius: 999px; padding: 0 .45rem; margin-left: .25rem; font-weight: 700; }
/* ========== Hamburger toggle button ========== */
.nav-toggle { display: none; position: relative; width: 42px; height: 42px; border: 1px solid #e9ecef; border-radius: .6rem; background: #fff; align-items: center; justify-content: center; }
.nav-toggle .bar { position: absolute; width: 22px; height: 2px; background: #111; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle .bar:nth-child(1){ transform: translateY(-6px); }
.nav-toggle .bar:nth-child(2){ transform: translateY(0); }
.nav-toggle .bar:nth-child(3){ transform: translateY(6px); }


/* X state */
.main-nav[data-menu-open="true"] .nav-toggle .bar:nth-child(1){ transform: rotate(45deg); }
.main-nav[data-menu-open="true"] .nav-toggle .bar:nth-child(2){ opacity: 0; }
.main-nav[data-menu-open="true"] .nav-toggle .bar:nth-child(3){ transform: rotate(-45deg); }


/* Accessibility helper */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }


/* ========== Responsive menu behavior ========== */
@media (max-width: 900px){
.nav-toggle { display: inline-flex; margin-right: .5rem; }
.main-nav { display: flex; align-items: center; gap: .5rem; }
.main-nav .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid #eee; box-shadow: 0 10px 24px rgba(0,0,0,.08); padding: .5rem; flex-direction: column; gap: 0; }
.main-nav[data-menu-open="true"] .menu { display: flex; }
.main-nav .menu > li > a { padding: .9rem .75rem; border-radius: .5rem; }
.main-nav .sub-menu { position: static; border: 0; box-shadow: none; border-radius: 0; padding: 0; display: none; }
.main-nav .menu > li:where(:hover, :focus-within) > .sub-menu { display: block; }
}

/* =========== MAIN NAV: BASE =========== */
.main-nav { position: relative; }
.main-nav .menu {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.main-nav .menu > li {
  position: relative; /* needed for dropdown positioning */
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .75rem .25rem;
  line-height: 1;
  text-decoration: none;
  color: #111;
  font-weight: 600;
}

/* Hover/focus state for top-level links */
.main-nav a:where(:hover, :focus-visible) {
  color: #0d6efd;
  text-decoration: none;
}

/* Optional caret indicator for items with children */
.main-nav .menu-item-has-children > a::after {
  content: "▾";
  font-size: .8em;
  transform: translateY(1px);
  opacity: .75;
}

/* =========== DROPDOWN PANEL =========== */
.main-nav .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  margin: 0;
  padding: .5rem;
  list-style: none;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  z-index: 50;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}

/* Show dropdown on hover and keyboard focus */
.main-nav .menu > li:where(:hover, :focus-within) > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Dropdown items */
.main-nav .sub-menu > li > a {
  display: block;
  padding: .5rem .75rem;
  border-radius: .375rem;
  color: #222;
  font-weight: 500;
  white-space: nowrap;
}

.main-nav .sub-menu > li > a:where(:hover, :focus-visible) {
  background: #f6f7f9;
  color: #0d6efd;
}

/* Nested (third-level) dropdowns fly out to the right */
.main-nav .sub-menu .menu-item-has-children {
  position: relative;
}
.main-nav .sub-menu .menu-item-has-children > a::after {
  content: "▸";
  float: right;
  opacity: .6;
}
.main-nav .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-left: .5rem;
}

/* Keep dropdowns within viewport on the far right */
.main-nav .menu > li:last-child > .sub-menu {
  right: 0;
  left: auto;
}

/* =========== TOUCH TARGETS & ACCESSIBILITY =========== */
.main-nav a:focus-visible,
.main-nav button:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* =========== SIMPLE RESPONSIVE STACK (CSS-only) =========== */
/* If your header collapses to a stacked menu on small screens, these styles make the submenu
   expand beneath its parent (no JS required). Adjust breakpoint to your layout. */
@media (max-width: 900px) {
  .main-nav .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .main-nav .menu > li > a {
    padding: .9rem .5rem;
    border-top: 1px solid #eee;
  }
  .main-nav .sub-menu {
    position: static;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none; /* collapsed by default on mobile */
  }
  .main-nav .menu > li:where(:hover, :focus-within) > .sub-menu {
    display: block;
  }
  .main-nav .sub-menu > li > a {
    padding: .75rem .75rem .75rem 1.25rem;
  }
}

/* =========== OPTIONAL: CART LINK NUANCE =========== */
/* If you append a cart link to the primary menu (as in the starter theme), keep it aligned */
.main-nav .cart-link > a {
  padding: .5rem .6rem;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
}
.main-nav .cart-count {
  background: #dc3545;
  color: #fff;
  border-radius: 999px;
  padding: 0 .45rem;
  margin-left: .25rem;
  font-weight: 700;
}

/* Highlight WooCommerce product price in search results */
.search-results .search-content .price {
display: block;
margin-top: .25rem;
font-weight: 600;
color: #0d6efd;
}

.woocommerce-product-short-description {
    font-size: 14px;
    line-height: 1.4em;
    color: #555;
    margin-top: 10px;
}