/**
 * @file
 * LayosCamp font and brand color overrides.
 *
 * Fixes the Pridi !important font-family that was overriding Inter (the brand font).
 * Also aligns Bootstrap CSS variables with LayosCamp brand palette.
 *
 * This file MUST load AFTER style.css in frontend.libraries.yml.
 */

/* =====================================================================
   1. Brand font: Inter as primary body font
   ===================================================================== */
:root,
[data-bs-theme=light] {
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Override the Pridi-based utility classes to use Inter */
.G-txt--primaria {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.G-txt--secundaria {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.G-txt--negrita {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 600;
}

.G-txt--seminegrita {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 500;
}

.G-txt--fina {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 300;
}

/* =====================================================================
   2. Brand colors: override Bootstrap defaults
   ===================================================================== */
:root,
[data-bs-theme=light] {
  --bs-primary: #8BA841;
  --bs-primary-rgb: 139, 168, 65;
  --bs-link-color: #6B8A2F;
  --bs-link-color-rgb: 107, 138, 47;
  --bs-link-hover-color: #8BA841;
  --bs-link-hover-color-rgb: 139, 168, 65;
}

a {
  color: var(--bs-link-color);
}

a:hover,
a:focus {
  color: var(--bs-link-hover-color);
}

/* .btn-primary with brand green */
.btn-primary {
  --bs-btn-bg: #8BA841;
  --bs-btn-border-color: #8BA841;
  --bs-btn-hover-bg: #6B8A2F;
  --bs-btn-hover-border-color: #6B8A2F;
  --bs-btn-active-bg: #5A7528;
  --bs-btn-active-border-color: #5A7528;
  --bs-btn-disabled-bg: #8BA841;
  --bs-btn-disabled-border-color: #8BA841;
}

.btn-outline-primary {
  --bs-btn-color: #8BA841;
  --bs-btn-border-color: #8BA841;
  --bs-btn-hover-bg: #8BA841;
  --bs-btn-hover-border-color: #8BA841;
  --bs-btn-active-bg: #6B8A2F;
  --bs-btn-active-border-color: #6B8A2F;
}

/* =====================================================================
   3. Font-display: swap for performance
   ===================================================================== */
@font-face {
  font-family: 'Inter';
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  font-display: swap;
}

@font-face {
  font-family: 'pridilight';
  font-display: swap;
}

@font-face {
  font-family: 'pridiregular';
  font-display: swap;
}

@font-face {
  font-family: 'pridimedium';
  font-display: swap;
}

@font-face {
  font-family: 'pridisemibold';
  font-display: swap;
}

@font-face {
  font-family: 'poppinsregular';
  font-display: swap;
}

@font-face {
  font-family: 'opensans';
  font-display: swap;
}

/* Active navigation link — brand green, not Bootstrap blue */
.navbar .nav-link.active,
.navbar .nav-link.is-active,
.navbar .nav-link:active {
  color: #8BA841 !important;
  font-weight: 600;
}

.navbar .nav-link.active::after,
.navbar .nav-link.is-active::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: #8BA841;
  margin-top: 2px;
  border-radius: 1px;
}

/* Universal: buttons always fit their text */
button, .btn, input[type="submit"],
[class*="boton"], [class*="cta"],
.add-new-camper-form, .camper-item-seleccionar,
.lc-chat-bubble, .lc-floating-cta, .lc-chat-send,
.lc-chat-quick-btn, .E-camp-card__cta,
.E-fecha-selector__cta a, .G-boton--primario,
.G-boton--secundario, .G-boton--terciario {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: fit-content !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Mobile: allow buttons to wrap text so they don't overflow viewport */
@media (max-width: 480px) {
  button, .btn, input[type="submit"],
  [class*="boton"], [class*="cta"],
  .add-new-camper-form, .camper-item-seleccionar,
  .E-camp-card__cta, .E-fecha-selector__cta a,
  .G-boton--primario, .G-boton--secundario, .G-boton--terciario {
    white-space: normal !important;
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: break-word !important;
  }
}

/* =====================================================================
   4. iOS zoom prevention: ensure all inputs are at least 16px
   ===================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
  font-size: 16px !important;
}

/* =====================================================================
   5. Touch targets: minimum 44px per Apple/WCAG guidelines
   ===================================================================== */
a, button, input[type="submit"], input[type="button"],
[role="button"], .btn, [class*="boton"] {
  min-height: 44px;
  min-width: 44px;
}

/* Exclude inline text links from touch target sizing */
p a, li a, span a, .breadcrumb a, .E-home-letter__body a,
nav a, .navbar a {
  min-height: auto;
  min-width: auto;
}