/* ============================================================================
   ORABELLA — layout.css
   ----------------------------------------------------------------------------
   Page scaffolding: the wrappers, the header, the footer. Shared by every page.

   Load order: base.css -> layout.css -> components.css

   1. Container & sections
   2. Site header
   3. Desktop navigation
   4. Mobile navigation drawer
   5. Site footer
   ==========================================================================  */

/* ============================================================================
   1. CONTAINER & SECTIONS
   ==========================================================================  */

.container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.section {
  padding-block: var(--section-spacing);
}

/* Removes the doubled gap when two sections sit back to back */
.section--flush-top {
  padding-top: 0;
}

.section__header {
  margin-bottom: var(--section-header-spacing);
  text-align: center;
}

.section__title {
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand);
  line-height: var(--line-height-heading);
}

/* Some sections carry the heading in the heading colour instead of the brand */
.section__title--dark {
  color: var(--color-heading);
}

/* A full-bleed tinted band, used to separate a section from the page */
.section--tinted {
  background-color: var(--color-surface-tinted);
}

/* --- Shop: sidebar beside the product grid -------------------------------- */

.shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

/* On small screens the filters belong after the goods, not before them */
.shop-layout__sidebar {
  order: 2;
}

.shop-layout__main {
  order: 1;
  min-width: 0;
}

@media (min-width: 992px) {
  .shop-layout {
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--space-xl);
    /* Grid items stretch by default, so the sidebar panel runs the
           full height of the product list — as in the original design. */
    align-items: stretch;
  }

  .shop-layout__sidebar {
    order: 0;
  }

  .shop-layout__main {
    order: 0;
  }
}

/* ============================================================================
   2. SITE HEADER
   ==========================================================================  */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-surface-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 7rem;
  padding-block: 1.5rem;
}

.site-header__logo img {
  width: 8rem;
  height: auto;
}

/* ============================================================================
   3. DESKTOP NAVIGATION
   ==========================================================================  */

.primary-nav {
  display: none;
}

.primary-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.primary-nav__item {
  position: relative;
}

.primary-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 2.4rem 1.5rem;
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-regular);
  color: var(--color-on-dark);
}

.primary-nav__link:hover,
.primary-nav__link:focus-visible,
.primary-nav__link.is-current {
  color: var(--color-brand);
}

.primary-nav__item:last-child .primary-nav__link {
  padding-right: 0;
}

/* --- Dropdown ------------------------------------------------------------ */

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 22rem;
  padding-block: var(--space-xs);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-menu);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.5rem);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility var(--transition-base);
}

.primary-nav__item--has-submenu:hover .submenu,
.primary-nav__item--has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu__link {
  position: relative;
  display: block;
  padding: 1rem 2rem;
  font-size: var(--font-size-body);
  color: var(--color-body);
  border-bottom: 1px dashed var(--color-border);
  transition:
    color var(--transition-base),
    padding-left var(--transition-base);
}

.submenu li:last-child .submenu__link {
  border-bottom: 0;
}

/* A short brand-coloured rule slides in ahead of the label on hover */
.submenu__link::before {
  content: "";
  position: absolute;
  left: 2rem;
  top: 50%;
  width: 1rem;
  height: 1px;
  background-color: var(--color-brand);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--transition-base);
}

.submenu__link:hover,
.submenu__link:focus-visible {
  color: var(--color-brand);
  padding-left: 3.5rem;
}

.submenu__link:hover::before,
.submenu__link:focus-visible::before {
  opacity: 1;
}

/* ============================================================================
   4. MOBILE NAVIGATION DRAWER
   ==========================================================================  */

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0.6rem;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-on-dark);
  transition: background-color var(--transition-base);
}

.nav-toggle:hover .nav-toggle__bar {
  background-color: var(--color-brand);
}

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}

.nav-drawer[hidden] {
  display: none;
}

.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.nav-drawer__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(30rem, 80vw);
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  background-color: var(--color-surface);
  /* visible so the close tab can sit outside the panel's right edge */
  overflow: visible;
  transform: translateX(-100%);
  transition: transform var(--transition-base);
}

/* The list scrolls, not the panel, so the close tab stays put */
.nav-drawer__panel > nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.nav-drawer.is-open .nav-drawer__backdrop {
  opacity: 1;
}

.nav-drawer.is-open .nav-drawer__panel {
  transform: translateX(0);
}

/* A brand-coloured tab hanging off the top-right corner of the panel */
.nav-drawer__close {
  position: absolute;
  top: 0;
  left: 100%;
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 5.6rem;
  font-size: 2.4rem;
  color: var(--color-on-dark);
  background-color: var(--color-brand);
  transition: background-color var(--transition-base);
}

.nav-drawer__close:hover,
.nav-drawer__close:focus-visible {
  color: var(--color-on-dark);
  background-color: var(--color-heading);
}

.mobile-nav li {
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav__link {
  display: block;
  padding: 1.2rem 4rem 1.2rem 0;
  font-size: var(--font-size-nav);
  color: var(--color-heading);
}

.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
  color: var(--color-brand);
}

