/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet — 1024px */
@media (max-width: 1024px) {
  :root {
    --ck-header-height: 64px;
    --ck-header-height-sticky: 52px;
  }

  h1 { font-size: var(--ck-font-size-3xl); }
  h2 { font-size: var(--ck-font-size-2xl); }

  .site-content__inner {
    padding: 0 var(--ck-space-4);
  }

  .footer-widgets__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .main-navigation #primary-menu {
    gap: var(--ck-space-4);
  }

  .main-navigation #primary-menu a {
    font-size: var(--ck-font-size-xs);
  }
}

/* Large mobile — 768px */
@media (max-width: 768px) {
  :root {
    --ck-header-height: 56px;
    --ck-header-height-sticky: 48px;
  }

  h1 { font-size: var(--ck-font-size-2xl); }
  h2 { font-size: var(--ck-font-size-xl); }
  h3 { font-size: var(--ck-font-size-lg); }

  /* Hamburger menu */
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--ck-space-2);
    z-index: 1002;
  }

  .main-navigation #primary-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--ck-primary-dark);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-8);
    z-index: 1001;
  }

  .main-navigation.toggled #primary-menu {
    display: flex;
  }

  .main-navigation #primary-menu a {
    font-size: var(--ck-font-size-xl);
    color: #fff;
  }

  /* Hamburger animation */
  .main-navigation.toggled .menu-toggle__bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .main-navigation.toggled .menu-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .main-navigation.toggled .menu-toggle__bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .header-actions {
    gap: var(--ck-space-2);
  }

  .language-switcher {
    display: none;
  }

  .site-content__inner {
    padding: 0 var(--ck-space-3);
  }

  .site-content__main {
    padding: var(--ck-space-4);
  }

  .footer-widgets__inner {
    grid-template-columns: 1fr;
    gap: var(--ck-space-6);
  }

  .footer-bar__inner {
    flex-direction: column;
    gap: var(--ck-space-3);
    text-align: center;
  }

  .card:hover {
    transform: none;
  }
}

