/*
Theme Name: FindMari
Theme URI: https://findmari.app
Description: Child theme for FindMari. Adds the site header, footer and brand palette on top of Hello Elementor.
Author: HiXFI
Template: hello-elementor
Version: 1.0.0
License: GPLv2 or later
Text Domain: greendeals
*/

:root {
  --gd-green: #2e7d4f;
  --gd-green-deep: #14532d;
  --gd-gold: #b8952f;
  --gd-cream: #f7faf7;
  --gd-ink: #121a15;
  --gd-muted: #5b6b60;
  --gd-line: rgba(18, 26, 21, 0.12);
}

/* Hello ships almost no styling, so the base lives here. */
body.gd { background: var(--gd-cream); color: var(--gd-ink); }
/* Prose links, scoped to the content area. An unqualified `.gd a`
   (0,1,1) outranks every component class below (0,1,0) and repaints
   buttons; scoping it to :is(p,li,...) alone still reached the
   footer list items and made them green-on-green. `main` keeps it
   where prose actually lives. */
.gd main :is(p, li, td, dd) a { color: var(--gd-green); }

.gd-shell {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* =====================================================================
   HEADER
   Sticky, with a safe-area inset so it clears the notch instead of
   sitting flush under the status bar.
   ===================================================================== */
.gd-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: transparent;
  border-bottom: 1px solid var(--gd-line);
  padding-top: env(safe-area-inset-top);
}
/* The frosted background lives on a pseudo-element, NOT on .gd-header
   itself. backdrop-filter (like transform and filter) makes an element a
   containing block for its position:fixed descendants, which collapsed the
   mobile drawer's `inset: 0` to the height of the header bar instead of the
   viewport. A pseudo-element is not an ancestor, so the blur survives and
   the drawer measures against the viewport again. */
.gd-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(247, 250, 247, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.gd-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  min-height: 76px;
}

/* Wordmark ---------------------------------------------------------- */
.gd a.gd-brand,
.gd-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--gd-ink);
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}
.gd-brand:hover, .gd-brand:focus-visible { color: var(--gd-green); }
.gd-brand__mark {
  width: 32px; height: 32px; flex: 0 0 32px;
  /* A rounded tile rather than a circle: it matches the app icon, where the
     square is what the home screen actually shows. */
  border-radius: 8px;
  background: linear-gradient(135deg, #2fc07a 0%, #0d6238 100%);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(13, 98, 56, 0.26);
}
.gd-brand__mark svg { width: 22px; height: 22px; display: block; }
.gd-brand em { font-style: normal; color: var(--gd-green); }

/* Navigation -------------------------------------------------------- */
.gd-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
}
.gd-nav li { margin: 0; }
.gd-nav li::before { content: none; }
.gd .gd-nav a {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--gd-ink);
  text-decoration: none;
  white-space: nowrap;
}
.gd-nav a:hover, .gd-nav a:focus-visible { color: var(--gd-green); }
/* Underline grows from the centre rather than snapping in. */
.gd-nav a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2px;
  background: var(--gd-gold);
  border-radius: 2px;
  transition: width .18s ease, left .18s ease;
}
.gd-nav a:hover::after,
.gd-nav a:focus-visible::after,
.gd-nav .current-menu-item > a::after { width: 100%; left: 0; }

/* CTA --------------------------------------------------------------- */
.gd a.gd-cta,
.gd-cta {
  display: inline-block;
  background: var(--gd-green);
  color: #fff;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.gd a.gd-cta:hover, .gd a.gd-cta:focus-visible,
.gd-cta:hover, .gd-cta:focus-visible {
  background: var(--gd-green-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(122, 18, 48, .3);
}

/* Burger ------------------------------------------------------------ */
.gd-burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--gd-line);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
}
.gd-burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--gd-ink);
  border-radius: 2px;
  position: relative;
  transition: background .15s ease;
}
.gd-burger span::before, .gd-burger span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px;
  background: var(--gd-ink);
  border-radius: 2px;
  transition: transform .2s ease;
}
.gd-burger span::before { top: -6px; }
.gd-burger span::after { top: 6px; }
.gd-burger[aria-expanded="true"] span { background: transparent; }
.gd-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.gd-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer ------------------------------------------------------
   Light in light mode. A forced-dark panel over a cream page reads as
   a bug, not a design choice. */
