/*
 * Aperina layout — site shell: header, mobile drawer, footer, page templates.
 * Header and footer rules come from the approved homepage (styles/aperino-home.css).
 */

/* =========================================================
   Header
   ========================================================= */
.site-header .navbar-inner { min-height: 76px; }
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 48px; width: auto; }

/* Brand files come in wine (light ground) and cream (dark ground): pair them with .on-light / .on-dark */
.on-dark { display: none; }
[data-theme="dark"] .on-light { display: none; }
[data-theme="dark"] .on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-light { display: none; }
  :root:not([data-theme="light"]) .on-dark { display: block; }
}

.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.cart-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; min-width: 44px; padding-inline: var(--space-3); border-radius: var(--radius-cta); color: var(--text); text-decoration: none; font-size: var(--text-label); font-weight: 500; }
.cart-link svg { width: 18px; height: 18px; }
.cart-link:hover { background: color-mix(in oklab, var(--text) 7%, transparent); }
.cart-count { min-width: 22px; height: 22px; padding-inline: 6px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-size: var(--text-micro); font-weight: 500; display: grid; place-items: center; transition: background-color var(--dur-base) var(--ease-out); }
.cart-count[data-count="0"] { background: var(--bg-muted); color: var(--text-muted); }

.menu-btn { display: none; }
@media (max-width: 900px) {
  .site-header .primary-nav,
  .site-header .desktop-only { display: none; }
  .menu-btn { display: inline-flex; }
  .cart-link .cart-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* =========================================================
   Mobile drawer
   ========================================================= */
.drawer-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--overlay); }
/* Closed drawer is hidden, not just moved off-screen: no shadow at the page edge, no sideways scroll. */
.drawer { visibility: hidden; transition: translate var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); }
.drawer.is-open { visibility: visible; transition: translate var(--dur-slow) var(--ease-out), visibility 0s; }
.drawer-head { justify-content: space-between; }
.drawer-brand { display: flex; }
.drawer-brand img { height: 44px; width: auto; }
.drawer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.drawer .nav-link { display: block; font-size: var(--text-title); padding-block: var(--space-2); }
.drawer-cta { margin-block-start: auto; }

/* =========================================================
   Footer — mocha in both themes
   ========================================================= */
.site-footer { background: var(--ap-mocha); color: var(--ap-cream); }
.site-footer a { color: color-mix(in oklab, var(--ap-cream) 80%, transparent); }
.site-footer a:hover { color: var(--ap-cream); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: grid; gap: var(--space-4); justify-items: start; }
.footer-brand img { height: 96px; width: auto; }
.footer-brand p { color: var(--ap-sand); max-width: 34ch; }
.footer-title { font-size: var(--text-label); line-height: var(--lh-label); font-weight: 600; margin-block-end: var(--space-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-small); }
.footer-bottom { margin-block-start: var(--space-10); padding-block-start: var(--space-5); border-block-start: 1px solid rgb(239 233 225 / 0.15); font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--ap-sand); display: grid; gap: var(--space-2); }
.footer-bottom .ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }

/* =========================================================
   Pages
   ========================================================= */
.page-head { margin-block-end: var(--space-10); }
.entry-content.prose { max-width: none; }
.post-list { display: grid; gap: var(--space-8); }
.post-item { padding-block-end: var(--space-8); border-block-end: 1px solid var(--divider); }
.post-item a { text-decoration: none; }
.post-item a:hover { color: var(--link); }

.front-placeholder .t-display { max-width: 16ch; margin-block-end: var(--space-10); }

.not-found { text-align: start; }
.not-found-code { font-size: clamp(5rem, 16vw, 11rem); font-weight: 100; line-height: 1; color: var(--text-muted); margin-block-end: var(--space-6); }
.not-found-actions { margin-block-start: var(--space-8); }