/*
Theme Name: QRMenu Theme
Theme URI: https://github.com/Softmobil/qrmenu-theme
Author: Softmobil
Author URI: https://softmobil.com
Description: A lightweight restaurant menu theme that lists "urunler" grouped by the "kategoriler" taxonomy. Header supports uploadable logo and background via the Customizer. Default item image and sticky menu option available. Category headings can have a background image uploaded or picked via Unsplash search.
Version: 0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qrmenu
*/

/* Basic styles for header and menu */

html {
  scroll-behavior: smooth;
}

:root{
  --qrmenu-button-color: #0073aa;
  --qrmenu-button-hover-color: #005c88;
  --qrmenu-button-text-color: #ffffff;
  --qrmenu-menu-bg: #ffffff;
  --qrmenu-page-bg: #f6f7f9;
  --qrmenu-price-color: #000000;
  --qrmenu-desktop-cols: 4;
  --qrmenu-mobile-cols: 2;
  --qrmenu-title-size: 1.05rem;
  --qrmenu-price-size: 1.2rem;
  --qrmenu-excerpt-size: 1rem;
  --qrmenu-heading-font: "Poppins", sans-serif;
  --qrmenu-body-font: "Inter", sans-serif;
  --qrmenu-price-font: "Poppins", sans-serif;
  --qrmenu-category-heading-font: "Poppins", sans-serif;
  --qrmenu-menu-item-font: "Poppins", sans-serif;
  --qrmenu-menu-link-font: "Poppins", sans-serif;
  --qrmenu-category-heading-size: 1.25rem;
}

body {
  font-family: var(--qrmenu-body-font);
  margin: 0;
  padding: 0;
  color: #333;
  background: var(--qrmenu-page-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--qrmenu-heading-font);
}

.qrmenu-nav a {
  font-family: var(--qrmenu-menu-link-font);
}

.site-header {
  color: #fff;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.site-branding { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.site-logo img {
  max-width: 220px;
  height: auto;
}

.qrmenu-search {
  display: flex;
  width: min(100%, 360px);
  flex-shrink: 1;
  min-width: 0;
}

/* The search form's DOM position is fixed (see header.php); only its
   visual position relative to the logo changes, via flex "order" -
   defaults below match the "below" theme_mod default for both the
   desktop and mobile position settings. */
.site-logo { order: 1; }
.qrmenu-search { order: 2; }

/* Mobile logo/search position ("Mobil logo konumu"/"Mobil arama kutusu
   konumu") - search is always stacked (column, the .site-branding
   default) on mobile, only above/below is offered, there's no room for a
   side-by-side row on a phone screen. Logo position just aligns that
   stacked column, same idea as desktop below but its own setting since a
   layout that works wide doesn't always work narrow. */
@media (max-width: 767px) {
  .site-header.qrmenu-mobile-logo-left .site-branding { align-items: flex-start; }
  .site-header.qrmenu-mobile-logo-center .site-branding { align-items: center; }
  .site-header.qrmenu-mobile-logo-right .site-branding { align-items: flex-end; }

  .qrmenu-mobile-search-above .qrmenu-search { order: 1; }
  .qrmenu-mobile-search-above .site-logo { order: 2; }
  .qrmenu-mobile-search-below .qrmenu-search { order: 2; }
  .qrmenu-mobile-search-below .site-logo { order: 1; }
}

/* Desktop logo/search position ("Masaüstü logo konumu"/"Masaüstü arama
   kutusu konumu") - separate settings from the mobile ones above. Search
   additionally offers "left"/"right", placing the search box beside the
   logo in a row instead of stacked above/below it; flex-wrap keeps that
   row from squeezing content if a desktop browser window happens to be
   unusually narrow. The logo-position rules must come before the
   left/right search override below - same specificity, but left/right
   deliberately ignores logo position (see its own comment) and needs to
   win that tie. */
