/*
Theme Name:   Ozgalore
Theme URI:    https://generatepress.com
Description:  GeneratePress Child Theme for Ozgalore
Template:     generatepress
Version:      1.0.0
*/

/* --- Google Fonts Import --- */

/* --- Custom Design System Tokens --- */
:root {
  /* Ozgalore Brand Palette */
  --oz-primary: #0599D7;          /* Brand blue — buttons, links, accents */
  --oz-primary-hover: #047AAC;
  --oz-primary-tint: #E6F5FB;
  --oz-secondary: #FD7E1D;        /* Brand orange — highlights, badges */
  --oz-secondary-hover: #E2680A;
  --oz-dark: #273E58;             /* Slate navy — headings, dark sections */
  --oz-black: #15191D;            /* Near-black — header/footer backgrounds */
  --oz-white: #FFFFFF;

  /* Supporting / state colours */
  --oz-error: #DC2626;
  --oz-error-tint: #FEF2F2;
  --success-green: #0a885b;
  --light-bg: #fafafa;
  --btn-bg: #f2f2f2;
  --muted-text: #9c9c9d;
  --border-color: #e5e7eb;

  
  /* Layout Constants */
  --site-max-width: 1350px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
}

/* --- Global: field validation states --- */
input.ozg-invalid,
input.ozg-invalid:focus,
textarea.ozg-invalid,
textarea.ozg-invalid:focus,
select.ozg-invalid,
select.ozg-invalid:focus {
    border-color: var(--oz-error) !important;
    box-shadow: 0 0 0 1.5px rgba(220, 38, 38, 0.20) !important;
    color: inherit !important;
}

input.ozg-valid,
textarea.ozg-valid,
select.ozg-valid {
    border-color: #16a34a !important;
}

.ozg-field-error-msg {
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--oz-error) !important;
    font-family: var(--font-body) !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}

/* --- Global: smooth anchor scrolling --- */
html {
    scroll-behavior: smooth;
}

/* --- Global: remove focus outlines site-wide --- */
*:focus,
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* --- Base Layout / Reset --- */
body.custom-homepage {
  font-family: var(--font-heading);
  color: var(--oz-dark);
  background-color: var(--oz-white);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.custom-homepage .site-content {
  display: block !important;
}

body.custom-homepage *,
body.custom-homepage *::before,
body.custom-homepage *::after {
  box-sizing: inherit;
}

/* Override GeneratePress body background */
body {
    background-color: #ffffff !important;
}

/* --- Full-width WooCommerce pages ---
   Backup for the generate_sidebar_layout filter in inc/woocommerce.php, in case a
   plugin or per-page setting re-enables GeneratePress's sidebar. */
.woocommerce-page #primary,
.woocommerce-page .content-area {
  width: 100% !important;
  float: none !important;
}

.woocommerce-page #right-sidebar,
.woocommerce-page #left-sidebar {
  display: none !important;
}

/* --- Zip (zipmoney) "Zip now, pay later" strip banner ---
   Injected by the Zip payments plugin at the top of page content. Not wanted
   anywhere on the site; Zip itself stays available at checkout. The plugin's
   own widget settings should also have the banner switched off. */
.zipmoney-strip-banner,
.zip-widget__wrapper--type-stripbanner,
[data-zm-asset="stripbanner"] {
  display: none !important;
}

/* --- WooCommerce breadcrumb (markup: woocommerce/global/breadcrumb.php) ---
   Each crumb + its separator is one unit, so whole items wrap instead of
   long names being squeezed into narrow columns. */
.woocommerce-breadcrumb {
  flex-wrap: wrap !important;
  row-gap: 4px;
}

.ozg-crumb {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* Small screens: at most 3 items — Home + the last two categories */
@media (max-width: 480px) {
  .ozg-crumb--middle {
    display: none !important;
  }
}

/* --- Typography Defaults ---
   Font families come from inc/fonts.php (--font-heading / --font-body). */
body, button, input, select, textarea, .button {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--oz-dark);
  margin: 0 0 1rem 0;
  font-weight: 700;
}

