/*
 * Chrome — top bar, sticky header, mobile drawer, footers, mobile action bar.
 *
 * The drawer has no counterpart in the design files: the approved mock-ups are
 * desktop-only above the fold. It is built here from the system's own parts —
 * Forest scrim, Paper panel, 1px Line rules, 44px targets, 280ms standard easing —
 * so it reads as part of the same design rather than a bolted-on menu.
 */

/* -------------------------------------------------------------------------
 * Top bar
 * ---------------------------------------------------------------------- */

.lb-topbar {
  background: var(--surface-darker);
  color: var(--paper);
  font-size: var(--text-small);
}

.lb-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  align-items: center;
  justify-content: space-between;
  padding-block: 7px;
}

.lb-topbar__notice {
  opacity: .85;
}

.lb-topbar__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}

.lb-chrome .lb-topbar__contact a,
.lb-chrome .lb-topbar__contact span {
  color: var(--paper);
  opacity: .85;
}

.lb-chrome .lb-topbar__contact a,
.lb-chrome .lb-drawer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.lb-chrome .lb-topbar__contact a:hover {
  color: var(--paper);
  opacity: 1;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.lb-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface-page);
  border-bottom: var(--border-width) solid var(--border-default);
}

.lb-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 72px;
}

/* The wordmark's sizes are lockup dimensions, not ramp steps - লজিবাংলা is set as
   live type and these are the two sizes the mark is drawn at. They stay literal. */
.lb-chrome .lb-wordmark {
  font-family: var(--font-bangla);
  font-size: 24px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wordmark);
  line-height: 1;
  color: var(--deep-green);
  text-decoration: none;
  white-space: nowrap;
}

.lb-chrome .lb-wordmark:hover {
  color: var(--forest);
  text-decoration: none;
}

/*
 * Mark plus name, when a logo icon has been uploaded. Only the marked variant becomes a
 * flex row: without an upload the wordmark stays the plain inline anchor it has always
 * been, so nothing about the unmarked header moves.
 *
 * 10px is the gap that reads as one lockup rather than two elements — wide enough that
 * the tile is not touching the ল, tight enough that they are clearly one object.
 */
.lb-chrome .lb-wordmark--marked {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/*
 * A lockup dimension like the type beside it, and sized to the cap height of the 24px
 * wordmark rather than to a spacing token — the tile and the letterform have to look
 * like they were drawn at the same scale.
 *
 * The radius is defensive: the supplied artwork is already a rounded tile on
 * transparency, but the next upload might be a hard square, and a sharp corner in a
 * system where every other surface is rounded reads as a mistake.
 */
.lb-chrome .lb-wordmark__icon {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  object-fit: contain;
  /* The mark ships as a fixed square; never let a flex row squeeze it. */
  flex: none;
}

.lb-wordmark__text {
  display: block;
}

.lb-nav {
  flex: 1;
  min-width: 0;
  margin-left: var(--space-2);
}

.lb-nav__list,
.lb-chrome .lb-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-5);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-body-sm);
}

.lb-chrome .lb-nav a {
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--space-2);
}

.lb-chrome .lb-nav a:hover {
  color: var(--deep-green);
  text-decoration: none;
}

.lb-chrome .lb-nav .current-menu-item > a,
.lb-chrome .lb-nav .current_page_item > a,
.lb-chrome .lb-nav a[aria-current="page"] {
  color: var(--deep-green);
  font-weight: var(--weight-semibold);
}

.lb-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The group is a grouping hook for the breakpoint only — display:contents keeps the
   nav and the actions as direct flex children of the header row, so the nav still
   takes the free space and the buttons still sit at the end. */
.lb-header__nav-group {
  display: contents;
}

/* Hamburger: hidden until the nav runs out of room. */
.lb-chrome .lb-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  margin-inline-start: auto;
  padding: 0;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--deep-green);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard);
}

.lb-chrome .lb-menu-toggle:hover {
  background: var(--green-tint-6);
}

@media (max-width: 1080px) {
  .lb-header__nav-group {
    display: none;
  }

  .lb-chrome .lb-menu-toggle {
    display: inline-flex;
  }
}

/* -------------------------------------------------------------------------
 * Mobile drawer
 * ---------------------------------------------------------------------- */

.lb-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
}

.lb-drawer[data-open="true"] {
  visibility: visible;
}

.lb-drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--forest-scrim);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}

.lb-drawer[data-open="true"] .lb-drawer__scrim {
  opacity: 1;
}

.lb-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(88vw, 360px);
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  border-inline-start: var(--border-width) solid var(--border-default);
  box-shadow: var(--shadow-overlay);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-standard);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lb-drawer[data-open="true"] .lb-drawer__panel {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lb-drawer__panel {
    transform: none;
  }
}

