/* ============================================================
   GQS BRAND SKIN  ·  gqs-brand-skin.css
   Brings the theme header, footer, and WooCommerce store into
   the navy/gold portal identity (Shop, Contact, product, cart,
   checkout, My Account).  Enqueue LATE from the child theme so
   it overrides the theme + WooCommerce stylesheets.

   Brand: navy #0B1F33 · navy-deep #071523 · gold #C9A227
          Playfair Display (headings) · Source Sans 3 (body)

   NOTE ON !important:  overriding an active theme's header/footer
   background reliably requires winning the cascade, so brand-
   critical color/background/border properties use !important on
   purpose.  Structural properties (layout, spacing) do not, so
   the theme keeps control of its own layout.
   ============================================================ */

:root{
  --gqs-navy:#0B1F33;
  --gqs-navy-deep:#071523;
  --gqs-navy-800:#12304d;
  --gqs-navy-line:#1d3d5c;
  --gqs-gold:#C9A227;
  --gqs-gold-soft:#E4C766;
  --gqs-paper:#ffffff;
  --gqs-wash:#f4f6f8;
  --gqs-ink:#152230;
  --gqs-gray:#5a6b7a;
  --gqs-head:"Playfair Display",Georgia,serif;
  --gqs-body:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ---------- 1. GLOBAL TYPOGRAPHY (front-end only) ---------- */
body:not(.wp-admin){
  font-family:var(--gqs-body);
  color:var(--gqs-ink);
}
body:not(.wp-admin) h1,
body:not(.wp-admin) h2,
body:not(.wp-admin) h3,
body:not(.wp-admin) h4,
.entry-title,.woocommerce-loop-product__title,
.wc-block-grid__product-title,.product_title{
  font-family:var(--gqs-head);
}
a{color:var(--gqs-navy-800);}
a:hover{color:var(--gqs-gold);}

/* ============================================================
   2. SITE HEADER  →  navy bar, gold accent, light nav
   The selector list below covers the common header containers
   across block themes and classic themes (Storefront, Astra,
   Kadence, GeneratePress, Blocksy, Twenty Twenty-x, etc.).
   If your header doesn't turn navy, inspect it (right-click →
   Inspect) and add your header's wrapper class to this list.
   ============================================================ */
.site-header,
header#masthead,
.wp-block-template-part header,
header.wp-block-template-part,
.wp-block-group.site-header,
.site-header-container,
.main-header,
#header,
.header{
  background-color:var(--gqs-navy)!important;
  border-bottom:3px solid var(--gqs-gold)!important;
  box-shadow:0 2px 12px rgba(7,21,35,.25);
}

/* Header text + nav links → light, gold on hover/active */
.site-header a,
header#masthead a,
.main-navigation a,
#site-navigation a,
.wp-block-navigation a,
.primary-navigation a,
.menu a,
.site-header .wp-block-site-title a,
.site-title a,
.site-description{
  color:#e8eef4!important;
  font-family:var(--gqs-body);
  font-weight:600;
}
.site-header a:hover,
.main-navigation a:hover,
.wp-block-navigation a:hover,
.menu a:hover,
.current-menu-item > a,
.current_page_item > a{
  color:var(--gqs-gold)!important;
}

/* Text site-title (if you show it instead of an image logo) */
.site-title,
.wp-block-site-title{
  font-family:var(--gqs-head)!important;
  letter-spacing:.3px;
}
.site-title a,
.wp-block-site-title a{color:var(--gqs-gold)!important;font-weight:700;}

/* Header logo image: constrain height so the monogram sits neatly.
   IMPORTANT: set your header logo to the TRANSPARENT gold monogram
   (gqs-logo-gold.png). A white-background wordmark will show as a
   white block on the navy bar. */
.site-header .custom-logo,
.wp-block-site-logo img,
.site-logo img,
img.custom-logo{
  max-height:64px!important;
  width:auto!important;
  filter:drop-shadow(0 2px 6px rgba(201,162,39,.22));
}

/* Cart / search / header icons → light */
.site-header .woocommerce-cart-link,
.site-header .cart-contents,
.header-cart a,
.site-header svg{color:#e8eef4!important;fill:#e8eef4!important;}

/* ============================================================
   3. WOOCOMMERCE STORE  (Shop, product, cart, checkout, account)
   These selectors are standardized by WooCommerce and work across
   themes — this is the part that matches reliably.
   ============================================================ */

/* Primary buttons → gold with navy text */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce-page a.button,
.wc-block-components-button,
.wp-element-button,
.woocommerce a.button.alt,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background-color:var(--gqs-gold)!important;
  color:var(--gqs-navy-deep)!important;
  border:2px solid var(--gqs-gold)!important;
  border-radius:8px!important;
  font-family:var(--gqs-body)!important;
  font-weight:700!important;
  letter-spacing:.2px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.wc-block-components-button:hover,
.wp-element-button:hover{
  background-color:var(--gqs-gold-soft)!important;
  border-color:var(--gqs-gold-soft)!important;
  color:var(--gqs-navy-deep)!important;
}

/* Secondary / outline buttons (e.g., "View cart") */
.woocommerce a.added_to_cart,
.woocommerce .button.wc-backward{
  background:transparent!important;
  color:var(--gqs-navy)!important;
  border:2px solid var(--gqs-navy)!important;
  border-radius:8px!important;
  font-weight:700!important;
}

/* Prices → navy, sale badge → gold */
.woocommerce .price,
.woocommerce span.amount,
.wc-block-components-product-price{
  color:var(--gqs-navy)!important;
  font-weight:700;
}
.woocommerce span.onsale,
.wc-block-components-product-sale-badge{
  background-color:var(--gqs-gold)!important;
  color:var(--gqs-navy-deep)!important;
  border-radius:20px!important;
  font-weight:700!important;
}

/* Product titles */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.wc-block-grid__product-title{
  font-family:var(--gqs-head)!important;
  color:var(--gqs-navy)!important;
}

/* Product card polish */
.woocommerce ul.products li.product{
  border:1px solid #e3e8ed;
  border-radius:10px;
  padding:14px;
  transition:box-shadow .2s ease,transform .12s ease;
  background:var(--gqs-paper);
}
.woocommerce ul.products li.product:hover{
  box-shadow:0 8px 24px rgba(11,31,51,.10);
  transform:translateY(-2px);
}

/* Star ratings → gold */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before{color:var(--gqs-gold)!important;}

/* Notices / messages → navy border, gold accent */
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner{
  border-top-color:var(--gqs-gold)!important;
}
.woocommerce-message::before,
.woocommerce-info::before{color:var(--gqs-gold)!important;}

/* My Account navigation → active tab gold */
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover{
  color:var(--gqs-gold)!important;
}
.woocommerce-MyAccount-navigation ul li.is-active{
  border-left:3px solid var(--gqs-gold);
}

/* Form focus states → gold */
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus{
  outline:2px solid var(--gqs-gold)!important;
  outline-offset:1px;
  border-color:var(--gqs-gold)!important;
}

/* Section headings on shop/product pages */
.woocommerce .products h2,
.woocommerce-products-header__title{
  font-family:var(--gqs-head)!important;
  color:var(--gqs-navy)!important;
}

/* Tabs on the single product page */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  border-bottom-color:var(--gqs-gold)!important;
}

/* ============================================================
   4. SITE FOOTER  →  deep navy, light text, gold link hover
   Same approach as the header: common footer containers with a
   fallback slot for your theme's wrapper class.
   ============================================================ */
.site-footer,
footer#colophon,
.wp-block-template-part footer,
footer.wp-block-template-part,
.wp-block-group.site-footer,
.footer-widgets,
#footer,
.footer{
  background-color:var(--gqs-navy-deep)!important;
  color:#aab7c4!important;
  border-top:3px solid var(--gqs-gold);
}
.site-footer a,
footer#colophon a,
.wp-block-template-part footer a,
#footer a,
.footer a{color:#aab7c4!important;}
.site-footer a:hover,
footer#colophon a:hover,
#footer a:hover,
.footer a:hover{color:var(--gqs-gold-soft)!important;}
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,
footer#colophon h1,footer#colophon h2,footer#colophon h3,footer#colophon h4,
#footer h4,.footer h4{color:#ffffff!important;font-family:var(--gqs-head)!important;}

/* ============================================================
   5. EDIT ZONE — pin your theme's exact selectors here if the
   generic rules above don't catch your header or footer.
   How to find them: right-click the header/footer → Inspect →
   read the outermost wrapper's class or id, then add it below.
   Example:
     .your-header-class{ background-color:var(--gqs-navy)!important;
       border-bottom:3px solid var(--gqs-gold)!important; }
     .your-footer-class{ background-color:var(--gqs-navy-deep)!important; }
   ============================================================ */

/* ============================================================
   6. HEADER WORDMARK — match the portal masthead
   Styles the two text blocks added next to the logo in the
   Blueprint header:
     .gqs-brandname  → "Global Quality Systems"  (Playfair, white)
     .gqs-brandtag   → "COMPLIANCE TRAINING PORTAL" (gold caps)
   ============================================================ */
.gqs-brandname,
.gqs-brandname a{
  font-family:var(--gqs-head)!important;
  color:#ffffff!important;
  font-weight:700!important;
  font-size:22px!important;
  line-height:1.15!important;
  letter-spacing:.2px!important;
  margin:0!important;
  text-decoration:none!important;
}
.gqs-brandname a:hover{color:var(--gqs-gold-soft)!important;}
.gqs-brandtag{
  font-family:var(--gqs-body)!important;
  color:var(--gqs-gold-soft)!important;
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:1.6px!important;
  text-transform:uppercase!important;
  line-height:1.2!important;
  margin:2px 0 0 0!important;
}
/* tighten the gap between the two lines so they read as one lockup */
.gqs-brandname + .gqs-brandtag,
.gqs-brandtag{margin-top:2px!important;}

/* ============================================================
   7. CONTACT FORM 7 — navy/gold brand styling
   Scoped to .wpcf7 so only the contact form is affected.
   ============================================================ */
.wpcf7 label{
  font-family:var(--gqs-body)!important;
  font-weight:600!important;
  color:var(--gqs-navy)!important;
  font-size:13px!important;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 textarea,
.wpcf7 select{
  width:100%!important;
  padding:12px 14px!important;
  border:1px solid var(--gqs-gray-line, #d8dee4)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:var(--gqs-ink)!important;
  font-family:var(--gqs-body)!important;
  font-size:15px!important;
  box-shadow:none!important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus{
  outline:none!important;
  border-color:var(--gqs-gold)!important;
  box-shadow:0 0 0 2px rgba(201,162,39,.35)!important;
}
.wpcf7 textarea{min-height:150px!important;resize:vertical!important;}

/* Submit button → gold with navy text, matching the portal CTAs */
.wpcf7 input[type=submit],
.wpcf7 button[type=submit],
.wpcf7 .wpcf7-submit{
  background:var(--gqs-gold)!important;
  color:var(--gqs-navy-deep)!important;
  border:2px solid var(--gqs-gold)!important;
  border-radius:8px!important;
  padding:12px 30px!important;
  font-family:var(--gqs-body)!important;
  font-weight:700!important;
  font-size:15px!important;
  letter-spacing:.3px;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .12s ease;
}
.wpcf7 input[type=submit]:hover,
.wpcf7 button[type=submit]:hover,
.wpcf7 .wpcf7-submit:hover{
  background:var(--gqs-gold-soft)!important;
  border-color:var(--gqs-gold-soft)!important;
}
.wpcf7 input[type=submit]:active,
.wpcf7 .wpcf7-submit:active{transform:translateY(1px);}

/* CF7 validation / response messages */
.wpcf7 .wpcf7-not-valid-tip{color:#b3261e!important;font-size:12.5px!important;}
.wpcf7-response-output{
  border-radius:8px!important;
  border-width:1px!important;
  font-family:var(--gqs-body)!important;
  font-size:14px!important;
  padding:12px 14px!important;
}