/*
Theme Name:   263 Creative Studio
Theme URI:    https://263studios.co.uk
Description:  Brand child theme for 263 Creative Studio. Dark and light themes,
              WooCommerce styling, and the [c263_theme_toggle] shortcode.
              Built on Astra.
Author:       263 Creative Studio
Template:     astra
Version:      1.0.0
Text Domain:  c263
*/

/* ============================================================================
   263 CREATIVE STUDIO — brand stylesheet for Astra + Elementor Pro + WooCommerce
   ----------------------------------------------------------------------------
   WHERE THIS GOES
   Appearance → Customize → Additional CSS  (or the child theme's style.css)
   The theme toggle that sets html[data-theme] is in 263-theme-toggle.html
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  --c263-gold:#C99A2E;
  --c263-green:#1B7A3D;
  --c263-red:#C1272D;
  --c263-display:"Jost",Futura,"Century Gothic",system-ui,sans-serif;
  --c263-body:"Inter",system-ui,-apple-system,sans-serif;
  --c263-radius:2px;
}

/* Dark is the brand default. */
html,html[data-theme="dark"]{
  --c263-bg:#080706;      --c263-bg2:#0F0D0C;   --c263-panel:#141211;
  --c263-well:#0B0A09;    --c263-fg:#EDE6D8;    --c263-muted:#9A8F7E;
  --c263-line:#2A2522;    --c263-accent:#C99A2E; --c263-accent-txt:#E8C45F;
  --c263-on-accent:#080706; --c263-glow:rgba(201,154,46,.16);
}
html[data-theme="light"]{
  --c263-bg:#F7F2E8;      --c263-bg2:#F1EADC;   --c263-panel:#FFFFFF;
  --c263-well:#14110F;    --c263-fg:#14110F;    --c263-muted:#6A6055;
  --c263-line:#E1D7C4;    --c263-accent:#B8891F; --c263-accent-txt:#8F6A15;
  --c263-on-accent:#FFFFFF; --c263-glow:rgba(184,137,31,.13);
}

/* ---------- 2. GLOBAL ---------------------------------------------------- */
body,
body.ast-separate-container,
body.ast-plain-container{
  background-color:var(--c263-bg) !important;
  color:var(--c263-fg);
  font-family:var(--c263-body);
  transition:background-color .45s ease,color .45s ease;
}
#page,#content,.site-content,.ast-container{ background-color:transparent; }

h1,h2,h3,h4,h5,h6,
.entry-title,.elementor-heading-title{
  font-family:var(--c263-display);
  font-weight:200;
  letter-spacing:-.012em;
  color:var(--c263-fg);
}
h4,h5,h6{ font-weight:400; }

a{ color:var(--c263-accent-txt); }
a:hover,a:focus{ color:var(--c263-accent); }

:focus-visible{ outline:2px solid var(--c263-accent); outline-offset:4px; }

/* Wide-tracked caps label — the brand's own voice. Add class to any widget. */
.c263-trk{
  font-family:var(--c263-display);
  font-size:.72rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--c263-accent-txt);
}

/* Zimbabwe flag hairline. Use as an Elementor HTML widget: <div class="c263-flag"></div> */
.c263-flag{
  height:3px;
  background:linear-gradient(90deg,
    var(--c263-green) 0 33.34%, var(--c263-gold) 0 66.67%, var(--c263-red) 0);
}

/* ---------- 3. HEADER / NAV --------------------------------------------- */
.site-header,
.ast-primary-header-bar,
.ast-above-header-bar,
.ast-below-header-bar{
  background-color:color-mix(in srgb, var(--c263-bg) 92%, transparent) !important;
  border-bottom:1px solid var(--c263-line) !important;
  backdrop-filter:blur(14px);
  transition:background-color .45s ease,border-color .45s ease;
}
.ast-builder-menu .menu-item > .menu-link,
.main-header-menu .menu-item > .menu-link{
  font-family:var(--c263-display);
  font-size:.78rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--c263-muted) !important;
}
.ast-builder-menu .menu-item > .menu-link:hover,
.ast-builder-menu .current-menu-item > .menu-link{
  color:var(--c263-accent-txt) !important;
}
/* Swap the logo per theme: upload both, give the light one class c263-logo-light */
html[data-theme="light"] .c263-logo-dark,
html[data-theme="dark"]  .c263-logo-light{ display:none !important; }