@media (min-width: 768px) {
  .site-header.qrmenu-desktop-logo-left .site-branding { align-items: flex-start; }
  .site-header.qrmenu-desktop-logo-center .site-branding { align-items: center; }
  .site-header.qrmenu-desktop-logo-right .site-branding { align-items: flex-end; }

  .qrmenu-desktop-search-above { flex-direction: column; }
  .qrmenu-desktop-search-above .qrmenu-search { order: 1; }
  .qrmenu-desktop-search-above .site-logo { order: 2; }

  .qrmenu-desktop-search-below { flex-direction: column; }
  .qrmenu-desktop-search-below .qrmenu-search { order: 2; }
  .qrmenu-desktop-search-below .site-logo { order: 1; }

  /* "left"/"right" already says which end the search box sits at, which
     also pins the logo to the opposite end - so unlike above/below,
     these two spread the pair across the full header width (space-between)
     rather than following the separate "Masaüstü logo konumu" setting,
     which would otherwise just leave them bunched together off to one
     side. The ".site-header" ancestor is repeated here to match the
     specificity of ".site-header.qrmenu-desktop-logo-* .site-branding"
     above (which sets align-items for the stacked layouts, and would
     otherwise win the cascade and top/bottom-align this row instead of
     centering it) - it must also stay below that rule in this file so an
     equal-specificity tie resolves in its favor. */
  .site-header .site-branding.qrmenu-desktop-search-left,
  .site-header .site-branding.qrmenu-desktop-search-right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .qrmenu-desktop-search-left .qrmenu-search { order: 1; }
  .qrmenu-desktop-search-left .site-logo { order: 2; }
  .qrmenu-desktop-search-right .qrmenu-search { order: 2; }
  .qrmenu-desktop-search-right .site-logo { order: 1; }
}

.qrmenu-search input[type="search"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
}

.qrmenu-nav-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--qrmenu-menu-bg);
  border-bottom: 1px solid #eee;
  padding: 10px 20px;
}

.qrmenu-nav {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.qrmenu-nav::-webkit-scrollbar {
  display: none;
}

.qrmenu-nav-wrap.sticky {
  position: sticky;
  top: 0;
  z-index: 999;
}

.qrmenu-nav a {
  color: var(--qrmenu-button-text-color);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  background: var(--qrmenu-button-color);
  display: inline-block;
}

.qrmenu-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.qrmenu-nav a:hover {
  background: var(--qrmenu-button-hover-color);
}

.qrmenu-nav-arrow:hover {
  background: var(--qrmenu-button-hover-color);
}

.qrmenu-nav-arrow {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: none;
  border-radius: 999px;
  background: var(--qrmenu-button-color);
  color: var(--qrmenu-button-text-color);
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.qrmenu-nav-arrow.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* Hamburger toggle for the mobile category dropdown (see the media query
   below) - hidden on desktop, where the scrolling pill row + arrows are
   still used as before. */
.qrmenu-nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: 999px;
  background: var(--qrmenu-button-color);
  color: var(--qrmenu-button-text-color);
  font-family: var(--qrmenu-menu-link-font);
  font-size: 1rem;
  padding: 10px 14px;
  cursor: pointer;
}

.qrmenu-nav-hamburger:hover {
  background: var(--qrmenu-button-hover-color);
}

.qrmenu-nav-hamburger-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  width: 18px;
  height: 13px;
  flex-shrink: 0;
}

.qrmenu-nav-hamburger-icon span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

/* On a phone a horizontally scrolling row of category pills is easy to
   miss (nothing hints there's more to scroll to) and fiddly to use, so
   below the desktop breakpoint the same <nav> becomes a dropdown list
   instead, toggled open/closed by the hamburger button above via a
   small script in qrmenu.js. */
@media (max-width: 767px) {
  .qrmenu-nav-arrow {
    display: none;
  }

  .qrmenu-nav-wrap {
    position: relative;
  }

  .qrmenu-nav-hamburger {
    display: inline-flex;
  }

  .qrmenu-nav {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--qrmenu-menu-bg);
    border: 1px solid #eee;
    border-top: none;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }

  .qrmenu-nav-wrap.is-open .qrmenu-nav {
    display: flex;
  }

  .qrmenu-nav a {
    display: block;
    white-space: normal;
    text-align: center;
    margin: 2px 0;
  }
}

.menu-group-section {
  display: grid;
  grid-template-columns: repeat(var(--qrmenu-mobile-cols), 1fr);
  gap: 20px;
  padding: 30px 20px;
  /* Keeps the sticky nav from covering the top of this section (and its
     heading/background image) when scrolled to via a #group-x anchor.
     The custom property is kept in sync with the sticky nav's actual
     height by assets/js/qrmenu.js; it's 0 when the nav isn't sticky. */
  scroll-margin-top: var(--qrmenu-sticky-nav-height, 0px);
}

.qrmenu-intro-section {
  padding: 24px 20px 10px;
}