@media (max-width: 900px) {
  .gd-burger { display: inline-flex; }
  .gd-header__inner { min-height: 64px; }
  .gd-brand { font-size: 19px; }
  .gd-header__menu {
    position: fixed;
    inset: 0;
    top: 0;
    width: 100vw;
    height: 100dvh;
    background: var(--gd-cream);
    padding: max(88px, calc(env(safe-area-inset-top) + 76px)) 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    z-index: 190;
  }
  .gd-header__menu.is-open { transform: translateX(0); }
  .gd-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .gd-nav a { font-size: 22px; font-weight: 600; padding-block: 12px; width: 100%; }
  .gd-nav a::after { content: none; }
  .gd-cta { align-self: flex-start; margin-top: 8px; font-size: 16px; padding: 14px 28px; }
  body.gd-locked { overflow: hidden; }
}
@media (min-width: 901px) {
  .gd-header__menu { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.gd-footer {
  background: var(--gd-green-deep);
  color: #f3e8ea;
  padding: clamp(52px, 7vw, 84px) 0 calc(34px + env(safe-area-inset-bottom));
  margin-top: clamp(56px, 8vw, 110px);
}
.gd-footer a { color: #f3e8ea; text-decoration: none; }
.gd-footer a:hover, .gd-footer a:focus-visible {
  color: var(--gd-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gd-footer__cols {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: clamp(30px, 5vw, 64px);
}
.gd-footer__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 20px; color: #fff; text-decoration: none;
}
.gd-footer__brand .gd-brand__mark {
  background: linear-gradient(145deg, #a11a3f 0%, var(--gd-green) 100%);
  box-shadow: none;
}
.gd-footer__brand em { font-style: normal; color: var(--gd-gold); }
.gd-footer__blurb {
  font-size: 15px; line-height: 1.65;
  color: #d9c6ca; max-width: 36ch; margin: 16px 0 0;
}
.gd-footer__title {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--gd-gold); margin: 0 0 16px;
}
.gd-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 15px; }
.gd-footer__links li { margin: 0; }
.gd-footer__links li::before { content: none; }

.gd-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .13);
  margin-top: clamp(38px, 5vw, 58px);
  padding-top: 26px;
  display: flex; flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center; justify-content: space-between;
  font-size: 14px; color: #c4aeb3;
}
/* The drink-responsibly line has to stay legible, so it keeps its own
   contrast instead of inheriting the muted colour. */
/* Clears the plugin's fixed bottom bar on phones. */
@media (max-width: 900px) { .gd-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

.gd-footer__notice {
  width: 100%;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 13px;
  color: #d9c6ca;
}

@media (max-width: 900px) {
  .gd-footer__cols { grid-template-columns: 1fr 1fr; }
  .gd-footer__cols > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .gd-footer__cols { grid-template-columns: 1fr; gap: 34px; }
  .gd-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   WEB APP / MOBILE
   The site is installable and is used mostly one-handed on a phone, so
   these are correctness rules, not polish.
   ===================================================================== */

/* iOS zooms the whole page when a focused input is under 16px. That zoom
   never undoes itself and leaves the layout shifted sideways. */
.gd input, .gd select, .gd textarea { font-size: max(16px, 1rem); }

/* Kill the grey flash on tap without removing the focus ring, which is
   still the only affordance a keyboard user gets. */
.gd { -webkit-tap-highlight-color: transparent; }
.gd :focus-visible { outline: 2px solid var(--gd-green); outline-offset: 2px; border-radius: 4px; }

/* Standalone mode has no browser chrome to rubber-band against, so an
   overscroll bounce exposes a blank strip above the header. */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }
  /* No URL bar means the header is the top of the screen and has to own
     the status-bar area outright. */
  .gd-header::before { background: rgb(251, 247, 242); }
}

/* Comfortable one-handed hit areas. 44px is Apple's floor and the point
   below which mis-taps climb sharply. */
@media (pointer: coarse) {
  .gd-nav a, .gd-footer__links a { min-height: 44px; display: flex; align-items: center; }
  .gd-footer__links { gap: 2px; }
}

/* Long dispensary names and emails should wrap rather than force the page
   sideways. A horizontal scrollbar on a phone reads as broken. */
.gd { overflow-wrap: break-word; }
.gd-footer__links a { word-break: break-word; }

/* =====================================================================
   APP SHELL
   The site is used on a phone, from the home screen, one-handed. Below
   900px it stops being a web page with a menu and becomes an app: a slim
   bar at the top that only names where you are, the content, and four
   tabs at the bottom. Above 900px it stays a website, because a tab bar
   on a 27-inch monitor is a costume.
   ===================================================================== */

/* The bar itself. Styled here and not only in the deals plugin, because it
   is on every screen now and the plugin's stylesheet only loads where its
   shortcode does. Scoped one level deeper so it wins wherever both load. */
.gd-app .gd-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 99990;
  display: flex;
  background: rgba(247, 250, 247, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--gd-line);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform .28s ease;
}
.gd-app .gd-tabbar .xfl-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 50px;
  padding: 6px 0 5px;
  border: 0;
  background: none;
  color: var(--gd-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, transform .12s ease;
}
.gd-app .gd-tabbar .xfl-tab .xfl-ic { width: 22px; height: 22px; fill: currentColor; display: block; }
.gd-app .gd-tabbar .xfl-tab.is-active { color: var(--gd-green); }
.gd-app .gd-tabbar .xfl-tab:active { transform: scale(.92); }
.gd-app .gd-tabbar .xfl-tab:focus-visible { outline-offset: -3px; }