/* Small mobile — 480px */
@media (max-width: 480px) {
  h1 { font-size: var(--ck-font-size-xl); }
  h2 { font-size: var(--ck-font-size-lg); }

  .site-header__inner {
    padding: 0 var(--ck-space-3);
  }

  .site-branding__title {
    font-size: var(--ck-font-size-lg);
  }

  .site-content__inner {
    padding: 0 var(--ck-space-2);
  }

  .site-content__main {
    padding: var(--ck-space-3);
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .btn--sm {
    width: auto;
  }

  .footer-widgets {
    padding: var(--ck-space-8) var(--ck-space-3);
  }
}

/* Body menu-open state */
body.menu-open {
  overflow: hidden;
}

/* ==========================================================================
   Responsive — Frigoforia
   ========================================================================== */

/* Hamburger button is only visible on mobile (default hidden) */
.ck-topbar__hamburger { display: none; }

/* ≤900px: sidebar becomes a slide-in sheet, tab bar appears */
@media (max-width: 900px) {
	.ck-shell--auth { grid-template-columns: 1fr; }

	/* Must out-specify `.ck-shell--auth .ck-sidebar { position: sticky }` in
	   main.css (0,2,0). As plain `.ck-sidebar` (0,1,0) this lost, so the sidebar
	   stayed in flow as a full-width grid row of height:100vh — merely shifted
	   out of sight by the transform. That was a whole blank screen above the
	   content, with the hamburger pushed below the fold along with it. */
	.ck-shell--auth .ck-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		width: 260px;
		height: 100vh;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		z-index: 100;
		box-shadow: 4px 0 40px rgba(0, 0, 0, 0.12);
	}
	.ck-shell--auth .ck-sidebar.is-open { transform: none; }

	/* Backdrop under the sheet */
	.ck-sidebar-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(42, 37, 32, 0.45);
		z-index: 90;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}
	.ck-sidebar-backdrop.is-visible {
		opacity: 1;
		pointer-events: auto;
	}

	.ck-topbar { position: sticky; }

	/* A flex child of the sticky bar, not an absolute sibling of it: as a
	   sibling it was painted under the bar's opaque background, and it scrolled
	   away with the page while the bar stayed put. */
	.ck-topbar__hamburger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		align-self: flex-start;
		width: 36px;
		height: 36px;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 8px;
		color: var(--ck-text);
		cursor: pointer;
	}
	.ck-topbar__hamburger:hover { background: var(--ck-sand); }
	.ck-topbar__hamburger:focus-visible { outline: 2px solid var(--ck-primary); outline-offset: 2px; }

	/* Content gets bottom padding so tab bar doesn't cover content */
	.ck-shell--auth .ck-content { padding-bottom: 72px; position: relative; }

	/* Mobile tab bar */
	.ck-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		display: flex;
		background: var(--ck-surface);
		border-top: 1px solid var(--ck-border);
		padding: 6px 8px;
		padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
	}
	.ck-tabbar__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		padding: 6px 0;
		color: var(--ck-text-muted);
		text-decoration: none;
		font: 500 10px/1 var(--ck-font-body);
	}
	.ck-tabbar__item svg { width: 20px; height: 20px; }
	.ck-tabbar__item.is-active { color: var(--ck-primary); }
	.ck-tabbar__item:hover { color: var(--ck-text); }

	/* Landing hero → single column on tablet */
	.landing-hero {
		grid-template-columns: 1fr;
		padding: 20px 24px 40px;
		gap: 32px;
	}
	.landing-hero__collage { height: 360px; }
	.landing-nav__inner { padding: 16px 24px; gap: 20px; flex-wrap: wrap; }
	.landing-nav__menu { order: 3; flex-basis: 100%; justify-content: flex-start; }
	/* When no menu is assigned to the "Landing — Marketing" location the nav is
	   not rendered at all (see template-landing.php) — :empty cannot do it here,
	   because the element still contains whitespace. */
	.landing-nav__list { gap: 20px; flex-wrap: wrap; }

	/* Dashboard: stats 2-col, recipes 2-col, shortcuts 2-col, posts 2-col */
	.ck-dashboard__stats,
	.ck-dashboard__shortcuts,
	.recipe-grid--dashboard,
	.recipe-grid--landing,
	.posts-grid,
	.posts-grid--dashboard,
	.landing-features {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ≤600px: even denser */
@media (max-width: 600px) {
	/* One line cannot hold the title, the language switcher and both buttons:
	   the title overflowed its box onto them and "+ New recipe" was cut off the
	   right edge, which also made the whole page scroll sideways. Title on its
	   own line, actions underneath. */
	.ck-topbar {
		flex-wrap: wrap;
		row-gap: 8px;
		column-gap: 8px;
		padding: 12px;
	}
	/* Menu button and title share the first line; the actions take the next one
	   — except on a page with no title, where they join the button's line. */
	.ck-topbar__title { flex: 1 1 auto; }
	.ck-topbar__h1 { font-size: 20px; overflow-wrap: anywhere; }
	.ck-topbar__sub { font-size: 12px; }
	.ck-topbar--no-title .ck-topbar__right { flex: 1 1 auto; margin-left: 0; }
	.ck-topbar__right {
		flex: 1 1 100%;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 6px;
	}
	/* Smaller pills so the language switcher and both actions still share one
	   line on a 375px screen, next to the 64px kept for the menu button. */
	.ck-topbar__right .btn--sm {
		padding: 6px 10px;
		font-size: 12px;
	}
	.ck-topbar__right .ck-lang { gap: 6px; }
	.ck-topbar__right .ck-lang__item + .ck-lang__item::before { margin-right: 6px; }
	.site-main { padding: 20px 20px 80px; gap: 24px; }

	.ck-dashboard__stats,
	.ck-dashboard__shortcuts { grid-template-columns: 1fr !important; }
	.recipe-grid--dashboard,
	.recipe-grid--landing { grid-template-columns: repeat(2, 1fr) !important; }
	.posts-grid,
	.posts-grid--dashboard { grid-template-columns: 1fr !important; }
	.landing-features { grid-template-columns: 1fr !important; }

	.ck-dashboard__expiring { flex-direction: column; align-items: flex-start; }

	.landing-hero { padding: 16px 20px 32px; gap: 20px; }
	.landing-hero__heading { font-size: clamp(36px, 10vw, 52px) !important; }
	.landing-hero__collage { height: 280px; }
	.landing-hero__photo--pasta { width: 160px; height: 200px; left: 20px; top: 10px; }
	.landing-hero__photo--curry { width: 150px; height: 150px; right: 10px; top: 110px; }
	.landing-hero__photo--salad { display: none; }
	.landing-hero__pill--white,
	.landing-hero__pill--charcoal { display: none; }

	.landing-nav__cta .btn { padding-left: 10px; padding-right: 10px; }
}