/*
 Theme Name:   Blocksy Child — LTC
 Description:  Child theme de Blocksy pour L'Équipe Tech Comptable
 Template:     blocksy
 Version:      4.0.0
*/

/*
 * MINIMAL CSS — Only rules that Gutenberg/Blocksy cannot handle natively.
 * All colors → Blocksy Customizer palette + theme.json
 * All typography → Blocksy Customizer + block settings
 * All layout → Gutenberg block settings (wp:group, wp:columns)
 */

/* ── Page title display ──────────────────────────────────────────────────── */
/* Title visibility is controlled via Blocksy Customizer (theme_mods):       */
/*   Pages  → per-page "disable title" meta set during push (push_v2.py)     */
/*   Posts  → Personnaliser → Blocksy → Blog → Article seul → Titre ON       */
/* DO NOT add .hero-section overrides here — targets Blocksy internals.      */

/* ── Liste à cocher (checkmarks ::before, couleur Customizer-éditable) ───── */
/*
 * Le SVG est utilisé en mask (forme uniquement). La COULEUR vient de
 * background-color qui lit la variable CSS injectée par inc/customizer.php
 * depuis Marque LTC → Liste à cocher → Couleur.
 *
 * Cible legacy (.ltc-incl-list) ET nouveau block style (.is-style-ltc-checklist)
 * pour migration douce.
 */
.ltc-incl-list,
.is-style-ltc-checklist {
  list-style: none;
  padding: 0;
}
.ltc-incl-list li,
.is-style-ltc-checklist li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid rgba(255, 255, 255, .08);
  transition: border-color .2s;
}
.ltc-incl-list li:hover,
.is-style-ltc-checklist li:hover {
  border-color: var(--theme-palette-color-6);
}
.ltc-incl-list li::before,
.is-style-ltc-checklist li::before {
  content: "";
  display: block;
  width: var(--ltc-checklist-icon-size, 16px);
  height: var(--ltc-checklist-icon-size, 16px);
  min-width: var(--ltc-checklist-icon-size, 16px);
  flex-shrink: 0;
  margin-top: .2rem;
  background-color: var(--ltc-checklist-icon-color, var(--wp--preset--color--palette-color-1));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Review carousel (JS-driven — can't do in Gutenberg) ─────────────── */
.ltc-proof-slides {
  position: relative;
  min-height: 120px;
}
.ltc-proof-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.ltc-proof-slide.active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}
.ltc-proof-text {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .7);
  font-style: italic;
  margin: 0 0 .75rem;
}
.ltc-proof-author {
  font-family: var(--theme-font-1, 'Montserrat', sans-serif);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .35);
}
.ltc-proof-nav {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
}
.ltc-proof-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: transparent;
  color: rgba(255, 255, 255, .4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, color .2s;
  padding: 0;
}
.ltc-proof-arrow:hover {
  border-color: rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .7);
}
.ltc-proof-arrow svg {
  width: 14px;
  height: 14px;
}

/* ── Service cards on accueil (hover effect — Gutenberg can't do hover) ── */
.ltc-card {
  transition: transform .2s, box-shadow .2s, border-top-color .2s;
  border-top: 2px solid transparent;
}
.ltc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .08);
  border-top-color: var(--theme-palette-color-6);
}

/* ── Blog article readability (long-form reading breathing room) ─────── */
.single-post .entry-content p,
.single-post .entry-content li {
  margin-block: 0 1.4em;
  line-height: 1.8;
}
.single-post .entry-content h2 { margin-top: 2.5em; }
.single-post .entry-content h3 { margin-top: 2em; }

/* ── Native button hover fix ─────────────────────────────────────────── */
.wp-block-button__link {
  transition: opacity .2s, background-color .2s;
}
.wp-block-button__link:hover {
  opacity: 0.85;
}

/* ── Inline text link hover (paragraph-nested <a>) ──────────────────── */
.entry-content p a,
.wp-block-post-content p a {
  transition: opacity .2s;
}
.entry-content p a:hover,
.wp-block-post-content p a:hover {
  opacity: 0.7;
}