/* ---------- 4. BUTTONS --------------------------------------------------- */
.wp-block-button__link,
.ast-button,
.ast-custom-button,
.button,
button,
input[type="submit"],
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  font-family:var(--c263-display) !important;
  font-size:.76rem !important;
  font-weight:500 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  border-radius:var(--c263-radius) !important;
  padding:1rem 2rem !important;
  background-color:var(--c263-accent) !important;
  color:var(--c263-on-accent) !important;
  border:1px solid var(--c263-accent) !important;
  transition:background-color .28s,color .28s !important;
}
.wp-block-button__link:hover,
.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.elementor-button:hover,
.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{
  background-color:transparent !important;
  color:var(--c263-accent-txt) !important;
}
/* Outline variant — add class c263-btn-ghost in Elementor's Advanced → CSS Classes */
.c263-btn-ghost .elementor-button,
a.c263-btn-ghost{
  background-color:transparent !important;
  color:var(--c263-accent-txt) !important;
}
.c263-btn-ghost .elementor-button:hover,
a.c263-btn-ghost:hover{
  background-color:var(--c263-accent) !important;
  color:var(--c263-on-accent) !important;
}

/* ---------- 5. WOOCOMMERCE — PRODUCT LOOP ------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:transparent;
  text-align:left;
}
.woocommerce ul.products li.product a img{
  background:var(--c263-well);
  border:1px solid var(--c263-line);
  border-radius:0;
  margin-bottom:1rem;
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.16,.8,.24,1),border-color .3s;
}
.woocommerce ul.products li.product:hover a img{
  transform:scale(1.03);
  border-color:var(--c263-accent);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--c263-display) !important;
  font-size:1.06rem !important;
  font-weight:400 !important;
  color:var(--c263-fg) !important;
  padding:0 !important;
  margin:0 0 .3rem !important;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--c263-accent-txt) !important;
  font-family:var(--c263-body);
  font-size:.95rem !important;
  font-weight:500;
}
.woocommerce ul.products li.product .price del{ color:var(--c263-muted) !important; opacity:.7; }

/* "Sale" / custom badge */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{
  background-color:var(--c263-accent) !important;
  color:var(--c263-on-accent) !important;
  font-family:var(--c263-display);
  font-size:.62rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  border-radius:0 !important;
  padding:.36rem .72rem !important;
  top:0 !important; left:0 !important; right:auto !important;
  min-height:0; min-width:0; line-height:1.4;
}
/* Loop add-to-cart reads as a quiet link, not a second primary button */
.woocommerce ul.products li.product .button{
  background:transparent !important;
  color:var(--c263-accent-txt) !important;
  border:0 !important;
  border-bottom:1px solid var(--c263-line) !important;
  padding:.35rem 0 !important;
  margin-top:.75rem;
}
.woocommerce ul.products li.product .button:hover{
  border-bottom-color:var(--c263-accent) !important;
}

/* ---------- 6. WOOCOMMERCE — SINGLE PRODUCT ----------------------------- */
.woocommerce div.product .product_title{
  font-family:var(--c263-display);
  font-weight:200;
  font-size:clamp(1.9rem,4vw,3rem);
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--c263-muted);
}
.woocommerce div.product form.cart .variations label{
  font-family:var(--c263-display);
  font-size:.72rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--c263-muted);
}
.woocommerce div.product form.cart .variations select,
.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{
  background-color:transparent !important;
  color:var(--c263-fg) !important;
  border:1px solid var(--c263-line) !important;
  border-radius:var(--c263-radius) !important;
  padding:.8rem 1rem !important;
  height:auto !important;
  font-family:var(--c263-body);
}
.select2-container--default .select2-selection--single
  .select2-selection__rendered{ color:var(--c263-fg) !important; line-height:inherit; }
