/*
 Theme Name:   Blocksy Child
 Theme URI:    https://www.autonomag.com/
 Description:  Child theme for Blocksy
 Author:       Your Name
 Template:     blocksy
 Version:      1.0.0
*/

/* -----------------------------------------------------------
   AUTONOMAG – DESIGN TOKENS
----------------------------------------------------------- */
:root {
  --autono-teal: #27899b;         /* Main teal */
  --autono-teal-dark: #3e7579;    /* Darker teal */
  --autono-blue-light: #5ea9b7;
  --autono-green-light: #c8e79a;
  --autono-note-bg: #f0f6df;      /* Pale note green */
  --autono-tip-bg: #e3f3f1;       /* Pale teal background */
  --autono-soft-bg: #f6ffee;      /* Soft mint background */
  --autono-text: #363636;         /* Main text grey */
  --autono-border-radius: 20px;
  --autono-border-light: 1px solid var(--autono-teal-dark);
  --autono-spacing: 14px;
  --autono-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* ===========================================================
   A RETENIR – class: autono-note
=========================================================== */
.autono-note {
  background: var(--autono-note-bg);
  border: 1px solid var(--autono-teal-dark);
  border-radius: var(--autono-border-radius);
  padding: var(--autono-spacing);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 14px;
  align-items: start;
  box-shadow: var(--autono-shadow);
  color: var(--autono-text);
}

/* Title ~32px, bold, teal */
.autono-note h3.wp-block-heading,
.autono-note h2.wp-block-heading,
.autono-note h3,
.autono-note h2 {
  margin: 0 0 6px;
  font-size: 2rem !important;    /* ~32px */
  font-weight: 700 !important;
  color: var(--autono-teal-dark) !important;
}

/* Paragraph – shared style with autono-tip (see below) */
.autono-note p {
  margin: 0;
  font-size: 1.0625rem !important;  /* 17px */
  line-height: 1.4;
  font-weight: 700;
  font-style: italic;
  color: var(--autono-text);
}

/* Icon */
.autono-note img {
  max-width: 68px;
  height: auto;
  margin-top: 2px;
}

@media (max-width: 600px) {
  .autono-note {
    grid-template-columns: 1fr;
  }
  .autono-note img {
    margin-bottom: 10px;
  }
}



/* ===========================================================
   BON A SAVOIR – class: autono-tip
   (Aligned paragraph style with autono-note)
=========================================================== */
.autono-tip {
  background: var(--autono-tip-bg);
  border: var(--autono-border-light);
  border-radius: var(--autono-border-radius);
  padding: 16px 20px;
  margin: 20px 0;
  box-shadow: var(--autono-shadow);
  color: var(--autono-text);
}

/* Icon */
.autono-tip img {
  max-width: 95px;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}

/* Title – same spirit as A retenir but slightly smaller */
.autono-tip h2,
.autono-tip h3 {
  margin: 0 0 6px;
  font-size: 1.6rem !important;        /* ~25–26px */
  font-weight: 700 !important;
  color: var(--autono-teal-dark) !important;
}

/* Paragraph – SAME as autono-note */
.autono-tip p {
  margin: 0;
  font-size: 1.0625rem !important;     /* 17px */
  line-height: 1.4;
  font-weight: 700;
  font-style: italic;
  color: var(--autono-text);
}

/* ---- autono-tip internal columns fix ---- */
.autono-tip .wp-block-columns {
    display: flex;
    align-items: center;           /* centre le titre et paragraphe verticalement */
    column-gap: 18px;              /* espace contrôlé icône ↔ texte */
}

/* Colonne de gauche (icone) — taille stable */
.autono-tip .wp-block-column:first-child {
    flex: 0 0 80px;                /* largeur fixe, stable */
    max-width: 90px;
    text-align: center;
}

/* Colonne de droite — occupe tout l’espace restant */
.autono-tip .wp-block-column:last-child {
    flex: 1;
}

/* Responsive — stack propre */
@media (max-width: 700px) {
    .autono-tip .wp-block-columns {
        flex-direction: column;
        align-items: flex-start;
    }

    .autono-tip .wp-block-column {
        flex: 1 1 100%;
        max-width: 100% !important;
    }

    .autono-tip .wp-block-column:first-child {
        margin-bottom: 10px;
        text-align: left;
    }
}


/* ===========================================================
   ATTENTION / ALERTE – class: autono-attention
=========================================================== */
.autono-attention {
  background: #fff3d6;
  border-left: 5px solid #ffc63b;
  border-radius: 16px;
  padding: 14px 18px;
  margin: 20px 0;
  color: #5a3a00;
}

.autono-attention h3,
.autono-attention h4 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #c97a00;
}

.autono-attention p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}

/* ===========================================================
   TABLEAU COMPARATIF – class: autono-table
=========================================================== */
.autono-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  color: var(--autono-text);
}

.autono-table th,
.autono-table td {
  border: 1px solid #d7e4e4;
  padding: 10px 12px;
  vertical-align: top;
}

.autono-table thead th {
  background: var(--autono-tip-bg);
  font-weight: 600;
  color: var(--autono-teal-dark);
}

.autono-table tbody tr:nth-child(even) {
  background: #fafdfd;
}

.autono-table tbody td:first-child {
  font-weight: 500;
}

