/*
Theme Name:  GEBO Pro
Theme URI:   https://gebo.pro/
Author:      GEBO Pro
Author URI:  https://gebo.pro/
Description: The GEBO Pro brand theme — an Elementor-first theme carrying the GEBO design system (Futura BT display type, IBM Plex Sans body, the warm-neutral "Signal" palette) and the site chrome that sits outside the page canvas: the mega-menu navigation, the footer, the ClientZone modals, the search overlay and the Zikhali mascot. Page content is built entirely in Elementor. Requires the GEBO Pro Core plugin for the custom widgets.
Version:     1.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gebo-pro
Tags:        elementor, one-column, custom-menu, custom-logo, featured-images, translation-ready

The brand stylesheet itself lives in assets/css/gebo-brand.css, generated from
the canonical single-file site. This file exists for the theme header and for
small overrides only.
*/

/* Elementor's container query the theme opts into — keeps Elementor sections
   aligned to the same 1160px measure the brand CSS uses everywhere else. */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con { max-width: var(--container); }

/* WordPress core markup classes the brand CSS never had to style, because the
   single-file site had no editor behind it. */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; word-wrap: normal !important;
}
.alignright { float: right; margin: 0 0 1em 1.5em; }
.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text { color: var(--grey); font-size: 0.9rem; }

/* ============================================================
   CART — header icon and the leaving-with-items reminder.
   Not from the single-file site: it had no cart to show.
   ============================================================ */

.nav__cart { position: relative; }

/* .nav__fb:hover turns Facebook blue, which is wrong for a cart. Two classes
   beat the one-class rule without !important. */
.nav__fb.nav__cart:hover { background: var(--red); color: var(--white); }

.nav__cart-count {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-content: center;
  background: var(--red); color: var(--white);
  font-size: 0.66rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  border: 2px solid var(--black);
  box-shadow: 0 0 0 1px rgba(226,58,46,0.5), 0 0 12px -2px var(--red);
}

/* A cart with something in it should catch the eye on the way past. */
.nav__cart.is-filled { color: var(--white); }

/* ---- the reminder ---- */
.gebo-cartback {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: rgba(14,12,10,0.72);
  backdrop-filter: blur(3px);
}
.gebo-cartback[hidden] { display: none; }

.gebo-cartcard {
  width: min(30rem, 100%);
  background: var(--ink);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  padding: 1.9rem 1.7rem 1.6rem;
  text-align: center;
  box-shadow: 0 26px 70px -24px rgba(0,0,0,0.85), 0 0 40px -18px var(--red);
  animation: gebo-cartcard-in 0.32s var(--ease) both;
}
@keyframes gebo-cartcard-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.gebo-cartcard__icon {
  width: 46px; height: 46px; margin: 0 auto 0.9rem;
  display: grid; place-content: center;
  border-radius: 50%;
  background: rgba(226,58,46,0.14);
  color: var(--red);
  box-shadow: 0 0 26px -6px var(--red);
}
.gebo-cartcard__icon svg { width: 23px; height: 23px; }

.gebo-cartcard h3 {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.32rem; color: var(--white);
  margin: 0 0 0.5rem; letter-spacing: -0.01em;
}
.gebo-cartcard p { color: var(--grey); font-size: 0.95rem; margin: 0 0 1.3rem; }
.gebo-cartcard strong { color: var(--white); }