.woocommerce div.product form.cart .variations select:focus,
.woocommerce form .form-row input.input-text:focus{
  border-color:var(--c263-accent) !important; outline:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{ border-bottom:1px solid var(--c263-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border-color:var(--c263-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--c263-display);
  font-size:.76rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--c263-muted) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--c263-accent-txt) !important;
  border-bottom:1px solid var(--c263-accent);
}
.woocommerce .woocommerce-breadcrumb{
  font-family:var(--c263-display);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--c263-muted) !important;
}
.woocommerce .woocommerce-breadcrumb a{ color:var(--c263-muted) !important; }
.woocommerce .woocommerce-breadcrumb a:hover{ color:var(--c263-accent-txt) !important; }

/* ---------- 7. WOOCOMMERCE — CART, CHECKOUT, NOTICES -------------------- */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-cart .cart-collaterals .cart_totals table{
  background:transparent !important;
  border-color:var(--c263-line) !important;
  color:var(--c263-fg);
}
.woocommerce table.shop_table thead th{
  font-family:var(--c263-display);
  font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--c263-muted) !important;
}
.woocommerce-checkout #payment,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout-review-order{
  background-color:var(--c263-panel) !important;
  border:1px solid var(--c263-line);
  border-radius:var(--c263-radius);
}
.woocommerce-checkout #payment div.payment_box{
  background-color:var(--c263-bg2) !important;
  color:var(--c263-fg);
}
.woocommerce-checkout #payment div.payment_box::before{
  border-bottom-color:var(--c263-bg2) !important;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews{
  background-color:var(--c263-panel) !important;
  color:var(--c263-fg) !important;
  border-top:2px solid var(--c263-accent) !important;
  border-radius:var(--c263-radius);
}
.woocommerce-message::before,
.woocommerce-info::before{ color:var(--c263-accent) !important; }
.woocommerce-error{ border-top-color:var(--c263-red) !important; }
.woocommerce-error::before{ color:var(--c263-red) !important; }

/* Free-delivery / progress notice — add class in the notice's own settings */
.c263-ship-note{
  font-family:var(--c263-display);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c263-accent-txt);
}

/* ---------- 8. FOOTER ---------------------------------------------------- */
.site-footer,
.ast-small-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap{
  background-color:var(--c263-bg) !important;
  color:var(--c263-muted) !important;
  border-top:1px solid var(--c263-line);
}
.site-footer a{ color:var(--c263-muted) !important; }
.site-footer a:hover{ color:var(--c263-accent-txt) !important; }
.site-footer .widget-title{
  font-family:var(--c263-display);
  font-size:.72rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--c263-fg) !important;
}

/* ---------- 9. THEME TOGGLE BUTTON -------------------------------------- */
.c263-toggle{
  width:38px;height:38px;
  display:grid;place-items:center;
  background:none;
  border:1px solid var(--c263-line);
  border-radius:var(--c263-radius);
  color:var(--c263-fg);
  cursor:pointer;
  padding:0;
  transition:border-color .25s,color .25s;
}
.c263-toggle:hover{ border-color:var(--c263-accent); color:var(--c263-accent-txt); }
.c263-toggle svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
}
html[data-theme="dark"]  .c263-toggle .c263-moon{ display:none; }
html[data-theme="light"] .c263-toggle .c263-sun { display:none; }

/* ---------- 10. ELEMENTOR HELPERS --------------------------------------- */
/* Put these in Advanced → CSS Classes on any Elementor section or widget. */
.c263-panel{ background-color:var(--c263-panel) !important; }
.c263-bg2{ background-color:var(--c263-bg2) !important; }
.c263-hairline{ border-top:1px solid var(--c263-line); }
.c263-glow{ background:radial-gradient(ellipse 62% 52% at 50% 26%,var(--c263-glow),transparent 72%); }
.c263-muted, .c263-muted p{ color:var(--c263-muted) !important; }
.c263-well img{ background:var(--c263-well); border:1px solid var(--c263-line); }

/* ---------- 11. MOTION --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}