/* =========================================================
   CASSYDI ACADÉMIE — PREMIUM THEME PACK
   Astra + Gutenberg + WooCommerce + LearnDash
   Palette:
   #0F0F10 (bg) | #F4F1E8 (text) | #C6A85E (gold) | #E5D29A (hover)
   #2A2A2A (structure) | #8E9B8A (sage option)
   ========================================================= */

/* -----------------------------
   1) Variables & base
------------------------------ */
:root{
  --bg: #0F0F10;
  --text: #F4F1E8;
  --gold: #C6A85E;
  --goldHover: #E5D29A;
  --border: #2A2A2A;
  --sage: #8E9B8A;

  --radius-lg: 18px;
  --radius-md: 14px;

  --shadow-soft: 0 18px 48px rgba(0,0,0,.35);
  --shadow-subtle: 0 10px 28px rgba(0,0,0,.25);

  --container-max: 1180px;
}

html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--text);
}

/* Astra sometimes sets content backgrounds – enforce premium */
.site, .site-content, .ast-container, .content-area, .entry-content{
  background: transparent !important;
}

p, li{
  color: var(--text);
  opacity: .92;
}

a{
  color: var(--gold);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
a:hover{ color: var(--goldHover); }

::selection{
  background: rgba(198,168,94,.28);
  color: var(--text);
}

/* -----------------------------
   2) Typography polish (safe)
------------------------------ */
h1, h2, h3, h4, h5{
  color: var(--text);
  letter-spacing: -0.02em;
}
h1{ line-height: 1.08; }
h2{ line-height: 1.18; }
h3{ line-height: 1.25; }

small, .has-small-font-size{ opacity: .85; }

/* Optional helper */
.gold{ color: var(--gold) !important; }

/* -----------------------------
   3) Layout helpers for Gutenberg
   Use these classes on Group blocks
------------------------------ */

/* Container to keep content centered */
.cassydi-container{
  max-width: var(--container-max);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 22px;
  padding-right: 22px;
}

/* Premium section spacing */
.cassydi-section{
  padding-top: 96px;
  padding-bottom: 96px;
}
@media (max-width: 780px){
  .cassydi-section{
    padding-top: 68px;
    padding-bottom: 68px;
  }
}

/* Divider line */
.cassydi-divider{
  height: 1px;
  width: 100%;
  background: var(--border);
  margin: 18px 0;
  border: 0;
}

/* Card */
.cassydi-card{
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-subtle);
}
@media (max-width: 780px){
  .cassydi-card{ padding: 22px; }
}

/* Tight card variant */
.cassydi-card--tight{
  padding: 22px;
  border-radius: var(--radius-md);
}

/* Subtle background section (very premium) */
.cassydi-panel{
  background: rgba(255,255,255,0.015);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* -----------------------------
   4) Hero (Accueil)
   Apply class to a full-width Group:
   "cassydi-hero cassydi-section"
------------------------------ */
.cassydi-hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

/* Decorative glow (subtle gold) */
.cassydi-hero:before{
  content:"";
  position:absolute;
  inset: -160px -220px auto -220px;
  height: 420px;
  background: radial-gradient(circle at 30% 40%, rgba(198,168,94,.22), rgba(198,168,94,0) 60%);
  pointer-events:none;
  filter: blur(2px);
  opacity: .95;
}

/* Hero content spacing */
.cassydi-hero .wp-block-heading{
  margin-top: 0;
  margin-bottom: 14px;
}
.cassydi-hero p{
  font-size: 18px;
  line-height: 1.75;
  max-width: 760px;
}

/* -----------------------------
   5) Signature block (Accueil)
   Apply class to Group:
   "cassydi-signature cassydi-section"
------------------------------ */
.cassydi-signature{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.012);
}
.cassydi-signature .wp-block-heading,
.cassydi-signature p{
  max-width: 900px;
}
.cassydi-signature .wp-block-heading{
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
}
.cassydi-signature .wp-block-heading strong,
.cassydi-signature .wp-block-heading em{
  color: var(--gold);
  font-style: normal;
}

/* Optional: classy quote bar */
.cassydi-quote{
  border-left: 2px solid rgba(198,168,94,.6);
  padding-left: 18px;
  color: var(--text);
}

