/*
Theme Name: Viajes R&M V2.1
Theme URI: https://rymviajes.com.mx
Author: Camilo Moreno
Author URI: https://tuwebsite.com
Description: Tema personalizado para la agencia de viajes Viajes R&M, integrado con el plugin RM Destinos.
Version: 2.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: viajes-rm
Tags: travel, agency, custom-logo, custom-menu, theme-options, featured-images, translation-ready, one-column, two-columns, right-sidebar, accessibility-ready, custom-background, custom-header, editor-style, wide-blocks
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.4
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# Normalize & Defaults
# Accessibility
# Alignments
# Clearings
# Typography
# Elements
  ## Links
  ## Forms (Buttons, Inputs)
  ## Tables
# Layout
  ## Container
  ## Grid (si usas uno propio)
# Navigation
  ## Main Navigation (Header)
  ## Footer Navigation
  ## Pagination
  ## Links
# Content
  ## Posts and Pages
  ## Comments
# Header
  ## Site Branding
# Footer
  ## Site Footer Widgets
  ## Site Info
# Widgets
# Plugins
  ## RM Destinos Plugin Styles (Overrides o complementos)
# Front Page Specific (si no están ya en front-page.css)
# Archive Destino Specific (si no están ya en archive-destino-theme.css)
# Media Queries
--------------------------------------------------------------*/