.qrmenu-intro-inner {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 16px 18px;
}

.qrmenu-intro-inner h2 {
  margin: 0 0 10px;
  font-size: var(--qrmenu-category-heading-size);
  font-family: var(--qrmenu-category-heading-font);
}

.qrmenu-intro-content {
  font-family: var(--qrmenu-body-font);
}

/* Ensure category heading appears above the grid of products */
.menu-group-heading {
  grid-column: 1 / -1;
  margin: 0 0 12px 0;
}

.menu-group-heading h2 {
  margin: 0;
  font-size: var(--qrmenu-category-heading-size);
  font-family: var(--qrmenu-category-heading-font);
}

/* Category background image (uploaded or picked via Unsplash) */
.menu-group-heading.has-bg-image {
  position: relative;
  min-height: 140px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  background-size: cover;
  background-position: center center;
  text-align: center;
}

.menu-group-heading.has-bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.menu-group-heading.has-bg-image h2 {
  position: relative;
  z-index: 1;
  color: #fff;
}

.menu-group-heading.has-bg-image .photo-credit {
  position: absolute;
  z-index: 1;
  bottom: 8px;
  left: 8px;
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4px 6px;
  border-radius: 3px;
}

.menu-group-heading.has-bg-image .photo-credit a {
  color: #fff;
  text-decoration: underline;
}

.search-results-section > p {
  grid-column: 1 / -1;
}

/* Without this the heading was just another item in the grid (getting
   squeezed into a single column next to the results instead of sitting
   above them full-width, like a category heading does). */
.search-results-heading {
  grid-column: 1 / -1;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  flex-shrink: 0;
}

.menu-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.menu-item .thumb img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  display: block;
}

.menu-item .thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex-shrink: 0;
}

.menu-item .photo-credit {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4px 6px;
  border-radius: 3px;
}

.menu-item .photo-credit a {
  color: #fff;
  text-decoration: underline;
}

.menu-item .meta {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.menu-item .title {
  margin: 8px 0 6px;
  font-size: var(--qrmenu-title-size);
  font-family: var(--qrmenu-menu-item-font);
}

.menu-item .price {
  font-weight: 700;
  /* Pushes the price (and everything after it - calorie info, allergens)
     down to the bottom of the card, so prices line up across a row even
     when descriptions are different lengths, instead of floating right
     after a short excerpt with empty space left below it. */
  margin-top: auto;
  margin-bottom: 4px;
  font-size: var(--qrmenu-price-size);
  color: var(--qrmenu-price-color);
  font-family: var(--qrmenu-price-font);
}

.menu-item .calorie-info {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 8px;
}

.menu-item .excerpt {
  font-size: var(--qrmenu-excerpt-size);
}

/* the_excerpt() runs through wpautop by default, which wraps the text in
   a <p> - the browser's default top margin (~1em) was stacking on top of
   .title's own margin-bottom below, leaving a much bigger gap between
   the title and the description than intended. Its bottom margin is left
   alone - that's the spacing before the price below. */
.menu-item .excerpt p {
  margin-top: 0;
}

.menu-item .allergens {
  font-size: 0.85rem;
  color: #666;
  margin: 8px 0;
  padding: 8px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* When both the allergen list and the alkol/domuz list are shown, they'd
   otherwise each draw their own border, doubling the line between them.
   Drop the second block's top border/spacing so the first block's bottom
   border serves as the single separator between the two - a lone
   ".allergens" block (only allergens, or only alkol/domuz) is unaffected. */
.menu-item .allergens + .allergens {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.allergen-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.allergen-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  text-align: center;
}

.allergen-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--allergen-color, #999);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.allergen-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.allergen-item .allergen-label {
  font-size: 0.68rem;
  line-height: 1.2;
  color: #555;
}

.allergen-list--text {
  gap: 6px;
}

.allergen-item--text {
  width: auto;
  flex-direction: row;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8rem;
  color: #555;
}

/* Theme buttons */
.button, button, input[type="submit"] {
  background-color: var(--qrmenu-button-color);
  color: var(--qrmenu-button-text-color);
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.button:hover, button:hover, input[type="submit"]:hover {
  opacity: 0.9;
}

@media (min-width: 768px) {
  .qrmenu-nav { justify-content: flex-start; }
  .menu-group-section { grid-template-columns: repeat(var(--qrmenu-desktop-cols), 1fr); }
}