/*
Theme Name: Baobab Studio
Theme URI: https://baobabstudio.fr
Author: Horizon Factory
Description: Block theme for Baobab Studio — replaces the Elementor build. Editable in the Site Editor, versioned in git.
Version: 0.4.7
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: baobab
*/

/* Design tokens + default heading/body styles live in theme.json (authoritative now that
   Elementor's kit CSS is dequeued on block pages — see functions.php). This file only pins
   the few per-section specifics measured off the live design. Bump Version: after edits. */

:root { --bb-primary:#A36B4E; --bb-dark:#121212; --bb-gold:#CDB289; --bb-cream:#F9E9DA; }

/* Sticky header — stays pinned to the top on scroll (the template-part wrapper is the body-level
   element, so sticky works across the whole page). */
header.wp-block-template-part { position:sticky; top:0; z-index:999; }

/* Header sits on the terracotta bar — all its text/links/icons are white (cream on hover). */
.bb-header, .bb-header a, .bb-header .bb-login, .bb-header .wp-block-navigation { color:#fff; }
.bb-header a:hover { color:var(--bb-cream); }
.bb-header .bb-login { text-decoration:none; }

/* Footer links on the dark bar: cream, gold on hover. */
.bb-footer a { color:var(--bb-cream); text-decoration:none; }
.bb-footer a:hover { color:var(--bb-gold); }

/* Hero heading: Google Sans Flex 600 / 42px / terracotta / left (theme.json gives font+colour;
   pin weight/size/line-height/align to the original). */
.bb-hero h1, .bb-hero h2 {
	font-weight:600; font-size:42px; line-height:46px; color:var(--bb-primary); text-align:left;
}

/* Section titles: Cinzel 700 / 42px / UPPERCASE / terracotta. Alignment follows the block
   (left on home sections, centered on the À propos "Mission" title). */
.bb-section-title {
	font-family:"Cinzel", Georgia, serif;
	font-weight:700; font-size:42px; line-height:46px;
	text-transform:uppercase; color:var(--bb-primary);
}

/* Offre / pricing card titles: Google Sans Flex 600 / 24px / dark (overrides the terracotta heading default). */
.bb-card h4 { font-family:"Google Sans Flex 120pt", system-ui, sans-serif; font-weight:600; font-size:24px; color:var(--bb-dark); }

/* Hero arch image — the arch shape is baked into the JPG, so show it RAW (no CSS clip). */
.bb-arch img { border-radius:0; width:100%; height:auto; }

/* Promesses list: 24px light text, no bullets, terracotta numbers, hanging indent. */
.bb-promesses-list { list-style:none; padding-left:0; font-weight:300; }
.bb-promesses-list li { display:flex; gap:10px; align-items:baseline; }
.bb-promesses-list li strong { color:var(--bb-primary); font-weight:700; flex-shrink:0; }

/* Full-bleed hero: text keeps the left content margin, image bleeds to the right viewport edge. */
.bb-hero { padding-left:clamp(24px,11.2vw,170px); padding-right:0; }
/* Full-bleed témoignages: image bleeds to the left edge, quotes keep the right content margin. */
.bb-temoignages { padding-left:0; padding-right:clamp(24px,11.2vw,170px); }
@media (max-width:781px){
	.bb-hero, .bb-temoignages { padding-left:24px; padding-right:24px; }
}

/* Equal-height pricing cards with buttons pinned to the bottom across a row. */
.bb-cards .wp-block-column { display:flex; }
.bb-card { width:100%; display:flex; flex-direction:column; border:1px solid #ecdcc9; }
/* Button pins to the bottom (margin-top:auto) but always keeps a gap above it (padding-top). */
.bb-card .wp-block-buttons { margin-top:auto; padding-top:20px; }
/* Card content is left-aligned (titles + lists), matching the original. */
.bb-card h4, .bb-card .wp-block-list, .bb-card p { text-align:left; }
.bb-card .wp-block-list { padding-left:1.1em; }
/* The card's constrained layout centers children with margin:auto !important; override it so
   titles/lists fill the padded width (left-aligned) and every button is the same full width. */
.bb-card > * { max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.bb-card .wp-block-buttons, .bb-card .wp-block-button, .bb-card .wp-block-button__link { width:100%; }

/* Ghost button (Réserver): white bg, terracotta text + border, square. */
.bb-btn-ghost .wp-block-button__link {
	background:#fff !important; color:var(--bb-primary) !important;
	border:1px solid var(--bb-primary) !important; border-radius:0;
}
.bb-btn-ghost .wp-block-button__link:hover { background:var(--bb-primary) !important; color:#fff !important; }

/* FAQ accordion (core details) — clean rows with a divider, terracotta question, no plugin. */
.bb-faq-item { border-bottom:1px solid #e3cdb6; padding:18px 4px; }
.bb-faq-item summary { cursor:pointer; font-weight:600; font-size:18px; color:var(--bb-primary); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.bb-faq-item summary::-webkit-details-marker { display:none; }
.bb-faq-item summary::after { content:"+"; font-size:24px; color:var(--bb-primary); line-height:1; }
.bb-faq-item[open] summary::after { content:"–"; }
.bb-faq-item > :not(summary) { margin-top:14px; }

/* Social list (footer + contact): no bullets, Instagram-style rows. */
.bb-social { list-style:none; padding-left:0; }
.bb-social li { margin:4px 0; }

/* Contact form card sits over the cream section; JFB underline inputs in brand tones. */
.bb-contact-card { box-shadow:0 8px 30px rgba(18,18,18,.06); }
.bb-contact-card .jet-form-builder input:not([type=submit]),
.bb-contact-card .jet-form-builder textarea {
	border:0 !important; border-bottom:1px solid #d9c4ad !important; border-radius:0 !important;
	background:transparent !important; padding:8px 0 !important; box-shadow:none !important;
}
.bb-contact-card .jet-form-builder label { color:var(--bb-dark); font-weight:500; }
.bb-contact-card .jet-form-builder__action-button,
.bb-contact-card button[type=submit] {
	background:var(--bb-primary); color:#fff; border:0; border-radius:0; padding:14px 32px; width:100%; font-weight:500;
}
.bb-contact-card .jet-form-builder__action-button:hover { background:var(--bb-dark); }

/* Auth pages (login/register/forgot): centered white card on cream. */
.bb-auth-card { max-width:620px; margin:0 auto; box-shadow:0 8px 30px rgba(18,18,18,.06); border-top-right-radius:60px; }
.bb-auth-card .jet-form-builder input:not([type=submit]),
.bb-auth-card .jet-form-builder textarea {
	border:0 !important; border-bottom:1px solid #d9c4ad !important; border-radius:0 !important;
	background:transparent !important; padding:8px 0 !important; box-shadow:none !important; width:100%;
}
.bb-auth-card .jet-form-builder label { color:var(--bb-dark); font-weight:500; }
.bb-auth-card .jet-form-builder__action-button,
.bb-auth-card button[type=submit] {
	background:var(--bb-primary) !important; color:#fff !important; border:0 !important; border-radius:0 !important;
	padding:14px 32px !important; width:100%; font-weight:500;
}
.bb-auth-card .jet-form-builder__action-button:hover { background:var(--bb-dark) !important; }

/* WooCommerce product grid (A la carte / Abonnement): brand card + terracotta buttons. */
.bb-shop ul.products li.product { background:#fff; border:1px solid #ecdcc9; padding:0 0 20px; text-align:left; }
.bb-shop ul.products li.product img { margin-bottom:16px; }
.bb-shop ul.products li.product .woocommerce-loop-product__title { font-size:20px; font-weight:600; color:var(--bb-dark); padding:0 20px; }
.bb-shop ul.products li.product .price { color:var(--bb-primary); font-weight:700; padding:0 20px; display:block; margin:8px 0 14px; }
.bb-shop ul.products li.product .button,
.bb-shop ul.products li.product .added_to_cart {
	background:var(--bb-primary) !important; color:#fff !important; border-radius:0 !important;
	margin:0 20px; padding:12px 20px !important; font-weight:500;
}
.bb-shop ul.products li.product .button:hover { background:var(--bb-dark) !important; }

/* Member area: appointments tables + account nav (Elementor-free). */
.bb-appts-table { width:100%; border-collapse:collapse; }
.bb-appts-table th { text-align:left; font-weight:600; color:var(--bb-dark); border-bottom:2px solid var(--bb-primary); padding:12px 14px; }
.bb-appts-table td { padding:14px; border-bottom:1px solid #ecdcc9; }
.bb-appt-status { display:inline-block; padding:3px 12px; border-radius:999px; font-size:13px; }
.bb-appt-status--done { background:#e6f4ea; color:#1e7d34; }
.bb-appt-status--cancelled { background:#fbe6e6; color:#b23b3b; }
.bb-appt-status--confirmed,.bb-appt-status--pending { background:var(--bb-cream); color:var(--bb-primary); }
.bb-appts-empty { color:var(--bb-muted,#7a7a7a); padding:24px 0; }
.bb-account-nav ul { list-style:none; padding:0; margin:0; }
.bb-account-nav li { margin:2px 0; }
.bb-account-nav a { display:block; padding:12px 16px; color:var(--bb-dark); text-decoration:none; border-radius:6px; }
.bb-account-nav a:hover, .bb-account-nav li.is-active a { background:var(--bb-cream); color:var(--bb-primary); font-weight:600; }
.bb-account-nav .bb-logout a { color:#b23b3b; }
@media (max-width:781px){ .bb-appts-table thead{display:none;} .bb-appts-table td{display:block;border:0;padding:6px 0;} .bb-appts-table td::before{content:attr(data-label) " : ";font-weight:600;} .bb-appts-table tr{display:block;border-bottom:1px solid #ecdcc9;padding:12px 0;} }