/*
 Theme Name:   Basel Child
 Theme URI:    http://example.com/basel-child/
 Description:  Basel Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     basel
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  basel-child
*/

/* ====================================================================
   START: CSS Migrated from revision-child/style.css
   NOTE: These styles will likely need significant adaptation to work
   with the Basel theme's HTML structure and CSS classes.
   ==================================================================== */

/* =========================================
   START: Migrated from Storefront Child
   ======================================== */

/* Note: These styles will likely need to be adjusted to match the 'revision' theme's structure. */





/* Shop Header Banner */
.shop-header-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    text-align: center;
}

.shop-header-overlay {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
}

.shop-header-title {
    font-size: 2rem;
    color: #fff;
    margin: 0;
}



/* My Account Page Cleanup */
.woocommerce-account .woocommerce-breadcrumb {
    display: none !important;
}



/* Cart & Checkout Personalization Fields */
.wc-block-components-product-metadata {
    background-color: #f3f2fa;
    border: 1px solid #e0d7f6;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 8px;
    font-size: 0.9em;
}

/* =========================================
   END: Migrated from Storefront Child
   ======================================== */

/* =========================================
   END: Single Product Page Image Fix
   ======================================== */

/* =========================================
   HEADER META (ACCOUNT & SEARCH)
   ======================================== */

.cs-header__col.cs-col-right {
    display: flex !important;
    justify-content: flex-end !important; /* Pushes content to the right within this column */
    align-items: center;
    flex-grow: 0; /* Make the column shrink to fit its content */
}

.header-meta-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5em;
}

.header-account-links a {
    color: #6a4bc3;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.header-account-links a:hover {
    color: #54369c;
}

.account-links-horizontal {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 1em; /* Space between horizontal links */
}

.account-links-horizontal li {
    display: flex !important; /* Ensure list items are also flex items */
    align-items: center;
}

.account-links-horizontal li a {
    white-space: nowrap; /* Prevent links from wrapping */
}

/* 1. Directly hide the theme's background image element on product pages. */
/* This targets the inner element you identified. */
.single-product .cs-overlay-background {
    display: none !important;
}

/* 2. As a fallback, also hide the entire header container. */
.single-product .cs-entry__header.cs-entry__header-standard {
    display: none !important;
}

/* CONFLICTING CSS REMOVED - This was legacy code from the old theme that broke the Basel theme layout. The product page layout is now controlled by the Basel theme options. */

/* Adjust Product Title Font Size */
.single-product h1.product_title {
    font-size: 2em;
}

/* Adjust single product swatch sizes */
.single-product .variable-items-wrapper .variable-item {
    width: 100px !important;
    /* change to your desired width */
    height: 100px !important;
    /* change to your desired height */
}

/* Ensure the swatch image fills the new size */
.single-product .variable-items-wrapper .variable-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    /* keeps image from stretching weirdly */
}

/* styles.css */

#astrasolara-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it's on top of everything */
    color: #fff; /* White text color */
    font-size: 1.2em;
}

.astrasolara-loading-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===============================
   Astra Solara — Unified Header Nav
   =============================== */
:root {
  /* Brand tokens (adjust if needed) */
  --as-navy: #0f1a2b;
  --as-slate: #4a5568;
  --as-ice: #f6f9fc;
  --as-line: #e7eef6;
  --as-primary: #0073aa;
  --as-teal: #00c2a8;
  --as-accent: #f2c94c;
}

/* 1) Sticky header with gradient + shadow */
body.logged-in .cs-header {
  position: sticky;
  top: 0;
  z-index: 10000;
  background: linear-gradient(90deg, #e8f0f7, #f6f9fc);
  box-shadow: 0 2px 10px rgba(15, 26, 43, 0.06);
  backdrop-filter: saturate(140%) blur(6px);
}

/* WordPress admin bar offset (desktop & mobile) */
body.logged-in .admin-bar .cs-header { top: 32px; }
@media (max-width: 782px) {
  body.logged-in .admin-bar .cs-header { top: 46px; }
}

/* 2) Header inner layout (logo | nav | account) */
body.logged-in .cs-header .cs-container .cs-header__inner-desktop {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

body.logged-in .cs-header .cs-col-left { margin-right: auto; }
body.logged-in .cs-header .cs-col-center { margin-left: auto; margin-right: auto; }
body.logged-in .cs-header .cs-col-right { margin-left: auto; }

/* 3) Primary nav items */
body.logged-in .cs-header__nav .cs-header__nav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.logged-in .cs-header__nav .cs-header__nav-inner > li > a {
  display: inline-block;
  padding: 12px 8px;
  color: var(--as-navy);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.2px;
  position: relative;
  transition: color .15s ease;
}

/* Hover / focus underline with gentle glow */
body.logged-in .cs-header__nav .cs-header__nav-inner > li > a::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--as-primary), var(--as-teal));
  box-shadow: 0 2px 6px rgba(0,115,170,.25);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}