/* ===========================================================
   3 POINTS CLÉS – class on Columns: autono-3points
   Reproduces your original block: tight icon/title/para stack
=========================================================== */

.autono-3points .wp-block-column {
  background: var(--autono-soft-bg);
  border: var(--autono-border-light);
  border-radius: var(--autono-border-radius);
  /* very close to your original padding: 11px / 19–20px */
  padding: 11px 20px 14px;
  text-align: center;
  box-shadow: var(--autono-shadow);
  color: var(--autono-text);
}

/* ----- ICON / IMAGE ----- */
/* Kill theme margins around the image wrapper */
.autono-3points .wp-block-column .wp-block-image {
  margin: 0 !important;
}

/* Icon sizing & centering – almost glued to the title */
.autono-3points .wp-block-column .wp-block-image img {
  max-width: 120px;
  height: auto;
  display: block;
  margin: 0 auto 2px !important;  /* tiny gap under icon */
}

/* ----- TITLE (H3) ----- */
/* Do NOT share styles with autono-4points here anymore */
.autono-3points .wp-block-column h3.wp-block-heading {
  margin-top: 0 !important;
  margin-bottom: 5px !important;   /* exactly like your original */
  font-size: 2rem !important;      /* ≈ 32px */
  font-weight: 700 !important;
  color: var(--autono-text) !important;
}

/* ----- PARAGRAPH ----- */
.autono-3points .wp-block-column p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 0.98rem;
  line-height: 1.45;
}

/* ----- MOBILE STACK ----- */
@media (max-width: 768px) {
  .autono-3points .wp-block-column {
    margin-bottom: 12px;
  }
}



/* ===========================================================
   4 POINTS (Stackable) – class: autono-4points
=========================================================== */
.autono-4points .stk-block-column {
  background: var(--autono-tip-bg);
  border: var(--autono-border-light);
  border-radius: var(--autono-border-radius);
  padding: 18px 18px 20px;
  text-align: center;
  box-shadow: var(--autono-shadow);
  color: var(--autono-text);
}

/* Force space between columns/rows in this block only */
.autono-4points .stk-row {
  column-gap: 16px;
  row-gap: 16px;
}

/* Reuse same figure spacing logic as 3 points */
.autono-4points figure {
  margin: 0 0 6px !important;
}

/* Force internal Stackable gaps for 4-points block only */
.autono-4points [class*="-column"] {
  --stk-columns-spacing: 11px !important; /* vertical spacing */
  --stk-column-gap: 8px !important;       /* horizontal spacing */
}


/* retire les gros marges par défaut dans chaque colonne */
.autono-4points .stk-block-column > *:first-child {
  margin-top: 0;
}
.autono-4points .stk-block-column > *:last-child {
  margin-bottom: 0;
}


.autono-4points img {
  max-width: 120px;
  height: auto;
  display: block;
  margin: 0 auto 6px;
}

/* Paragraphs */
.autono-4points p {
  margin: 4px 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .autono-4points .stk-block-column {
    margin-bottom: 12px;
  }
}

/* ===========================================================
   FAQ & QUIZ (Stackable Accordions)
   classes: autono-faq / autono-quiz
=========================================================== */
.autono-faq,
.autono-quiz {
  color: var(--autono-text);
}

/* remove default marker */
.autono-faq summary::-webkit-details-marker,
.autono-quiz summary::-webkit-details-marker {
  display: none;
}

.autono-faq summary,
.autono-quiz summary {
  cursor: pointer;
  padding: 10px 12px;
  list-style: none;
  display: block;
}

.autono-faq summary h4,
.autono-quiz summary h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--autono-teal-dark);
}

.autono-faq .stk-block-accordion__content,
.autono-quiz .stk-block-accordion__content {
  padding-top: 8px !important;
}

.autono-faq .stk-block-text__text,
.autono-quiz .stk-block-text__text {
  font-size: 0.98rem;
  line-height: 1.45;
}

/* Quiz variant = yellow */
.autono-quiz {
  --autono-quiz-bg: #fff8d9;
}

.autono-quiz summary {
  background: var(--autono-quiz-bg);
  border-radius: var(--autono-border-radius);
}

/* ===========================================================
   HEX BACKGROUND – class: autono-hex-bg
=========================================================== */
.autono-hex-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--autono-border-radius);
  padding: 20px;
  color: var(--autono-text);
}


/* ===========================================================
   FINAL TWEAK – autono-3points spacing icon / title / text
   Kill Gutenberg block-gap + reapply tight margins
=========================================================== */

/* reset the global block-gap inside our 3-points columns */
.autono-3points .wp-block-column > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* image wrapper: no extra margin at all */
.autono-3points .wp-block-column .wp-block-image {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* icon itself – almost glued to the title */
.autono-3points .wp-block-column .wp-block-image img {
  max-width: 120px;
  height: auto;
  display: block;
  margin: 0 auto 2px !important; /* tiny gap under icon */
}

/* title – same as your original block: 0 / 5px */
.autono-3points .wp-block-column h3.wp-block-heading {
  margin-top: 0 !important;
  margin-bottom: 5px !important;
  margin-block-start: 0 !important;
  margin-block-end: 5px !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--autono-text) !important;
}

/* paragraph – snug under the title */
.autono-3points .wp-block-column p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  font-size: 0.98rem;
  line-height: 1.45;
}