/*
Theme Name: Namjai Child-2025
Theme URI: 
Author: Narai-web
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: namjai-child-2025
Tags: 
*/
/* Renforce la spécificité : wrapper + .wpcf7 */

.njc-form, .njc-form * { box-sizing: border-box; }
.njc-form .wpcf7 { max-width: 100%; overflow: hidden; }

.wp-site-blocks .njc-form .wpcf7 { background: #f5edd9; padding: 2rem; border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.05); }

.wp-site-blocks .njc-form label{ display:block; font-weight:600; color:#3b3330; margin:.6rem 0 .35rem; }

.wp-site-blocks .njc-form input[type="text"],
.wp-site-blocks .njc-form input[type="email"],
.wp-site-blocks .njc-form input[type="tel"],
.wp-site-blocks .njc-form textarea,
.wp-site-blocks .njc-form select{
  display:block;
  width:100%;
  max-width:100%;
  padding:.9rem 1rem;
  border:1.5px solid #d9cdbd; border-radius:14px; background:#fff; color:#3b3330;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.njc-form p{ margin: .65rem 0; }

.wp-site-blocks .njc-form textarea{ min-height:160px; resize:vertical; }

.wp-site-blocks .njc-form input:focus,
.wp-site-blocks .njc-form textarea:focus,
.wp-site-blocks .njc-form select:focus{
  outline:none; border-color:#9a6b3a; box-shadow:0 0 0 4px rgba(154,107,58,.12);
}

.wp-site-blocks .njc-form ::placeholder{ color:#7a6f69; opacity:.85; }

/* Grille responsive */
@media (min-width: 820px){
  .wp-site-blocks .njc-form .njc-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
  .wp-site-blocks .njc-form .full{ grid-column:1/-1; }
}

/* Consentement & erreurs */
.njc-form .wpcf7-acceptance,
.njc-form .wpcf7-list-item{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  margin:.6rem 0 1rem;
  line-height:1.35;
}
.njc-form .wpcf7-acceptance input[type="checkbox"],
.njc-form input[type="checkbox"]{
  appearance:auto;         /* remet la case native si un reset l’avait masquée */
  width:18px; height:18px; /* taille confortable mobile */
  margin-top:.2rem;
}

.wp-site-blocks .njc-form .wpcf7-not-valid-tip{ font-size:.9rem; color:#b6402e; margin:.25rem 0 0 .15rem; }
.wp-site-blocks .njc-form .wpcf7-form-control.wpcf7-not-valid{ border-color:#b6402e; background:#fff7f6; }

/* Bouton */
/* Bouton – compacité */
.njc-form input[type="submit"]{
  padding:.8rem 1.2rem;
  border-radius:999px;
}
.wp-site-blocks .njc-form input[type="submit"]{
  appearance:none; border:0; background:#9a6b3a; color:#fff; font-weight:700; letter-spacing:.2px;
  padding:.8rem 1.2rem;
  border-radius:999px; cursor:pointer;
  transition: transform .08s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 8px 20px rgba(154,107,58,.20);
}
.wp-site-blocks .njc-form input[type="submit"]:hover{ background:#c79053; }
.wp-site-blocks .njc-form input[type="submit"]:active{ transform: translateY(1px); }

/* Messages système CF7 */
.wp-site-blocks .njc-form .wpcf7-response-output{
  margin-top:1rem; border-radius:14px; padding:.9rem 1rem; border:2px solid transparent;
}
.wp-site-blocks .njc-form .wpcf7 form.sent .wpcf7-response-output{ border-color:#3aa374; background:#e9f7f1; color:#1d5c46; }
.wp-site-blocks .njc-form .wpcf7 form.invalid .wpcf7-response-output,
.wp-site-blocks .njc-form .wpcf7 form.failed .wpcf7-response-output{ border-color:#c75b46; background:#fdecea; color:#6a231b; }

/* Cloudflare Turnstile – pas trop d’air autour */
.njc-form .cf-turnstile,
.njc-form .cf-challenge,
.njc-form .cf-wrapper{
  margin:.5rem 0 0 !important;
}

/* ====== Mobile (≤ 480px) ====== */
@media (max-width: 480px){
  .njc-form .wpcf7{ padding: 1rem 1rem; border-radius: 14px; }

  /* champs plus compacts */
  .njc-form input[type="text"],
  .njc-form input[type="email"],
  .njc-form input[type="tel"],
  .njc-form select{ padding:.7rem .9rem; border-radius:12px; }

  .njc-form textarea{ min-height:130px; padding:.8rem .9rem; border-radius:12px; }

  /* grille : 1 colonne serrée */
  .njc-grid{ display:block !important; }
  .njc-form p{ margin:.55rem 0; }

  /* labels moins massifs */
  .njc-form label{ margin:.4rem 0 .25rem; }
}

/* ====== Desktop (≥ 820px) – espaces réduits mais aérés */
@media (min-width: 820px){
  .njc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .njc-grid .full{ grid-column:1 / -1; }
  .njc-form p{ margin:.6rem 0; }
  .njc-form textarea{ min-height:150px; }
}
/* ---- Compacter réellement les espacements CF7 + TT25 ---- */

/* 1) Réduire le block gap (FSE) uniquement dans le wrapper */
.wp-site-blocks .njc-form{
  --wp--style--block-gap: 10px;
}
.wp-site-blocks .njc-form .wp-block-group,
.wp-site-blocks .njc-form .wp-block-columns{
  gap: 10px !important;
}

/* 2) Marges CF7 beaucoup plus courtes */
.wp-site-blocks .njc-form .wpcf7 p{ 
  margin: 8px 0 !important;
}
.wp-site-blocks .njc-form label{
  margin: .25rem 0 .2rem !important;
}

/* 3) Évite les “sauts” à cause des <br> insérés par CF7 */
.wp-site-blocks .njc-form br{ display:none; }

/* 4) Champs & messages : compacts */
.wp-site-blocks .njc-form input[type="text"],
.wp-site-blocks .njc-form input[type="email"],
.wp-site-blocks .njc-form input[type="tel"],
.wp-site-blocks .njc-form select,
.wp-site-blocks .njc-form textarea{
  margin: 0;          /* pas d’espace additionnel sous les champs */
}

.wp-site-blocks .njc-form .wpcf7-response-output{
  margin-top: .6rem !important;
  padding: .6rem .8rem !important;
}

/* 5) Checkbox (acceptance) compacte et visible */
.wp-site-blocks .njc-form .wpcf7-acceptance,
.wp-site-blocks .njc-form .wpcf7-list-item{
  display:flex; align-items:flex-start; gap:.5rem; 
  margin:.5rem 0 .8rem !important;
}
.wp-site-blocks .njc-form input[type="checkbox"]{
  width:18px; height:18px; appearance:auto; margin-top:.15rem;
}

/* 6) Resserrement mobile supplémentaire */
@media (max-width: 480px){
  .wp-site-blocks .njc-form .wpcf7{ padding: .9rem .9rem; }
  .wp-site-blocks .njc-form .wpcf7 p{ margin: 6px 0 !important; }
  .wp-site-blocks .njc-form textarea{ min-height: 120px; }
}