body.logged-in .cs-header__nav .cs-header__nav-inner > li > a:hover,
body.logged-in .cs-header__nav .cs-header__nav-inner > li > a:focus {
  color: var(--as-primary);
}
body.logged-in .cs-header__nav .cs-header__nav-inner > li > a:hover::after,
body.logged-in .cs-header__nav .cs-header__nav-inner > li > a:focus::after {
  opacity: 1;
  transform: translateY(0);
}

/* 4) Active/current menu states (WP adds these classes) */
body.logged-in .cs-header__nav .cs-header__nav-inner > li.current-menu-item > a,
body.logged-in .cs-header__nav .cs-header__nav-inner > li.current_page_item > a,
body.logged-in .cs-header__nav .cs-header__nav-inner > li.current-menu-ancestor > a {
  color: var(--as-primary);
  background-color: rgba(0, 115, 170, 0.1);
  border-radius: 8px;
}
body.logged-in .cs-header__nav .cs-header__nav-inner > li.current-menu-item > a::after,
body.logged-in .cs-header__nav .cs-header__nav-inner > li.current_page_item > a::after,
body.logged-in .cs-header__nav .cs-header__nav-inner > li.current-menu-ancestor > a::after {
  opacity: 1;
  transform: translateY(0);
}

/* 5) Keyboard focus ring (accessibility) */
body.logged-in .cs-header__nav .cs-header__nav-inner > li > a:focus-visible {
  outline: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(0,115,170,.45);
  border-radius: 8px;
}

/* 6) Header min-height / spacing */
body.logged-in .cs-header { min-height: 64px; }
body.logged-in .cs-header .cs-logo img { max-height: 36px; height: auto; }

/* 7) Mobile navigation (toggle + stacked menu) */
body.logged-in .cs-header__offcanvas-toggle {
  display: none;
  border: 1px solid var(--as-line);
  background: #fff;
  color: var(--as-navy);
  padding: 10px 12px;
  border-radius: 8px;
}

@media (max-width: 960px) {
  body.logged-in .cs-header__nav { display: none; }
  body.logged-in .cs-header__offcanvas-toggle { display: inline-flex; align-items: center; gap: 8px; }
  body.logged-in .cs-header__nav.is-open .cs-header__nav-inner { 
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    background: #fff;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 8px 18px rgba(15,26,43,.08);
  }
  body.logged-in .cs-header__nav.is-open .cs-header__nav-inner > li > a {
    padding: 10px 12px;
    border-radius: 8px;
  }
}

/* 8) Optional: make header sticky edge look a bit stronger over content */
body.logged-in .cs-header + * { scroll-margin-top: 76px; } /* smooth anchor jumps */


/* Hide the page title on AstraSolara dashboard and My Account pages */
.astrasolara-title-hidden .cs-entry__header-standard {
    display: none !important;
}

/* Hide the page title on AstraSolara Shop page body.woocommerce-page*/
body.woocommerce-shop .cs-entry__header {
  display: none;
}

/* Custom styles for birthchart-metal-art product title */
.birthchart-metal-art-title-wrapper {
    width: 100%;
    text-align: center; /* Center the title */
    margin-bottom: 20px; /* Add some space below the title */
}

.birthchart-metal-art-title-wrapper .product_title {
    font-size: 2.5em; /* Adjust font size as needed */
    color: #3c2e5a; /* Deep purple from your brand, as per GEMINI.md context */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
}

/* CONFLICTING CSS REMOVED - This was legacy code from the old theme that broke the Basel theme layout. */
/* Custom styles for the product intro paragraph */
.product-intro-paragraph {
    background-color: #f9f6f2; /* Light neutral background, similar to astra-custom-product-footer */
    padding: 1.5rem 2rem; /* More padding */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    text-align: center; /* Center the text */
    font-size: 1.1em; /* Slightly larger font */
    font-weight: 600; /* Make it bold */
    color: #3c2e5a; /* Deep purple from your brand */
    margin-top: 1.5rem; /* Ensure some space above it */
    margin-bottom: 2.5rem; /* More space below it */
}

.product-intro-paragraph p {
    margin: 0; /* Remove default paragraph margins */
}

/* ====================================================================
   FIX: Product Page Add-to-Cart Form Layout
   ==================================================================== */
.single-product form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.single-product form.cart .quantity {
    order: 1;
}

.single-product form.cart .astrasolara-personalization-form {
    order: 2;
    width: 100%;
    margin-bottom: 15px;
}

.single-product form.cart .single_add_to_cart_button {
    order: 3;
    width: 100%;
}