.mobile-nav__link.is-current {
  color: var(--color-brand);
}

.mobile-nav__expand {
  position: absolute;
  top: 0.6rem;
  right: 0;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.6rem;
  color: var(--color-heading);
  transition:
    transform var(--transition-base),
    color var(--transition-base);
}

.mobile-nav__expand[aria-expanded="true"] {
  transform: rotate(180deg);
  color: var(--color-brand);
}

/* Opens by growing rather than appearing — main.js sets the exact height so
   the timing matches the content instead of guessing at a maximum. */
.mobile-nav__submenu {
  max-height: 0;
  padding-left: var(--space-md);
  overflow: hidden;
  opacity: 0;
  transition:
    max-height var(--transition-base),
    opacity var(--transition-base);
}

/* The fallback height opens the list even if the script has not run yet;
   main.js then replaces it with the measured height for exact timing. */
.mobile-nav__submenu.is-open {
  max-height: 60rem;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav__submenu {
    transition: none;
  }
}

.mobile-nav__submenu li:last-child {
  border-bottom: 0;
}

.mobile-nav__submenu .mobile-nav__link {
  font-size: var(--font-size-body);
  color: var(--color-body);
}

@media (min-width: 992px) {
  .primary-nav {
    display: block;
  }

  .nav-toggle {
    display: none;
  }
}

/* ============================================================================
   5. SITE FOOTER
   ==========================================================================  */

.site-footer {
  color: var(--color-muted);
  background-color: var(--color-surface-dark);
}

.site-footer__top {
  padding-block: var(--space-3xl);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.footer-widget__title {
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-widget-title);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand);
}

.footer-widget--brand {
  text-align: center;
}

.footer-widget__logo {
  display: inline-block;
  margin-bottom: var(--space-md);
}

.footer-widget__logo img {
  width: 7rem;
  height: auto;
}

.footer-widget__tagline {
  font-size: var(--font-size-body);
  color: var(--color-muted);
}

/* --- Contact list -------------------------------------------------------- */

.contact-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-body);
}

.contact-list__item .icon {
  font-size: var(--font-size-icon);
  margin-top: 0.4rem;
  color: var(--color-brand);
}

.contact-list__item a:hover,
.contact-list__item a:focus-visible {
  color: var(--color-brand);
}

/* --- Link list ----------------------------------------------------------- */

.footer-links li {
  margin-bottom: var(--space-xs);
}

.footer-links a {
  font-size: var(--font-size-body);
  color: var(--color-muted);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-brand);
}

/* --- Social -------------------------------------------------------------- */

.social-links {
  display: flex;
  gap: var(--space-sm);
}

.social-links__link {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  font-size: var(--font-size-icon);
  color: var(--color-surface-dark);
  background-color: var(--color-surface);
  border-radius: var(--radius-circle);
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

.social-links__link:hover,
.social-links__link:focus-visible {
  color: var(--color-on-dark);
  background-color: var(--color-brand);
}

/* --- Bottom bar ---------------------------------------------------------- */

.site-footer__bottom {
  padding-block: var(--space-lg);
  background-color: var(--color-surface-footer-bar);
}

.site-footer__copyright {
  font-size: var(--font-size-body);
  color: var(--color-on-dark-muted);
  text-align: center;
}

/* The copyright and the cookie link share the bar, centred together. */
.site-footer__bottom .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.site-footer__bottom .site-footer__copyright {
  margin: 0;
}

/* --- Footer on a narrow screen ------------------------------------------- */

/* One column of content down the middle reads better on a phone than a column
   pushed against the left edge, so the whole footer centres itself — headings,
   address, telephone numbers and the social buttons alike.

   The list of links is the exception worth explaining. Centring each line
   individually, as the original site did, leaves the words on a ragged edge
   that the eye has to hunt along. Instead the list becomes two columns whose
   block sits in the middle of the screen while the words inside stay flush
   left: centred as a group, easy to read as a list. */
@media (max-width: 575.98px) {
  .site-footer__top {
    text-align: center;
  }

  /* Address, telephone and email all centre, line by line.
     *
     * The address runs to three lines and each one is centred on its own, the
     * way the original site sets it — the block reads as a small centred stack
     * rather than a paragraph. The icon sits with the first line and the row
     * is allowed to wrap, so a long line breaks naturally instead of pushing
     * the icon off to one side. */
  .contact-list__item {
    display: block;
    text-align: center;
  }

  .contact-list__item .icon {
    display: inline-block;
    margin-top: 0;
    vertical-align: -0.2em;
    margin-right: 0.4rem;
  }

  .social-links {
    justify-content: center;
  }

  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--space-xs) var(--space-2xl);

    /* The grid is only as wide as it needs to be, and that block is what
           gets centred — not each line on its own. */
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }

  .footer-links li {
    margin-bottom: 0;
  }
}

@media (min-width: 576px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1.4fr 1fr 1fr;
    gap: var(--space-xl);
  }
}