/*
Theme Name: Set Fly Fishing
Theme URI: https://setflyfishing.com
Author: Set Fly Fishing
Description: Theme a medida para Set Fly Fishing. Compatible con Elementor, Polylang, Chaty, Constant Contact Forms, Strong Testimonials y Post Carousel Slider for Elementor.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: set-fly-fishing
*/

/* ==========================================================================
   SET FLY FISHING — DESIGN SYSTEM
   Ver manual de aplicaciones para referencia completa de tokens.
   ========================================================================== */

:root{
  /* Color */
  --set-ink:        #0E0E0E;
  --set-white:      #FAFAF8;
  --set-blue:       #45A0C0; /* acento marca / Patagonia */
  --set-amber:      #FCB017; /* acento marca / Golden Dorado / CTA primario */
  --set-burgundy:   #7A1F1F; /* acento secundario, discreto */
  --set-stone:      #4A4A47; /* texto secundario, líneas */
  --set-surface:    #F2F0EA; /* superficie secundaria */
  --set-card-patagonia: #2E4A50;
  --set-card-dorado:    #5A3A28;

  /* Tipografía */
  --set-font-display: 'Space Grotesk', sans-serif;
  --set-font-body:    'Inter', sans-serif;

  /* Escala tipográfica completa — desktop (px). 1pt ≈ 1.333px a 96dpi;
     estos valores son los mismos "pt" que venimos usando en el manual de
     estilo, ya convertidos. Coinciden con lo que hay que setear también
     en Elementor > Site Settings > Typography, para que ambos sistemas
     no se pisen entre sí. */
  --set-h1-size: 34px;   /* Hero / título de página — 1 por página */
  --set-h2-size: 23px;   /* Título de sección */
  --set-h3-size: 19px;   /* Título de card / subsección */
  --set-h4-size: 16px;   /* Sub-ítem dentro de una sección (ej. "Habitaciones" dentro de "El Lodge") */
  --set-h5-size: 14px;   /* Uso puntual, poco frecuente */
  --set-h6-size: 12px;   /* Uso puntual, poco frecuente */
  --set-p-size: 14px;    /* Cuerpo de texto estándar */
  --set-p-size-sm: 12px; /* Cuerpo secundario / captions */
  --set-eyebrow-size: 11px;
  --set-cta-size: 13px;

  /* Mobile — se aplican vía @media más abajo */
  --set-h1-size-mobile: 26px;
  --set-h2-size-mobile: 19px;
  --set-h3-size-mobile: 17px;
  --set-p-size-mobile: 14px; /* el cuerpo no se achica en mobile, por legibilidad */

  /* Radios */
  --set-radius-photo: 0px;
  --set-radius-card: 4px;
  --set-radius-button: 3px;
  --set-radius-badge: 2px;
}

body{
  font-family: var(--set-font-body);
  font-size: var(--set-p-size);
  color: var(--set-ink);
  background: var(--set-white);
  line-height: 1.6;
}

p{
  font-size: var(--set-p-size);
  line-height: 1.6;
  margin: 0 0 1em;
}

h1, h2, h3, h4, h5, h6, .set-display{
  font-family: var(--set-font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--set-ink);
}

h1{ font-size: var(--set-h1-size); }
h2{ font-size: var(--set-h2-size); }
h3{ font-size: var(--set-h3-size); }
h4{ font-size: var(--set-h4-size); font-weight: 500; }
h5{ font-size: var(--set-h5-size); font-weight: 500; }
h6{ font-size: var(--set-h6-size); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }

/* Responsive — la escala se achica en mobile sin perder jerarquía relativa entre niveles */
@media (max-width: 768px){
  h1{ font-size: var(--set-h1-size-mobile); }
  h2{ font-size: var(--set-h2-size-mobile); }
  h3{ font-size: var(--set-h3-size-mobile); }
  body, p{ font-size: var(--set-p-size-mobile); }
}

/* Nota de integración con Elementor: si el equipo prefiere controlar la
   tipografía desde Site Settings > Typography en vez de este CSS, hay
   que replicar estos mismos valores ahí para "Heading 1..6" y "Body" —
   de lo contrario, los widgets de Elementor con tipografía custom van
   a pisar estos tamaños en las páginas donde se use ese control. */

.set-eyebrow{
  font-family: var(--set-font-display);
  font-size: var(--set-size-eyebrow);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Botones (aplica también dentro de widgets de Elementor con clase .set-btn) */
.set-btn,
.elementor-button.set-btn{
  font-family: var(--set-font-display);
  font-weight: 700;
  font-size: var(--set-size-cta);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 24px;
  border-radius: var(--set-radius-button);
  display: inline-block;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.set-btn-primary{ background: var(--set-amber); color: var(--set-ink); }
.set-btn-secondary{ background: transparent; color: var(--set-ink); border: 1px solid var(--set-ink); }
.set-btn-on-dark{ color: var(--set-white); border: 1px solid var(--set-white); background: transparent; }

.set-card{
  border-radius: var(--set-radius-card);
  overflow: hidden;
}

.set-badge{
  border-radius: var(--set-radius-badge);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  text-transform: uppercase;
}

img{ border-radius: var(--set-radius-photo); max-width: 100%; height: auto; }

.set-container{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */
.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
.set-skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--set-amber);
  color: var(--set-ink);
  padding: 10px 16px;
  z-index: 9999;
  font-family: var(--set-font-display);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}
.set-skip-link:focus{
  left: 16px;
  top: 16px;
}
a:focus-visible, button:focus-visible, .set-btn:focus-visible{
  outline: 2px solid var(--set-blue);
  outline-offset: 2px;
}

/* ==========================================================================
   TABLAS — usado en comparativas de programas/lodges
   ========================================================================== */
.set-table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--set-p-size-sm);
}
.set-table th{
  font-family: var(--set-font-display);
  font-size: var(--set-eyebrow-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  color: var(--set-stone);
  padding: 12px 14px;
  border-bottom: 2px solid var(--set-ink);
}
.set-table td{
  padding: 12px 14px;
  border-bottom: 1px solid #E4E1D8;
  vertical-align: top;
}
.set-table tr:hover td{ background: var(--set-surface); }
.set-table caption{
  text-align: left;
  font-family: var(--set-font-display);
  font-weight: 700;
  font-size: var(--set-h3-size);
  margin-bottom: 12px;
}
@media (max-width: 768px){
  .set-table, .set-table thead, .set-table tbody, .set-table th, .set-table td, .set-table tr{
    display: block;
  }
  .set-table thead tr{ position: absolute; top: -9999px; left: -9999px; }
  .set-table tr{ margin-bottom: 16px; border: 1px solid #E4E1D8; border-radius: var(--set-radius-card); }
  .set-table td{
    border: none;
    border-bottom: 1px solid #EFECE4;
    position: relative;
    padding-left: 44%;
  }
  .set-table td:before{
    content: attr(data-label);
    position: absolute;
    left: 14px;
    font-weight: 700;
    font-family: var(--set-font-display);
    font-size: 10px;
    text-transform: uppercase;
    color: var(--set-stone);
  }
}

/* Compatibilidad: no pisar estilos de plugins (Chaty, Strong Testimonials, sliders)
   — el theme evita reglas globales agresivas (ej. * { } ) y namespacea todo bajo .set- */