/*
Theme Name: GreenDeals
Theme URI: https://greendeals.hixfi.com
Description: Child theme for GreenDeals. 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;
  border-radius: 50%;
  background: linear-gradient(145deg, #3d9c63 0%, var(--gd-green-deep) 100%);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(46, 125, 79, 0.28);
}
.gd-brand__mark svg { width: 16px; height: 16px; 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; }