/* ── Contact form (page /contact/ — raw HTML form in wp:html block) ──── */
.ltc-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ltc-contact-label {
  font-family: var(--theme-font-1, 'Montserrat', sans-serif);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--theme-palette-color-6);
  margin-bottom: -.5rem;
}
/* Specificité doublement bumpée + couvre tous les états (:invalid arrive
   sur les inputs avec pattern non rempli, ce qui peut activer un autre style).
   Cible aussi input[type=email/tel] + textarea pour tenir contre Blocksy. */
.ltc-contact-form input[type="email"].ltc-contact-input,
.ltc-contact-form input[type="tel"].ltc-contact-input,
.ltc-contact-form input.ltc-contact-input,
.ltc-contact-form textarea.ltc-contact-input,
.ltc-contact-form input.ltc-contact-input:invalid,
.ltc-contact-form input.ltc-contact-input:placeholder-shown,
.ltc-contact-form textarea.ltc-contact-input:invalid {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--theme-palette-color-4);
  background-color: #ffffff;
  border: 1px solid var(--theme-palette-color-9, #e5e7eb);
  border-radius: 3px;
  padding: .85rem 1rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.ltc-contact-form input.ltc-contact-input:focus,
.ltc-contact-form textarea.ltc-contact-input:focus {
  outline: none;
  border-color: var(--theme-palette-color-6);
  box-shadow: 0 0 0 3px rgba(254, 90, 2, .15);
  background-color: #ffffff;
}
.ltc-contact-form textarea.ltc-contact-textarea {
  resize: vertical;
  min-height: 140px;
}
.ltc-contact-submit {
  font-family: var(--theme-font-1, 'Montserrat', sans-serif);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--theme-palette-color-8, #fafbfc);
  background: var(--theme-palette-color-1);
  border: none;
  border-radius: 3px;
  padding: .95rem 2rem;
  cursor: pointer;
  transition: opacity .2s;
  align-self: flex-start;
  margin-top: .5rem;
}
.ltc-contact-submit:hover { opacity: .85; }
.ltc-contact-note {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--theme-palette-color-3);
  margin: .5rem 0 0;
  opacity: .75;
}

/* ── "Retour au blogue" link on category archives ────────────────────── */
.ltc-archive-return {
  font-family: var(--theme-font-1, 'Montserrat', sans-serif);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.ltc-archive-return a {
  color: var(--theme-palette-color-6);
  text-decoration: none;
  transition: opacity .2s;
  display: inline-block;
}
.ltc-archive-return a:hover { opacity: .75; }
.ltc-archive-return--bottom {
  margin: 2rem 0 0;
  text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ltc-proof-slides { min-height: 150px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BLOCK STYLE BACKINGS (couche 2/6 du harness wordpress_agent_harness)
   --
   Chaque classe enregistrée dans inc/block-styles.php a son backing ici.
   Cible toujours .ltc-foo + .is-style-ltc-foo (le second est ajouté
   automatiquement par Gutenberg quand le client choisit dans le picker).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Eyebrow + Link Action — STRUCTURE seulement (pas de typo, pas de couleur) */
/*
 * R-ARCH-004 du harness : la TYPO de ces styles vient de Customizer →
 * « Marque LTC » (cf. inc/customizer.php). La COULEUR vient du textColor
 * inline du bloc (palette token éditable Customizer + sidebar editor).
 *
 * Ici seulement : margins, transitions, structure non-typographique.
 */
.ltc-eyebrow,
.is-style-ltc-eyebrow {
  margin: 0 0 .75rem;
}

.ltc-link-action,
.is-style-ltc-link-action {
  margin-top: 1rem;
}
.ltc-link-action a,
.is-style-ltc-link-action a {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s;
}
.ltc-link-action a:hover,
.is-style-ltc-link-action a:hover {
  opacity: .75;
}

/* ── Header — menu actif : underline visible sans !important ─────────────── */
/* La couleur du active link est contrôlée par la Customizer Blocksy
   (Header → Menu → Active link color). Ici on ajoute juste l'underline vert
   comme signal supplémentaire — pas de override de couleur. */
.ct-header .menu-item.current-menu-item > a,
.ct-header .menu-item.current-menu-ancestor > a {
  border-bottom: 2px solid var(--wp--preset--color--palette-color-1);
  padding-bottom: 2px;
}
/* TODO Customizer : Header → Menu → Active link color → palette-color-4 (foncé) */
/* TODO Customizer : Typography → Body → Font Weight → 400 (Regular) */