/* --- Theme Layout Utility Classes --- */
.container-custom {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.grid-custom {
  display: grid;
  gap: 20px;
}

.flex-custom {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* --- Global Components Styling --- */

/* 1. Header & Announcement Bar */
.ozg-announcement-bar {
  background-color: var(--oz-black);
  color: var(--oz-white);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ozg-announcement-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.ozg-member-deal {
  flex-grow: 1;
  text-align: center;
  font-size: 14px;
}

.ozg-member-deal span {
  color: var(--oz-primary);
  font-weight: 700;
}

.ozg-header-links {
  display: flex;
  gap: 24px;
  align-items: center;
}

.ozg-header-link {
  color: var(--oz-white);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-smooth);
}

.ozg-header-link:hover {
  color: var(--oz-primary);
}

.ozg-cart-link {
  position: relative;
}

.ozg-cart-badge {
  background-color: var(--oz-primary);
  color: var(--oz-white);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  border-radius: 50%;
  padding: 2px 6px;
  margin-left: 4px;
}

/* Main Nav Navigation */
.ozg-main-nav {
  background-color: var(--oz-white);
  padding: 16px 0;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

.ozg-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ozg-nav-left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.ozg-logo {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--oz-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ozg-logo span {
  color: var(--oz-primary);
}

.ozg-shop-btn {
  background-color: var(--oz-primary);
  color: var(--oz-white) !important;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 20px;
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition-smooth);
}

.ozg-shop-btn:hover {
  background-color: var(--oz-primary-hover);
}

.ozg-nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 24px;
}

.ozg-nav-menu a {
  color: var(--oz-dark);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition-smooth);
}

.ozg-nav-menu a:hover,
.ozg-nav-menu li.active a {
  color: var(--oz-primary);
}

.ozg-search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.ozg-search-input {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 10px 45px 10px 15px;
  font-family: var(--font-body);
  font-size: 12px;
  width: 220px;
  transition: var(--transition-smooth);
}

.ozg-search-input:focus {
  outline: none;
  border-color: var(--oz-primary);
  width: 250px;
}

.ozg-search-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--oz-primary);
  border: none;
  border-top-right-radius: var(--border-radius-sm);
  border-bottom-right-radius: var(--border-radius-sm);
  padding: 0 15px;
  cursor: pointer;
  color: var(--oz-white);
  transition: var(--transition-smooth);
}

.ozg-search-btn:hover {
  background-color: var(--oz-primary-hover);
}

/* 9. Footer */
.ozg-footer {
  background-color: var(--oz-dark);
  color: var(--oz-white);
  padding: 80px 0 30px 0;
}

.ozg-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  margin-bottom: 60px;
}

