/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
:root{
  --color-primary:#1abc9c;
  --color-primary-dark:#16a085;
  --color-secondary:#34495e;
  --color-accent:#e74c3c;
  --color-background:#ffffff;
  --color-text:#2c3e50;
  --color-light-bg:#ecf0f1;
  --color-dark-bg:#2c3e50;
  --color-info:#007bff;
  --color-warning:#ffc107;
  --color-danger:#dc3545;
  --color-success:#28a745;

  --grid-columns:12;
  --grid-gap:16px;
  --container-max-width:1440px;
}

/* ================================
   GRID CUSTOM — Mobile First + Fallback IE
   ================================ */

/* Box sizing consistente */
*, *::before, *::after { box-sizing: border-box; }

/* Contenedores */
.custom-container-fluid{
  width:100%;
  padding:1rem;
  /* background:#f7f7f7;  opcional */
}
.custom-container-max{
  max-width:var(--container-max-width,1440px);
  margin-inline:auto;
  padding:1rem;
  /* background:#eef; opcional */
}

/* =========================================
   BASE: FLEXBOX (fallback para IE/antiguos)
   ========================================= */
.custom-grid-container{
  display:flex;              /* IE/antiguos usan esto */
  flex-wrap:wrap;
  width:100%;
  /* Simulación de gap con márgenes negativos + padding en hijos */
  margin-left:  calc(var(--grid-gap,16px) * -0.5);
  margin-right: calc(var(--grid-gap,16px) * -0.5);
}

/* Ítems base */
.custom-grid-item{
  /* color, fondo y borde descoméntalos si los necesitas */
  /* background:#3498db; */
  /* border:1px dashed #2980b9; */
  /* color:#111; */
  text-align:center;
  font-size:1rem;
  padding-left:  calc(var(--grid-gap,16px) * .5);
  padding-right: calc(var(--grid-gap,16px) * .5);
  margin-bottom: var(--grid-gap,16px);
  width:100%; /* por defecto, stack en mobile */
}

/* Alineaciones con fallback */
.custom-grid-item.custom-text-start{ text-align:left;  text-align:start; }
.custom-grid-item.custom-text-end  { text-align:right; text-align:end;   }

/* Spans (Flex fallback) — Mobile First
   base: 1 col = 100% (stack)
   >=480px: 6 columnas
   >=1024px: 12 columnas
*/
@media (min-width:480px){
  .custom-col-span-1  { width: calc(100% / 6  * 1); }
  .custom-col-span-2  { width: calc(100% / 6  * 2); }
  .custom-col-span-3  { width: calc(100% / 6  * 3); }
  .custom-col-span-4  { width: calc(100% / 6  * 4); }
  .custom-col-span-5  { width: calc(100% / 6  * 5); }
  .custom-col-span-6  { width: calc(100% / 6  * 6); }
  .custom-col-span-7, .custom-col-span-8, .custom-col-span-9,
  .custom-col-span-10,.custom-col-span-11,.custom-col-span-12 { width:100%; } /* evita overflow */
}
@media (min-width:1024px){
  .custom-col-span-1  { width: calc(100% / 12 * 1); }
  .custom-col-span-2  { width: calc(100% / 12 * 2); }
  .custom-col-span-3  { width: calc(100% / 12 * 3); }
  .custom-col-span-4  { width: calc(100% / 12 * 4); }
  .custom-col-span-5  { width: calc(100% / 12 * 5); }
  .custom-col-span-6  { width: calc(100% / 12 * 6); }
  .custom-col-span-7  { width: calc(100% / 12 * 7); }
  .custom-col-span-8  { width: calc(100% / 12 * 8); }
  .custom-col-span-9  { width: calc(100% / 12 * 9); }
  .custom-col-span-10 { width: calc(100% / 12 * 10); }
  .custom-col-span-11 { width: calc(100% / 12 * 11); }
  .custom-col-span-12 { width: 100%; }
}

/* Utilidad: ocupar fila completa (flex + grid) */
.custom-col-span-full{ width:100%; }

/* =========================================
   MEJORA: CSS GRID donde esté disponible
   ========================================= */
@supports (display:grid){
  .custom-grid-container{
    display:grid;
    gap: var(--grid-gap,16px);
    /* Mobile First: 2 columnas base */
    grid-template-columns: repeat(2, minmax(0,1fr));
    /* quitamos márgenes/padding artificiales del fallback */
    margin:0;
  }
  .custom-grid-item{
    margin:0;
    padding:10px;
    width:auto; /* lo maneja grid */
  }

  /* Spans para Grid */
  .custom-col-span-1  { grid-column: span 1; }
  .custom-col-span-2  { grid-column: span 2; }
  .custom-col-span-3  { grid-column: span 3; }
  .custom-col-span-4  { grid-column: span 4; }
  .custom-col-span-5  { grid-column: span 5; }
  .custom-col-span-6  { grid-column: span 6; }
  .custom-col-span-7  { grid-column: span 7; }
  .custom-col-span-8  { grid-column: span 8; }
  .custom-col-span-9  { grid-column: span 9; }
  .custom-col-span-10 { grid-column: span 10; }
  .custom-col-span-11 { grid-column: span 11; }
  .custom-col-span-12 { grid-column: span 12; }
  .custom-col-span-full{ grid-column: 1 / -1; }

  /* Breakpoints mobile-first (ajustables) */
  @media (min-width:480px){
    /* tablet: 6 columnas */
    .custom-grid-container{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  }
  @media (min-width:1024px){
    /* desktop: 12 columnas configurable por var */
    .custom-grid-container{ grid-template-columns: repeat(var(--grid-columns,12), minmax(0,1fr)); }
  }
}

/* =========================================
   Extras de compatibilidad
   ========================================= */
/* Evitar que imágenes/flex se desborden en IE/antiguos */
img{ max-width:100%; height:auto; display:block; }