/* -----------------------------
   6) Buttons (WP + Astra + Woo)
------------------------------ */
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
.wp-element-button,
.ast-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.add_to_cart_button,
.woocommerce a.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button{
  background: var(--gold) !important;
  color: var(--bg) !important;
  border: 1px solid var(--gold) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 18px !important;
  font-weight: 650 !important;
  letter-spacing: 0.2px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px rgba(198,168,94,.14);
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.ast-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce a.single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover{
  background: var(--goldHover) !important;
  border-color: var(--goldHover) !important;
  color: var(--bg) !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(229,210,154,.12);
}
button:active,
.wp-block-button__link:active{
  transform: translateY(0);
}

/* Secondary button style (use class on WP button block)
   Add "is-style-outline" + "cassydi-btn-secondary" for a premium ghost button */
.cassydi-btn-secondary .wp-block-button__link{
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.cassydi-btn-secondary .wp-block-button__link:hover{
  border-color: rgba(198,168,94,.8) !important;
  color: var(--goldHover) !important;
  background: rgba(255,255,255,0.02) !important;
}

/* Links that should look like premium text action */
.cassydi-link{
  color: var(--gold);
  border-bottom: 1px solid rgba(198,168,94,.35);
}
.cassydi-link:hover{
  color: var(--goldHover);
  border-bottom-color: rgba(229,210,154,.6);
}

/* -----------------------------
   7) Forms & inputs (premium)
------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select{
  background: rgba(255,255,255,0.03) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  outline: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea{ min-height: 140px; }

input::placeholder, textarea::placeholder{
  color: rgba(244,241,232,.62);
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(198,168,94,.9) !important;
  box-shadow: 0 0 0 2px rgba(198,168,94,.18) !important;
  background: rgba(255,255,255,0.035) !important;
}

/* -----------------------------
   8) Header / menu premium + CTA menu
------------------------------ */
.site-header{
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
}

/* Menu items */
.main-header-menu a{
  color: rgba(244,241,232,.92) !important;
}
.main-header-menu a:hover{
  color: var(--goldHover) !important;
}

/* CTA item: add CSS class "menu-cta" to the menu item in WP menu editor */
.main-header-menu .menu-cta > a{
  background: var(--gold) !important;
  color: var(--bg) !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--gold) !important;
  box-shadow: 0 10px 22px rgba(198,168,94,.14);
}
.main-header-menu .menu-cta > a:hover{
  background: var(--goldHover) !important;
  border-color: var(--goldHover) !important;
  color: var(--bg) !important;
}

/* -----------------------------
   9) Footer premium
------------------------------ */
.site-footer{
  background: var(--bg) !important;
  border-top: 1px solid var(--border);
}
.site-footer a{ color: rgba(244,241,232,.82); }
.site-footer a:hover{ color: var(--goldHover); }

/* -----------------------------
   10) WooCommerce premium
------------------------------ */
.woocommerce .woocommerce-breadcrumb{
  color: rgba(244,241,232,.65);
}
.woocommerce div.product .product_title{
  color: var(--text);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price{
  color: var(--gold) !important;
  font-weight: 700;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs:before{
  border-bottom: 1px solid var(--border) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  margin-right: 8px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  color: rgba(244,241,232,.86) !important;
  font-weight: 600;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  border-color: rgba(198,168,94,.65) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color: var(--gold) !important;
}

/* Notices */
.woocommerce-message,
.woocommerce-info{
  background: rgba(255,255,255,0.03) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-left: 2px solid rgba(198,168,94,.75) !important;
  border-radius: var(--radius-md);
}

/* Cart / checkout tables */
.woocommerce table.shop_table{
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border-color: var(--border) !important;
}

/* Account area */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  color: rgba(244,241,232,.86);
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{
  color: var(--goldHover);
}

/* -----------------------------
   11) Sticky purchase bar (optional)
   Use ONLY if you add an HTML block with class "cassydi-sticky-buy"
   Example: put it in product template/builder if available.
------------------------------ */
.cassydi-sticky-buy{
  position: sticky;
  top: 84px; /* below header */
  z-index: 10;
  background: rgba(15,15,16,.72);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.cassydi-sticky-buy .cassydi-sticky-title{
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px 0;
}
.cassydi-sticky-buy .cassydi-sticky-price{
  color: var(--gold);
  font-weight: 800;
  margin: 0 0 10px 0;
}
.cassydi-sticky-buy ul{
  margin: 0 0 14px 0;
  padding-left: 18px;
}
.cassydi-sticky-buy li{
  margin: 6px 0;
  opacity: .9;
}

/* -----------------------------
   12) LearnDash premium (Focus Mode + UI)
------------------------------ */
.learndash-wrapper{
  color: var(--text);
}

/* Links */
.learndash-wrapper a{ color: var(--gold); }
.learndash-wrapper a:hover{ color: var(--goldHover); }

/* Cards/containers in LD */
.learndash-wrapper .ld-item-list .ld-item-list-item,
.learndash-wrapper .ld-focus .ld-focus-sidebar,
.learndash-wrapper .ld-focus .ld-focus-content{
  background: transparent;
}

/* Progress bar */
.learndash-wrapper .ld-progress .ld-progress-bar{
  background: var(--border) !important;
}
.learndash-wrapper .ld-progress .ld-progress-bar-percentage{
  background: var(--gold) !important;
}

/* Buttons inside LearnDash */
.learndash-wrapper .ld-button{
  background: var(--gold) !important;
  color: var(--bg) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--gold) !important;
}
.learndash-wrapper .ld-button:hover{
  background: var(--goldHover) !important;
  border-color: var(--goldHover) !important;
}

/* Alerts (no harsh red) */
.learndash-wrapper .ld-alert-success{
  background: #1F2A1F !important;
  color: #9FD6A4 !important;
  border: 1px solid rgba(159,214,164,0.25) !important;
  border-radius: var(--radius-md);
}
.learndash-wrapper .ld-alert-warning,
.learndash-wrapper .ld-alert-error{
  background: #2A1A1A !important;
  color: #D89A9A !important;
  border: 1px solid rgba(216,154,154,0.25) !important;
  border-radius: var(--radius-md);
}

/* Quiz elements */
.learndash-wrapper .wpProQuiz_content{
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg);
  padding: 22px;
}

/* -----------------------------
   13) Premium “chips” (optional)
   Use for duration/level/etc.
------------------------------ */
.cassydi-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  color: rgba(244,241,232,.9);
  font-weight: 600;
  font-size: 13px;
}
.cassydi-chip--gold{
  border-color: rgba(198,168,94,.65);
  color: var(--goldHover);
}

/* -----------------------------
   14) Subtle sage (future option)
------------------------------ */
.cassydi-sage{
  color: var(--sage);
}
.cassydi-sage-panel{
  border-left: 2px solid rgba(142,155,138,.55);
  padding-left: 16px;
}

/* -----------------------------
   15) Mobile touch improvements
------------------------------ */
@media (max-width: 780px){
  .wp-block-buttons{ gap: 12px; }
  .wp-block-button__link{ width: 100%; text-align: center; }
}