.ozg-footer-col-title {
  font-family: var(--font-heading);
  color: var(--oz-primary);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ozg-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ozg-footer-links a {
  color: var(--oz-white);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ozg-footer-links a::before {
  content: '→';
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  transition: var(--transition-smooth);
}

.ozg-footer-links a:hover {
  color: var(--oz-primary);
  padding-left: 6px;
}

.ozg-footer-links a:hover::before {
  color: var(--oz-primary);
}

.ozg-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.ozg-copyright {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--oz-white);
  opacity: 0.85;
}

.ozg-warning-badge {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--oz-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ozg-consumption-badge {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--oz-white);
  opacity: 0.85;
}

/* --- Responsive Media Queries --- */
@media (max-width: 1024px) {
  .ozg-categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ozg-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ozg-shipping-hours-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .ozg-verification-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ozg-verification-visual {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .ozg-announcement-content {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .ozg-nav-container {
    flex-direction: column;
    gap: 15px;
  }
  .ozg-nav-left {
    flex-direction: column;
    width: 100%;
    gap: 15px;
  }
  .ozg-logo {
    width: 100%;
    justify-content: center;
  }
  .ozg-shop-btn {
    width: 100%;
    justify-content: center;
  }
  .ozg-nav-menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  .ozg-search-container {
    width: 100%;
  }
  .ozg-search-input {
    width: 100% !important;
  }
  .ozg-trust-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .ozg-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ozg-comparison-table-wrapper {
    overflow-x: auto;
  }
  .ozg-footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .ozg-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .ozg-categories-grid {
    grid-template-columns: 1fr;
  }
  .ozg-products-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Override GeneratePress theme global padding / margins ── */
.inside-article,
.separate-containers .inside-article {
    padding: 0 !important;
    background: transparent !important;
}

.entry-content:not(:first-child),
.page-content:not(:first-child) {
    margin-top: 0 !important;
}


/* ---------------------------------------------------------------------------
   Tap highlight

   Mobile browsers paint a translucent box over anything you tap, and nothing
   here had ever turned it off - so every header link, menu button and control
   flashed a dark rectangle on touch. It is a BROWSER DEFAULT, not a rule anyone
   wrote (Chrome uses rgba(0,0,0,.18); Android Chrome a blue rgba(51,181,229,.4)),
   which is why it never turned up in a stylesheet search.

   NOTE: the "remove focus outlines site-wide" rule further up already kills every
   focus ring with !important. With the tap highlight gone too, there is now no
   visible feedback for touch OR keyboard. A keyboard-only ring (:focus-visible,
   which never matches a tap or a mouse click) would have to override that rule -
   left alone deliberately here rather than silently reversing a decision someone
   made on purpose.
   --------------------------------------------------------------------------- */
html {
    -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------------
   Keyboard focus ring

   This deliberately overrides the "remove focus outlines site-wide" rule above.
   That rule was aimed at the ring that appears when you CLICK or TAP something.
   :focus-visible never matches a click or a tap on a link or a button - only
   keyboard focus - so this restores tab navigation without bringing back the
   artifact that rule was written to remove.

   Both the !important and the element name in every selector are load-bearing:
   the rule being beaten is `*:focus-visible { outline: none !important }`, so a
   bare :focus-visible would only tie on specificity and a rule without
   !important would lose outright. A previous attempt without !important parsed
   cleanly, appeared in the CSSOM, and did nothing at all.

   Red rather than navy because the ring has to read on the navy header as well
   as on white, and navy-on-navy is invisible. Text fields get the calmer navy
   treatment instead: unlike links and buttons, a text field matches
   :focus-visible when TAPPED too, so a red ring there would fire on every tap.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--accent-red, var(--oz-primary)) !important;
    outline-offset: 2px !important;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--secondary-navy, var(--oz-dark)) !important;
    outline-offset: 0 !important;
}

/* ---------------------------------------------------------------------------
   Two pay buttons on the card gateway  (LIVE BUG, not cosmetic)

   The Sell Abroad gateway supplies its own "Pay now" button and hides
   WooCommerce's "Place order" itself - sa-fw-checkout.js has:
       btn.style.display = isOurs() ? 'none' : '';
   but woo-pages.css carries
       .woocommerce-checkout #place_order { display: flex !important }
   and !important beats an inline style, so that hide never took effect. Every customer
   choosing Pay by card - the DEFAULT method - was shown two submit buttons.

   Honour an explicit inline display:none rather than weakening the rule above, so any
   gateway that hides the button this way keeps working.
   --------------------------------------------------------------------------- */
.woocommerce-checkout #place_order[style*="display: none"],
.woocommerce-checkout #place_order[style*="display:none"] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Dark box on tapped buttons

   GeneratePress styles EVERY button on :hover and :focus with
       color: #fff; background-color: rgb(63,64,71);
   and on a phone a tap counts as focus - so the header icon buttons and the pay button
   flashed a dark grey rectangle when touched. This, not the tap highlight, was the cause.
   Restated only for the controls that carry their own colour; generic theme buttons that
   actually want the filled hover are left alone.
   --------------------------------------------------------------------------- */
.lmh-menu-btn:hover,.lmh-menu-btn:focus,.lmh-menu-btn:active,
.lmh-icon-btn:hover,.lmh-icon-btn:focus,.lmh-icon-btn:active {
    background-color: transparent !important;
    color: inherit !important;
}

#place_order:focus,
#place_order:active {
    background-color: var(--accent-red, var(--oz-primary)) !important;
    color: #fff !important;
}
#place_order:hover {
    background-color: var(--accent-red-hover, var(--oz-primary-hover)) !important;
    color: #fff !important;
}