/* ==========================================================
   SISTEMA DE BOTONES — CÀMPING ELS ROURES

   Tres niveles jerárquicos:
   - .btn-primari    → CTAs transaccionales (reservas, búsqueda)
   - .btn-secundari  → Navegación interna (ver más, descubrir)
   - .btn-terciari   → Enlaces contextuales inline

   Colores (paleta de marca — manual de sistema §03 / §09):
   - Verde de marca:       #3EA534  (fondo del botón primario — superficie)
   - Verde hover primari:  #2F7D26  (estado hover del primario)
   - Verde funcional:      #03693A  (borde/texto de secundario y terciario)
   - Marrón texto:         #2A2520
   ========================================================== */


/* ----------------------------------------------------------
   BASE COMÚN
   ---------------------------------------------------------- */

.btn-primari,
.btn-secundari {
  display: inline-block;
  padding: 14px 32px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}


/* ----------------------------------------------------------
   BOTÓN PRIMARIO
   Uso: CTA transaccional principal (Reservar, Buscar)
   ---------------------------------------------------------- */

.btn-primari {
  background-color: #3EA534;
  border: 1px solid #3EA534;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.btn-primari:hover,
.btn-primari:focus {
  background-color: #2F7D26;
  border-color: #2F7D26;
  color: #ffffff;
}

.btn-primari:active {
  transform: translateY(1px);
}


/* ----------------------------------------------------------
   BOTÓN SECUNDARIO
   Uso: Navegación interna (Veure més, Descobrir, Veure tot)
   ---------------------------------------------------------- */

.btn-secundari {
  background-color: transparent;
  border: 1px solid #03693A;
  color: #03693A;
  text-transform: none;
}

.btn-secundari:hover,
.btn-secundari:focus {
  background-color: #03693A;
  border-color: #03693A;
  color: #ffffff;
}

.btn-secundari:active {
  transform: translateY(1px);
}


/* ----------------------------------------------------------
   ENLACE TERCIARIO
   Uso: Enlaces contextuales inline (dentro de párrafos,
   debajo de iconos, en listas, etc.)
   ---------------------------------------------------------- */

.btn-terciari {
  display: inline;
  font-family: inherit;
  font-weight: 500;
  color: #2A2520;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: #03693A;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.btn-terciari:hover,
.btn-terciari:focus {
  color: #03693A;
  text-decoration-color: #03693A;
}


/* ----------------------------------------------------------
   VARIANTE CON FLECHA
   Modificador opcional para enlaces terciarios o secundarios
   con flecha animada al hover.

   Uso: <a class="btn-terciari btn-fletxa">Descobreix →</a>
   ---------------------------------------------------------- */

.btn-fletxa::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.btn-fletxa:hover::after,
.btn-fletxa:focus::after {
  transform: translateX(4px);
}


/* ----------------------------------------------------------
   TAMAÑOS OPCIONALES
   Modificadores para tamaños especiales. Aplicar junto al
   estilo base.

   Uso: <a class="btn-primari btn-gran">RESERVAR</a>
   ---------------------------------------------------------- */

.btn-petit {
  padding: 10px 22px;
  font-size: 13px;
}

.btn-gran {
  padding: 18px 44px;
  font-size: 16px;
}


/* ----------------------------------------------------------
   ANCHO COMPLETO
   Modificador para botones a 100% de ancho (típico en móvil
   o en columnas estrechas).

   Uso: <a class="btn-primari btn-ample">BUSCAR</a>
   ---------------------------------------------------------- */

.btn-ample {
  display: block;
  width: 100%;
}


/* ----------------------------------------------------------
   RESPONSIVE
   En móvil los botones se hacen un punto más cómodos al tacto.
   ---------------------------------------------------------- */

@media (max-width: 768px) {
  .btn-primari,
  .btn-secundari {
    padding: 16px 28px;
    font-size: 15px;
  }

  .btn-gran {
    padding: 18px 32px;
  }
}


/* ==========================================================
   PROPAGACIÓ A BLOCS Gutenberg / Kadence Button
   Quan la classe additional (btn-primari / btn-secundari /
   btn-on-dark) s'aplica des de l'editor, WP la posa al wrapper
   (.wp-block-button) i no al <a> interior. Aquestes regles
   reapliquen l'aspecte al <a> perquè el botó del bloc quedi
   igual que un <a class="btn-secundari"> escrit a mà.
   Resol també el "Pendent d'implementació (Code)" del §09.
   ========================================================== */

.wp-block-button.btn-primari > .wp-block-button__link,
.wp-block-button.btn-primari > .wp-block-button__link:visited {
  background-color: #3EA534;
  border: 1px solid #3EA534;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  border-radius: 0;
  padding: 14px 32px;
  text-decoration: none;
}
.wp-block-button.btn-primari > .wp-block-button__link:hover,
.wp-block-button.btn-primari > .wp-block-button__link:focus {
  background-color: #2F7D26;
  border-color: #2F7D26;
  color: #ffffff;
}

.wp-block-button.btn-secundari > .wp-block-button__link,
.wp-block-button.btn-secundari > .wp-block-button__link:visited {
  background-color: transparent;
  border: 1px solid #03693A;
  color: #03693A;
  text-transform: none;
  border-radius: 0;
  padding: 14px 32px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.wp-block-button.btn-secundari > .wp-block-button__link:hover,
.wp-block-button.btn-secundari > .wp-block-button__link:focus {
  background-color: #03693A;
  border-color: #03693A;
  color: #ffffff;
}


/* ----------------------------------------------------------
   VARIANT SOBRE FONS FOSC (.btn-on-dark)
   Modifier que es combina amb .btn-secundari per a botons
   damunt panells #2A2520 o fotografies fosques. Sobre fons
   fosc el verd funcional #03693A perdria contrast, així que
   la variant usa el verd de marca #3EA534 com a accent (borde
   i text), no com a superfície — mantenim la regla "verd
   accent, no superfície" perquè el fons segueix transparent.
   Hover inverteix: fons verd marca, text fosc.

   Uso: <a class="btn-secundari btn-on-dark">Obrir mapa</a>
   o    Additional CSS Class: "btn-secundari btn-on-dark"
   ---------------------------------------------------------- */

.btn-secundari.btn-on-dark {
  background-color: transparent;
  border-color: #3EA534;
  color: #3EA534;
}
.btn-secundari.btn-on-dark:hover,
.btn-secundari.btn-on-dark:focus {
  background-color: #3EA534;
  border-color: #3EA534;
  color: #2A2520;
}

/* Neutralitza qualsevol border/background que els blocs Core
   apliquin al WRAPPER (.wp-block-button) — l'aspecte el porta
   sempre el <a> interior. Evita la sensació de "doble caixa". */
.wp-block-button.btn-secundari,
.wp-block-button.btn-primari {
  background: transparent;
  border: 0;
  padding: 0;
}

.wp-block-button.btn-secundari.btn-on-dark > .wp-block-button__link,
.wp-block-button.btn-secundari.btn-on-dark > .wp-block-button__link:visited {
  background-color: transparent;
  border-color: #3EA534;
  color: #3EA534;
}
.wp-block-button.btn-secundari.btn-on-dark > .wp-block-button__link:hover,
.wp-block-button.btn-secundari.btn-on-dark > .wp-block-button__link:focus {
  background-color: #3EA534;
  border-color: #3EA534;
  color: #2A2520;
}


/* ==========================================================
   INTEGRACIÓ GRAVITY FORMS (tema Orbital · framework)
   El submit d'un formulari és un CTA transaccional → ha de
   semblar `.btn-primari` (verd marca, majúscules, etc.).

   GF Orbital aplica el seu propi CSS amb selectors de
   specificity 0,6,1 (encadenant fins a 6 classes amb `:where()`
   per no inflar specificity dels :not). Guanyar-los amb
   selectors externs requeriria 7+ classes — absurd i fràgil.

   Vía idiomàtica: GF Orbital llegeix custom properties
   `--gf-ctrl-btn-*` a temps de cascade. Sobrescrivint-les al
   `.gform_wrapper`, GF aplica els valors cànon sense que la
   specificity importi. Aquesta és l'API de personalització
   pública del plugin.
   ========================================================== */

.gform_wrapper {
  /* ── Botó "primari" de GF (submit / next) → estètica .btn-secundari
        del sistema cànon §09: outline verd funcional, fons transparent,
        sense majúscules. Decisió del client per a formularis: el submit
        no és prou cridaner per a un primari ple; manté el llenguatge
        visual del botó "Veure situació" present a tot el lloc. ── */
  --gf-ctrl-btn-bg-color-primary: transparent;
  --gf-ctrl-btn-bg-color-hover-primary: #03693A;
  --gf-ctrl-btn-bg-color-focus-primary: #03693A;
  --gf-ctrl-btn-bg-color-disabled-primary: transparent;
  --gf-ctrl-btn-border-color-primary: #03693A;
  --gf-ctrl-btn-border-color-hover-primary: #03693A;
  --gf-ctrl-btn-border-color-focus-primary: #03693A;
  --gf-ctrl-btn-border-color-disabled-primary: #03693A;
  --gf-ctrl-btn-border-style-primary: solid;
  --gf-ctrl-btn-border-width-primary: 1px;
  --gf-ctrl-btn-color-primary: #03693A;
  --gf-ctrl-btn-color-hover-primary: #ffffff;
  --gf-ctrl-btn-color-focus-primary: #ffffff;
  --gf-ctrl-btn-color-disabled-primary: #03693A;

  /* ── Tipografia i caixa (compartits) ── */
  --gf-ctrl-btn-radius: 0;
  --gf-ctrl-btn-font-family: inherit;
  --gf-ctrl-btn-font-size: 15px;
  --gf-ctrl-btn-font-weight: 500;
  --gf-ctrl-btn-letter-spacing: 0.02em;
  --gf-ctrl-btn-line-height: 1.4;
  --gf-ctrl-btn-text-transform: none;
  --gf-ctrl-btn-text-decoration: none;
  --gf-ctrl-btn-padding-y: 14px;
  --gf-ctrl-btn-padding-x: 32px;
  --gf-ctrl-btn-shadow: none;
  --gf-ctrl-btn-shadow-hover: none;
  --gf-ctrl-btn-shadow-focus: none;
  --gf-ctrl-btn-shadow-disabled: none;
  --gf-ctrl-btn-size: auto;

  /* ── "Secundari" de GF (previous) → també outline; en multistep es
        diferencia per posició, no per estil (mateix llenguatge visual). ── */
  --gf-ctrl-btn-bg-color-secondary: transparent;
  --gf-ctrl-btn-bg-color-hover-secondary: #03693A;
  --gf-ctrl-btn-bg-color-focus-secondary: #03693A;
  --gf-ctrl-btn-border-color-secondary: #03693A;
  --gf-ctrl-btn-border-color-hover-secondary: #03693A;
  --gf-ctrl-btn-border-color-focus-secondary: #03693A;
  --gf-ctrl-btn-border-style-secondary: solid;
  --gf-ctrl-btn-border-width-secondary: 1px;
  --gf-ctrl-btn-color-secondary: #03693A;
  --gf-ctrl-btn-color-hover-secondary: #ffffff;
  --gf-ctrl-btn-color-focus-secondary: #ffffff;
}

@media (max-width: 768px) {
  .gform_wrapper {
    --gf-ctrl-btn-padding-y: 16px;
    --gf-ctrl-btn-padding-x: 28px;
  }
}