/* # Variables
-------------------------------------------------------------- */
:root {
    --primary: #FF6B00; /* Se sobrescribirá por el Customizer si se configura */
    --dark: #1F1B3A;    /* Se sobrescribirá por el Customizer */
    --light: #ffffff;
    --gray: #f5f5f5;
    --text: #333333;    /* Se sobrescribirá por el Customizer */
    --light-text: #777777;
    --border-color: #dddddd; /* Para consistencia */
  
    --font-primary: 'Poppins', sans-serif; /* Definir fuente principal */
  
    --container-width: 1200px;
    --container-padding: 15px;
  }
  
  /* # Normalize & Defaults
  -------------------------------------------------------------- */
  body {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
    color: var(--text);
    background-color: var(--light);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* # Accessibility
  -------------------------------------------------------------- */
  .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
  }
  
  /* # Alignments
  -------------------------------------------------------------- */
  .alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
  }
  .alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1.5em;
  }
  .aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .alignwide {
      margin-left: -100px;
      margin-right: -100px;
      max-width: calc(100% + 200px); /* Ajustar según el padding del contenedor principal */
  }
  .alignfull {
      margin-left: calc(-100vw / 2 + 100% / 2);
      margin-right: calc(-100vw / 2 + 100% / 2);
      max-width: 100vw;
      width: 100vw;
  }
  
  
  /* # Clearings
  -------------------------------------------------------------- */
  .clear::before,
  .clear::after,
  .entry-content::before,
  .entry-content::after,
  .comment-content::before,
  .comment-content::after,
  .site-header::before,
  .site-header::after,
  .site-content::before,
  .site-content::after,
  .site-footer::before,
  .site-footer::after {
    content: "";
    display: table;
    table-layout: fixed;
  }
  
  .clear::after,
  .entry-content::after,
  .comment-content::after,
  .site-header::after,
  .site-content::after,
  .site-footer::after {
    clear: both;
  }
  
  
  /* # Typography
  -------------------------------------------------------------- */
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: var(--dark); /* Por defecto títulos oscuros */
  }
  
  h1 { font-size: 2.5em; }
  h2 { font-size: 2em; }
  h3 { font-size: 1.75em; }
  h4 { font-size: 1.5em; }
  h5 { font-size: 1.25em; }
  h6 { font-size: 1em; }
  
  p {
    margin-top: 0;
    margin-bottom: 1.5em;
  }
  
  a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  a:hover,
  a:focus {
    color: var(--dark); /* O un tono más oscuro de --primary */
    text-decoration: underline;
  }
  
  /* # Elements
  -------------------------------------------------------------- */
  /* ## Links */
  /* Ya definidos arriba */
  
  /* ## Forms (Buttons, Inputs) */
  .btn,
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 25px; /* Coincide con front-page.css */
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
    font-size: 1em;
    line-height: 1.5;
  }
  
  .btn-primary,
  button.btn-primary, /* Para que coincida con el estilo de botón de front-page */
  input[type="submit"] { /* Estilo por defecto para submit buttons */
    background-color: var(--primary);
    color: var(--light);
    border-color: var(--primary);
  }
  .btn-primary:hover,
  button.btn-primary:hover,
  input[type="submit"]:hover {
    background-color: var(--dark); /* O un tono más oscuro de --primary */
    border-color: var(--dark);
    color: var(--light);
  }
  
  .btn-outline {
    background-color: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
  }
  .btn-outline:hover {
    background-color: var(--primary);
    color: var(--light);
  }
  
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="color"],
  textarea {
    color: var(--text);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.75em 1em;
    width: 100%;
    max-width: 100%;
  }
  input[type="text"]:focus,
  /* ...otros inputs:focus... */
  textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 255, 107, 0), 0.25); /* Necesitarías --primary-rgb */
  }
  
  
  /* # Layout
  -------------------------------------------------------------- */
  .container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  
  .section { /* De front-page.css, pero puede ser global */
    padding: 60px 0;
  }
  
  .section-title { /* De front-page.css, pero puede ser global */
    text-align: center;
    margin-bottom: 40px;
  }
  .section-title h2 {
    font-size: 32px; /* Ajusta según necesidad */
    font-weight: 700;
    margin-bottom: 10px;
  }
  .section-title p {
    color: var(--light-text);
    max-width: 700px;
    margin: 0 auto 1.5em;
  }
  
  /* # Navigation
  -------------------------------------------------------------- */
  /* ## Main Navigation (Header) */
  .site-header {
    padding: 15px 0;
    background-color: var(--light);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky; /* O fixed si quieres que se quede siempre arriba */
    top: 0;
    z-index: 1000; /* Para que esté sobre otros elementos */
  }
  
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .site-branding .custom-logo-link img,
  .site-branding .site-logo { /* Para el fallback */
    max-height: 40px; /* Ajustado desde front-page.css */
    width: auto;
    display: block;
  }
  
  .main-navigation ul.primary-menu { /* Sé más específico */
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .main-navigation ul.primary-menu li {
    margin: 0 15px;
  }
  .main-navigation ul.primary-menu a {
    color: var(--text);
    font-weight: 500;
    padding: 0.5em 0; /* Para mejor clic */
    display: block;
  }
  .main-navigation ul.primary-menu a:hover,
  .main-navigation ul.primary-menu .current-menu-item > a {
    color: var(--primary);
  }
  
  .header-buttons {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre botones */
  }
  .login-btn {
    color: var(--text);
    font-weight: 500;
  }
  .register-btn {
    background-color: var(--primary);
    color: var(--light);
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 500;
  }
  .login-btn:hover, .register-btn:hover {
      opacity: 0.85;
      text-decoration: none;
  }
  
  /* # Footer
  -------------------------------------------------------------- */
  .site-footer {
    background-color: var(--dark);
    color: var(--light);
    padding: 60px 0 30px;
  }
  .footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Más responsive */
    gap: 30px;
  }
  .footer-column .footer-logo {
      max-width: 150px; /* Ajusta según necesites */
      margin-bottom: 20px;
  }
  .footer-column h3 {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--light);
  }
  .footer-column ul.footer-menu,
  .footer-column ul.contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .footer-column ul.footer-menu li,
  .footer-column ul.contact-info li {
    margin-bottom: 10px;
  }
  .footer-column ul.footer-menu li a {
    color: #ccc;
    transition: color 0.3s;
  }
  .footer-column ul.footer-menu li a:hover {
    color: var(--primary);
  }
  .footer-column ul.contact-info i {
      margin-right: 10px;
      color: var(--primary);
  }
  .footer-social {
    display: flex;
    margin-top: 20px;
    gap: 15px;
  }
  .footer-social a {
    color: var(--light);
    font-size: 1.2em;
  }
  .footer-social a:hover {
      color: var(--primary);
  }
  .footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Para móviles */
    gap: 10px;
  }
  .footer-bottom p {
    margin: 0;
    color: #ccc;
    font-size: 14px;
  }
  .footer-bottom-links a {
    color: #ccc;
    margin-left: 20px;
    font-size: 14px;
  }
  .footer-bottom-links a:hover {
      color: var(--primary);
  }
  
  /* # Content
  -------------------------------------------------------------- */
  .site-main {
      padding-top: 30px; /* Espacio debajo del header */
      padding-bottom: 30px;
  }
  .entry-header {
      margin-bottom: 1.5em;
  }
  .entry-title {
      font-size: 2em;
      margin-bottom: 0.25em;
  }
  .entry-content a {
      text-decoration: underline;
  }
  .entry-content a:hover {
      text-decoration: none;
  }
  
  /* # Plugins
  -------------------------------------------------------------- */
  /* ## RM Destinos Plugin Styles (Overrides o complementos) */
  /* Aquí puedes añadir estilos para sobreescribir o complementar
     los de public/css/rm-destinos-public.css del plugin
     si es necesario para que se ajuste mejor a tu tema. */
  
  /* Por ejemplo, si el plugin usa .rm-destinos-button y quieres que se parezca a .btn-primary de tu tema */
  /*
  .rm-destinos-button {
      display: inline-block;
      padding: 10px 24px !important;
      border-radius: 25px !important;
      font-weight: 600 !important;
      background-color: var(--primary) !important;
      color: var(--light) !important;
      border: 1px solid var(--primary) !important;
  }
  .rm-destinos-button:hover {
      background-color: var(--dark) !important;
      border-color: var(--dark) !important;
      color: var(--light) !important;
  }
  */
  
  /* # Media Queries (Ejemplos básicos)
  -------------------------------------------------------------- */
  @media (max-width: 992px) {
    .header-container {
      /* Podrías querer un menú hamburguesa aquí */
    }
    .main-navigation {
      /* display: none; O ocultar para menú móvil */
    }
    .footer-container {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
  }
  
  @media (max-width: 768px) {
    h1 { font-size: 2em; }
    h2 { font-size: 1.75em; }
    h3 { font-size: 1.5em; }
  
    .footer-container {
      grid-template-columns: 1fr; /* Una columna en móviles */
      text-align: center;
    }
    .footer-column .footer-logo {
      margin-left: auto;
      margin-right: auto;
    }
    .footer-social {
      justify-content: center;
    }
    .footer-bottom {
      flex-direction: column;
      text-align: center;
    }
    .footer-bottom-links {
      margin-top: 10px;
    }
    .footer-bottom-links a {
      margin: 0 10px;
    }
    .header-buttons {
        /* Podrías querer ocultarlos o moverlos al menú móvil */
    }
  }
  
  @media (max-width: 576px) {
      .header-container {
          flex-direction: column;
          gap: 15px;
      }
      .main-navigation ul.primary-menu {
          flex-direction: column;
          align-items: center;
      }
      .main-navigation ul.primary-menu li {
          margin: 10px 0;
      }
  }
  /* ... otros estilos ... */

/* # Navigation - Mobile Menu Specific
-------------------------------------------------------------- */
.menu-toggle {
    display: none; /* Oculto por defecto, se muestra en media query */
    background: transparent;
    border: 1px solid var(--dark); /* O var(--primary) */
    color: var(--dark);
    padding: 0.35em 0.65em;
    border-radius: 4px;
    font-size: 1.2em; /* Ajustar tamaño del ícono */
    line-height: 1;
    cursor: pointer;
}
.menu-toggle:hover {
    background-color: var(--primary);
    color: var(--light);
    border-color: var(--primary);
}

/* En tu media query para móvil/tablet, por ejemplo @media (max-width: 992px) */
@media (max-width: 992px) {
    .header-container {
      /* Ajustes para el contenedor del header si es necesario */
    }

    .menu-toggle {
        display: block; /* Mostrar el botón de hamburguesa */
        order: 3; /* Si usas flexbox y quieres reordenar */
    }

    .main-navigation {
        order: 4; /* Para que el menú aparezca después del toggle si se usa flex */
        width: 100%; /* Ocupar todo el ancho para el menú desplegable */
    }

    .main-navigation ul.primary-menu {
        display: none; /* Oculto por defecto en móvil */
        flex-direction: column;
        width: 100%;
        position: absolute; /* O relative, según tu layout */
        top: 100%; /* Posicionarlo debajo del header */
        left: 0;
        background-color: var(--light); /* Fondo para el menú desplegado */
        box-shadow: 0 3px 5px rgba(0,0,0,0.1);
        z-index: 998; /* Asegurar que esté sobre el contenido */
        border-top: 1px solid var(--border-color);
    }

    .main-navigation ul.primary-menu.toggled-on {
        display: flex; /* Mostrar cuando se activa con JS */
    }

    .main-navigation ul.primary-menu li {
        margin: 0;
        width: 100%;
    }

    .main-navigation ul.primary-menu li a {
        padding: 12px 20px;
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--gray); /* Separador entre ítems */
        text-align: left; /* O center si prefieres */
    }
    .main-navigation ul.primary-menu li:last-child a {
        border-bottom: none;
    }
    .main-navigation ul.primary-menu .current-menu-item > a {
        background-color: var(--gray);
    }


    .header-buttons {
        /* Decide qué hacer con los botones de login/registro en móvil.
           Podrías ocultarlos, moverlos al menú, o reducir su tamaño.
           Ejemplo: ocultarlos */
        /* display: none; */
        margin-left: auto; /* Si el menu-toggle está al final */
        order: 2; /* Ejemplo de orden con flex */
    }
}

/* Si quieres que el menú principal se oculte y aparezca el toggle antes (e.g., 768px) */
@media (max-width: 768px) {
    /* Ajustes adicionales si es necesario para pantallas más pequeñas */
    .header-buttons {
        /* Por ejemplo, ocultarlos definitivamente */
        /* display: none; */
    }
}