.gebo-cartcard__actions { display: grid; gap: 0.6rem; }
@media (min-width: 30rem) {
  .gebo-cartcard__actions { grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.gebo-cartcard__actions .btn { width: 100%; justify-content: center; }

.gebo-cartcard__dismiss {
  background: none; border: 0; cursor: pointer;
  margin-top: 1rem; padding: 0.2rem;
  color: var(--grey); font-size: 0.85rem; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.gebo-cartcard__dismiss:hover { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .gebo-cartcard { animation: none; }
}

/* ============================================================
   SHOP — services as collapsible groups.
   Paired with woocommerce/archive-product.php, which renders one
   <details> per service. Everything inside a group is WooCommerce's
   own loop markup, so the product tiles keep their normal styling
   and only the group chrome is defined here.
   ============================================================ */

.shop-intro {
  color: var(--grey);
  margin: 0 0 1.6rem;
}

.shop-groups {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.shop-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/* Strip the native disclosure triangle — the chevron on the right is
   the affordance, and it animates. */
.shop-group__head { list-style: none; cursor: pointer; }
.shop-group__head::-webkit-details-marker { display: none; }

.shop-group__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 0.9rem;
  border-radius: var(--radius);
  transition: background 0.18s ease, box-shadow 0.25s ease;
}
.shop-group__head:hover {
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 0 34px -14px var(--red);
}
.shop-group__head:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.shop-group__tile {
  flex: 0 0 auto;
  width: 58px; height: 58px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink);
  display: grid; place-items: center;
}
/* Beat WooCommerce's `.woocommerce-page img { height: auto }`, which is a
   parent-plus-element selector and outranks a single class. */
.shop-group__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.shop-group__text { flex: 1 1 auto; min-width: 0; }

.shop-group__name {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
}
.shop-group__meta {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.88rem;
  color: var(--grey);
}
.shop-group__meta .woocommerce-Price-amount { color: var(--red); font-weight: 600; }

.shop-group__chev {
  flex: 0 0 auto;
  color: var(--grey);
  display: grid; place-items: center;
  transition: transform 0.22s ease, color 0.18s ease;
}
.shop-group__chev svg { width: 22px; height: 22px; }
.shop-group__head:hover .shop-group__chev { color: var(--red); }
.shop-group[open] > .shop-group__head .shop-group__chev { transform: rotate(180deg); }
.shop-group[open] > .shop-group__head .shop-group__name { color: var(--red); }

.shop-group__body { padding: 0.4rem 0 1.8rem; }

.shop-group__more {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
}
.shop-group__more a {
  color: var(--grey);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.shop-group__more a:hover { color: var(--red); border-color: var(--red); }

@media (max-width: 30rem) {
  .shop-group__tile { width: 46px; height: 46px; }
  .shop-group__name { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-group__head,
  .shop-group__chev { transition: none; }
}

/* ------------------------------------------------------------
   STORE CHROME — WooCommerce's default controls, on brand.
   These were never restyled because the single-file site had no
   store; with 48 tiles on one shop page the stock grey button and
   the olive "Sale!" flash are the loudest things on the screen.
   Selectors match WooCommerce's own specificity, and style.css is
   enqueued after woocommerce.css, so no !important is needed.
   ------------------------------------------------------------ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--red-dark);
  color: var(--white);
  border-radius: 11px;
  padding: 0.8rem 1.5rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-red);
}

/* Disabled controls must not look clickable — WooCommerce greys them out
   via .disabled, and a red button that ignores clicks is worse than a grey
   one that explains itself. */
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
  background: var(--ink-2);
  color: var(--grey);
  transform: none;
  box-shadow: none;
}

/* The "View cart" link WooCommerce appends after an AJAX add. */
.woocommerce a.added_to_cart {
  color: var(--grey);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 2px;
  margin-left: 0.9rem;
  font-size: 0.9rem;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.woocommerce a.added_to_cart:hover { color: var(--red); border-color: var(--red); }

/* Sale flash — WooCommerce ships olive on white. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.01em;
  min-height: 0;
  min-width: 0;
  padding: 0.35em 0.8em;
  line-height: 1.4;
  border-radius: 999px;
  box-shadow: 0 0 22px -4px var(--red);
}

/* The item count beside "View Cart" in the ClientZone dropdown. */
.nav__cdd-count { color: var(--red); font-weight: 600; }

/* Scroll target for #register on the My Account page — the fixed nav would
   otherwise sit on top of the heading it scrolls to. */
.gebo-anchor {
  display: block;
  position: relative;
  top: calc(-1 * var(--nav-h, 84px) - 16px);
  visibility: hidden;
}