/* Desktop keeps the site's own navigation, so the tabs would be a second
   menu saying the same thing. */
@media (min-width: 901px) {
  .gd-app .gd-tabbar { display: none; }
}

@media (max-width: 900px) {
  /* Nothing scrolls under the tabs. */
  .gd-app { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }

  /* The app bar: where you are, and nothing else. Navigation is the tabs
     now, so the burger, the drawer and the CTA all go. A hamburger that
     repeats the tab bar is exactly the website habit we are dropping. */
  .gd-app .gd-burger,
  .gd-app .gd-header__menu { display: none; }
  .gd-app .gd-header__inner { min-height: 52px; justify-content: center; }
  .gd-app .gd-brand { font-size: 17px; gap: 8px; }
  .gd-app .gd-brand__mark { width: 26px; height: 26px; flex-basis: 26px; }
  .gd-app .gd-brand__mark svg { width: 13px; height: 13px; }

  /* Content starts right under the bar. The old margin was sized for a
     page with a hero, and these screens open straight into a list. */
  .gd-app main { padding-top: 0; }

  /* The footer is a website footer: four columns, a blurb and a legal
     notice. Under an app it becomes the bottom of the last screen, so it
     folds down to one column of links and the notice, and loses the
     display-size margin above it. */
  .gd-app .gd-footer { margin-top: 28px; padding-top: 30px; }
  .gd-app .gd-footer__blurb { display: none; }
  .gd-app .gd-footer__cols { grid-template-columns: 1fr; gap: 24px; }
  .gd-app .gd-footer__brand { font-size: 17px; }
  .gd-app .gd-footer__title { margin-bottom: 8px; }
  .gd-app .gd-footer__bottom { margin-top: 26px; padding-top: 18px; font-size: 12.5px; }
  .gd-app .gd-footer__notice { font-size: 12px; margin-top: 14px; padding-top: 14px; }
}

/* A phone app does not select its own chrome when you press and hold. The
   content is still selectable. */
.gd-app .gd-header,
.gd-app .gd-tabbar {
  -webkit-user-select: none;
  user-select: none;
}

/* Installed, there is no URL bar to scroll away, so the bars are the edges
   of the screen and have to be opaque rather than frosted-over-nothing. */
@media (display-mode: standalone) {
  .gd-app .gd-tabbar { background: rgb(247, 250, 247); }
}