/*
 * Astra's stylesheet sets `a { transition: 0.2s linear }`, which resolves to
 * transition-property: all — and that drags the drawer's inherited `visibility` into
 * a 200ms animation. For those 200ms every link inside still computes as hidden, so
 * .focus() is refused and the drawer opens with focus stranded behind it, which
 * strands keyboard and screen-reader users outside the menu they just opened.
 * Naming the properties we actually animate keeps visibility out of it.
 */
.lb-drawer a,
.lb-drawer button {
  transition-property: background-color, color, border-color, box-shadow;
}

.lb-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 72px;
  padding-inline: var(--gutter-mobile);
  border-bottom: var(--border-width) solid var(--border-default);
}

.lb-chrome .lb-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.lb-chrome .lb-drawer__close:hover {
  background: var(--green-tint-6);
  color: var(--deep-green);
}

.lb-drawer__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb-chrome .lb-drawer__nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-inline: var(--gutter-mobile);
  border-bottom: var(--border-width) solid var(--border-default);
  color: var(--ink);
  font-size: var(--text-body-size);
  text-decoration: none;
}

.lb-chrome .lb-drawer__nav a:hover {
  background: var(--green-tint-6);
  color: var(--deep-green);
  text-decoration: none;
}

.lb-drawer__actions {
  display: grid;
  gap: 10px;
  padding: var(--space-5) var(--gutter-mobile);
}

.lb-drawer__contact {
  margin-top: auto;
  padding: var(--space-5) var(--gutter-mobile) calc(var(--space-5) + env(safe-area-inset-bottom));
  border-top: var(--border-width) solid var(--border-default);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--muted);
}

/* Lock the page behind the drawer without losing scroll position. */
body.lb-drawer-open {
  overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Footer — full
 * ---------------------------------------------------------------------- */

.lb-footer {
  background: var(--surface-darker);
  color: var(--text-on-dark-2);
  border-top: var(--border-width) solid var(--rule-on-dark);
}

.lb-footer--full {
  padding-block-start: 56px;
}

.lb-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-8);
}

.lb-chrome .lb-footer .lb-wordmark__icon {
  width: 28px;
  height: 28px;
}

.lb-footer__brand .lb-wordmark,
.lb-chrome .lb-footer .lb-wordmark {
  font-size: 22px;
  color: var(--white);
}

.lb-chrome .lb-footer .lb-wordmark:hover {
  color: var(--white);
}

.lb-footer__tagline {
  margin: var(--space-4) 0 0;
  font-size: var(--text-small);
  color: var(--text-on-dark-4);
  max-width: 30ch;
}

.lb-footer__heading {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-overline);
  line-height: var(--lh-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-on-dark-4);
}

.lb-footer__list,
.lb-chrome .lb-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-small);
}

/* 24px minimum, per WCAG 2.5.8. The contact column's phone and email measured 17px
   tall - on a business that runs on referrals those are the two links that matter most
   and were the hardest to hit. The gap already spaces the rows, so the taller box
   changes reach without changing the layout. */
.lb-chrome .lb-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--text-on-dark-2);
  text-decoration: none;
}

.lb-chrome .lb-footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

.lb-footer__hours {
  color: var(--text-on-dark-4);
}

.lb-footer__legal {
  margin-top: var(--space-10);
  border-top: var(--border-width) solid var(--rule-on-dark);
  padding-block: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  font-size: var(--text-small);
  color: var(--text-on-dark-4);
}

.lb-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb-chrome .lb-footer__legal a {
  color: var(--text-on-dark-4);
}

.lb-chrome .lb-footer__legal a:hover {
  color: var(--white);
}

/* -------------------------------------------------------------------------
 * Footer — compact
 * ---------------------------------------------------------------------- */

.lb-footer--compact {
  padding-block: 28px;
}

.lb-footer--compact .lb-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
  font-size: var(--text-small);
}

.lb-footer--compact .lb-footer__legal-links {
  color: var(--text-on-dark-3);
}

.lb-chrome .lb-footer--compact a {
  color: var(--text-on-dark-3);
}

/* -------------------------------------------------------------------------
 * Mobile action bar
 * ---------------------------------------------------------------------- */

.lb-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: var(--surface-page);
  border-top: var(--border-width) solid var(--border-default);
  padding: var(--space-2) clamp(var(--space-4), 4vw, var(--gutter-mobile))
           calc(var(--space-2) + env(safe-area-inset-bottom));
}

.lb-actionbar .lb-btn {
  min-height: 56px;
}

@media (min-width: 768px) {
  .lb-actionbar {
    display: none;
  }
}