/*
Theme Name:   Hueman Custom Refri
Theme URI:    https://refrigeracionale.com.ar
Description:  Tema hijo de Hueman para Refrigeración Alejandro Group. Adapta la identidad visual de sus redes (azul marino, naranja y fondo crema) con tipografía Montserrat. Requiere el tema Hueman instalado.
Author:       Refrigeración Alejandro
Template:     hueman
Version:      1.0.1
License:      GNU General Public License v3.0
License URI:  http://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  hueman-custom-refri
Tags:         custom-colors, child-theme
*/

/* =========================================================================
   1. PALETA (sacada de las publicaciones de Instagram del cliente)
   ========================================================================= */
:root {
  --ra-navy:        #001E56;   /* azul marino de marca                      */
  --ra-navy-deep:   #00153D;   /* variante más oscura (barra superior/pie)  */
  --ra-orange:      #EE6A00;   /* naranja de marca (acentos, bordes, íconos) */
  --ra-orange-ink:  #B84E00;   /* naranja para TEXTO sobre fondo claro (AA)  */
  --ra-cream:       #F8F4EF;   /* fondo "papel" de las publicaciones         */
  --ra-cream-2:     #F1EBE2;   /* crema más marcado (sidebar, pie)           */
  --ra-white:       #FFFFFF;
  --ra-text:        #2B3550;   /* texto de lectura                           */
  --ra-muted:       #5E6783;   /* texto secundario                           */
  --ra-line:        #E4DCCF;   /* bordes suaves                              */
  --ra-radius:      12px;
  --ra-font:        'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* =========================================================================
   2. BASE: fondo, tipografía y selección
   ========================================================================= */
body {
  background-color: var(--ra-cream);
  /* textura de papel muy sutil, igual a la de las publicaciones */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.28  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  font-family: var(--ra-font);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ra-text);
  -webkit-font-smoothing: antialiased;
}
::selection      { background: var(--ra-orange); color: var(--ra-navy); }
::-moz-selection { background: var(--ra-orange); color: var(--ra-navy); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ra-font);
  color: var(--ra-navy);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.entry h1 { font-size: 2.1em; }
.entry h2 { font-size: 1.75em; margin-top: 1.4em; }
.entry h3 { font-size: 1.4em;  margin-top: 1.2em; }
.entry h4 { font-size: 1.2em; }
.entry h5, .entry h6 { font-size: 1.05em; }
.entry h6 { letter-spacing: .06em; }

/* detalle de marca: barrita naranja bajo los títulos de sección del contenido */
.entry h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 10px;
  border-radius: 3px;
  background: var(--ra-orange);
}

/* Texto de lectura: más legible que el peso 300 original */
.entry { font-size: 1.0625rem; line-height: 1.75; color: var(--ra-text); }
.entry strong, .entry b { font-weight: 700; color: var(--ra-navy); }
.entry ul li::marker { color: var(--ra-orange); }
.entry dt { color: var(--ra-navy); }
.entry .wp-caption { background: var(--ra-cream-2); }
.entry .wp-caption-text { color: var(--ra-muted); }
.entry table th { color: var(--ra-navy); background: var(--ra-cream-2); border-color: var(--ra-line); }
.entry table td { border-color: var(--ra-line); }

/* =========================================================================
   3. ENLACES (Hueman usa el "color primario" del Customizer; lo reemplazamos)
   ========================================================================= */
a { color: var(--ra-navy); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ra-orange-ink); }
.entry a:not(.wp-block-button__link):not(.button) {
  text-decoration: underline;
  text-decoration-color: rgba(238,106,0,.55);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.entry a:not(.wp-block-button__link):not(.button):hover { text-decoration-color: var(--ra-orange); }

/* selectores que Hueman pinta con el color primario → naranja "tinta" */
a>span.hu-external::after,
.themeform label .required,
#flexslider-featured .flex-direction-nav .flex-next:hover,
#flexslider-featured .flex-direction-nav .flex-prev:hover,
.post-hover:hover .post-title a,
.post-title a:hover,
.sidebar.s1 .post-nav li a:hover i,
.content .post-nav li a:hover i,
.post-related a:hover,
.sidebar.s1 .widget_rss ul li a,
#footer .widget_rss ul li a,
.sidebar.s1 .widget_calendar a,
#footer .widget_calendar a,
.sidebar.s1 .alx-tab .tab-item-category a,
.sidebar.s1 .alx-posts .post-item-category a,
.sidebar.s1 .alx-tab li:hover .tab-item-title a,
.sidebar.s1 .alx-tab li:hover .tab-item-comment a,
.sidebar.s1 .alx-posts li:hover .post-item-title a,
#footer .alx-tab .tab-item-category a,
#footer .alx-posts .post-item-category a,
#footer .alx-tab li:hover .tab-item-title a,
#footer .alx-tab li:hover .tab-item-comment a,
#footer .alx-posts li:hover .post-item-title a,
.comment-tabs li.active a,
.comment-awaiting-moderation,
.child-menu a:hover,
.child-menu .current_page_item > a,
.wp-pagenavi a { color: var(--ra-orange-ink); }

/* selectores secundarios (sidebar 2) → azul marino */
.sidebar.s2 .post-nav li a:hover i,
.sidebar.s2 .widget_rss ul li a,
.sidebar.s2 .widget_calendar a,
.sidebar.s2 .alx-tab .tab-item-category a,
.sidebar.s2 .alx-posts .post-item-category a,
.sidebar.s2 .alx-tab li:hover .tab-item-title a,
.sidebar.s2 .alx-tab li:hover .tab-item-comment a,
.sidebar.s2 .alx-posts li:hover .post-item-title a { color: var(--ra-navy); }

/* bordes inferiores de pestañas y paginado */
.sidebar.s1 .alx-tabs-nav li.active a,
#footer .alx-tabs-nav li.active a,
.sidebar.s2 .alx-tabs-nav li.active a,
.comment-tabs li.active a,
.wp-pagenavi a:hover,
.wp-pagenavi a:active,
.wp-pagenavi span.current { border-bottom-color: var(--ra-orange) !important; }
.post-format .format-container { border-color: var(--ra-orange); }

/* =========================================================================
   4. BARRA SUPERIOR Y ENCABEZADO
   ========================================================================= */
#nav-topbar.nav-container,
.search-expand {
  background-color: var(--ra-navy-deep) !important;
  box-shadow: 0 2px 0 var(--ra-orange);          /* filo naranja bajo la barra */
}
.is-scrolled #header .nav-container.desktop-sticky,
.is-scrolled #header .search-expand,
.is-scrolled .topbar-transparent #nav-topbar.nav-container {
  background-color: rgba(0,21,61,.96) !important;
}
#header,
#nav-header.nav-container,
#main-header-search .search-expand {
  background-color: var(--ra-navy) !important;
}
#header #nav-mobile { background-color: var(--ra-navy) !important; }
.is-scrolled .topbar-transparent #nav-mobile { background-color: rgba(0,30,86,.96) !important; }

.site-title { font-family: var(--ra-font); font-weight: 800; letter-spacing: -0.02em; }
.site-title a { color: #fff; }
.site-description { font-family: var(--ra-font); color: rgba(255,255,255,.65); font-style: normal; }

/* Menú: mayúsculas con espaciado, como en las piezas de Instagram */
.nav > li > a,
.nav li a {
  font-family: var(--ra-font);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
@media only screen and (min-width: 720px) {
  .nav > li,
  .nav > li > a { font-size: .8rem; }
  #nav-topbar .nav li a,
  #nav-header .nav li a { color: rgba(255,255,255,.85); }
  #nav-topbar .nav > li > a:hover,
  #nav-topbar .nav > li:hover > a,
  #nav-header .nav > li > a:hover,
  #nav-header .nav > li:hover > a {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--ra-orange);   /* subrayado naranja en hover */
  }
  #nav-topbar .nav li.current_page_item > a,
  #nav-topbar .nav li.current-menu-item > a,
  #nav-topbar .nav li.current-menu-ancestor > a,
  #nav-header .nav li.current_page_item > a,
  #nav-header .nav li.current-menu-item > a,
  #nav-header .nav li.current-menu-ancestor > a {
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--ra-orange);
  }
  /* submenús */
  #nav-topbar .nav ul,
  #nav-header .nav ul {
    background: var(--ra-navy-deep) !important;
    border-top: 2px solid var(--ra-orange);
    border-radius: 0 0 8px 8px;
  }
}
@media only screen and (max-width: 719px) {
  #header .nav-container .nav li > a:hover,
  #header .nav-container .nav li.current_page_item > a,
  #header .nav-container .nav li.current-menu-item > a {
    background: rgba(238,106,0,.18);
    text-decoration: none;
    box-shadow: inset 4px 0 0 var(--ra-orange);
  }
}
.toggle-search:hover,
.toggle-search.active { background: rgba(238,106,0,.25); }
.nav-toggle,
#nav-topbar .nav-toggle,
#nav-header .nav-toggle,
#nav-mobile .nav-toggle { background: transparent; }

/* =========================================================================
   5. CONTENIDO, TÍTULOS DE PÁGINA Y SIDEBAR
   ========================================================================= */
#page .container-inner {
  background: var(--ra-white);
  box-shadow: 0 8px 30px rgba(0,30,86,.08);
  border-radius: var(--ra-radius) var(--ra-radius) 0 0;
}
.container-inner > .main::before,
.container-inner > .main::after,
.sidebar.expanding, .sidebar.collapsing,
.sidebar .sidebar-content,
.sidebar .sidebar-toggle { background-color: var(--ra-cream-2); }
.boxed #page { background: var(--ra-cream); }

.page-title {
  background: var(--ra-white);
  border-bottom: 1px solid var(--ra-line);
  color: var(--ra-muted);
}
.page-title h1, .page-title h2, .page-title h4 {
  font-family: var(--ra-font);
  color: var(--ra-navy);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .08em;
  border-left: 4px solid var(--ra-orange);     /* detalle de marca */
  padding-left: 12px;
}
.page-title a, .page-title span { color: var(--ra-muted); }
.page-title a:hover { color: var(--ra-orange-ink); }

.post-title, .post-title a { font-family: var(--ra-font); color: var(--ra-navy); font-weight: 700; }
.post-comments, .jp-play-bar, .jp-volume-bar-value { background-color: var(--ra-navy); }
.post-comments::before { border-right-color: var(--ra-navy); }

.sidebar .widget > h3,
.sidebar .widget .widget-title,
#footer .widget > h3 { font-family: var(--ra-font); color: var(--ra-navy); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .95rem; }
.sidebar.s1 .sidebar-top,
.sidebar.s2 .sidebar-top { background-color: var(--ra-orange); color: var(--ra-navy); }
.sidebar .sidebar-top p,
.sidebar .sidebar-top span { color: var(--ra-navy); font-family: var(--ra-font); font-weight: 800; }
.sidebar .widget a { color: var(--ra-muted); }
.sidebar .widget a:hover { color: var(--ra-orange-ink); }
.sidebar.s1 .sidebar-toggle,
.sidebar.s2 .sidebar-toggle { background: var(--ra-orange); color: var(--ra-navy); }
.sidebar.s1 .widget_calendar caption,
.sidebar.s2 .widget_calendar caption,
#footer .widget_calendar caption { background-color: var(--ra-orange); color: var(--ra-navy); }
.author-bio .bio-avatar:after,
.commentlist li.bypostauthor > .comment-body:after,
.commentlist li.comment-author-admin > .comment-body:after { background-color: var(--ra-orange); color: var(--ra-navy); }
.notebox { background: var(--ra-cream-2); color: var(--ra-muted); }

/* Imágenes del contenido con esquinas redondeadas (como los marcos de Instagram) */
.entry img, .post-thumbnail img, .image-container img { border-radius: 10px; }
.entry .wp-block-video video, .entry video { border-radius: var(--ra-radius); max-width: 100%; height: auto; }
.entry hr, .entry .wp-block-separator { border: 0; height: 1px; background: var(--ra-line); margin: 2em 0; }

/* ---- Íconos de redes sociales (widget "Seguir" y pie) ---------------------
   Se pintan con Font Awesome (una tipografía de íconos): NUNCA hay que
   cambiarles el font-family, por eso los blindamos más abajo.            */
.sidebar .sidebar-top .social-links .social-tooltip,
.sidebar.s1 .sidebar-top .social-links .social-tooltip,
.sidebar.s2 .sidebar-top .social-links .social-tooltip {
  color: var(--ra-navy) !important;               /* azul marino sobre naranja */
  transition: color .2s ease, transform .2s ease;
}
.sidebar .sidebar-top .social-links .social-tooltip:hover {
  color: #fff !important;
  transform: translateY(-2px);
}
#footer-bottom .social-links .social-tooltip { color: rgba(255,255,255,.85); transition: color .2s ease, transform .2s ease; }
#footer-bottom .social-links .social-tooltip:hover { color: var(--ra-orange) !important; transform: translateY(-2px); }

/* Blindaje: los íconos conservan su tipografía propia pase lo que pase */
i.fa, i.fas, i.far, i.fal, i.fad, i.fab,
.fa, .fas, .far, .fal, .fad { font-family: 'Font Awesome 5 Free' !important; }
i.fab, .fab                 { font-family: 'Font Awesome 5 Brands' !important; font-weight: 400 !important; }
i.fas, .fas, i.fa, .fa      { font-weight: 900 !important; }
i.far, .far                 { font-weight: 400 !important; }
i.fa, i.fas, i.far, i.fab, .fa, .fas, .far, .fab { text-transform: none; letter-spacing: 0; }

/* =========================================================================
   6. BOTONES, FORMULARIOS Y ETIQUETAS
   ========================================================================= */
input[type="submit"],
.themeform button[type="submit"],
.themeform .woocommerce input.button,
.wp-block-button__link,
.entry .button,
button.button {
  font-family: var(--ra-font);
  background: var(--ra-navy);
  color: #fff;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 2px solid var(--ra-navy);
  border-radius: 999px;                         /* pill, como el recuadro de Instagram */
  padding: 11px 26px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
input[type="submit"]:hover,
.themeform button[type="submit"]:hover,
.themeform .woocommerce input.button:hover,
.wp-block-button__link:hover,
.entry .button:hover,
button.button:hover {
  background: var(--ra-orange);
  border-color: var(--ra-orange);
  color: var(--ra-navy);
  transform: translateY(-1px);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--ra-navy); border-color: var(--ra-navy);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--ra-orange); border-color: var(--ra-orange); color: var(--ra-navy);
}

.themeform input[type="text"],
.themeform input[type="password"],
.themeform input[type="email"],
.themeform input[type="url"],
.themeform input[type="search"],
.themeform input[type="tel"],
.themeform input[type="number"],
.themeform textarea,
.themeform select {
  font-family: var(--ra-font);
  background: #fff;
  color: var(--ra-text);
  border: 1.5px solid #D9D0C3;
  border-radius: 8px;
}
.themeform input:focus,
.themeform textarea:focus,
.themeform select:focus {
  outline: none;
  border-color: var(--ra-orange);
  box-shadow: 0 0 0 3px rgba(238,106,0,.2);
}
.search-expand .themeform input { border-radius: 8px; border-color: rgba(255,255,255,.35); }

.post-tags a { border-radius: 999px; }
.post-tags a:hover { background-color: var(--ra-orange); color: var(--ra-navy); }
.wp-pagenavi a, .wp-pagenavi span { font-family: var(--ra-font); font-weight: 600; }
#flexslider-featured .flex-control-nav li a.flex-active { background-color: var(--ra-orange); }

/* =========================================================================
   7. PIE DE PÁGINA
   ========================================================================= */
#footer { background: var(--ra-cream-2); color: var(--ra-muted); }
#footer h3 { color: var(--ra-navy); }
#footer-bottom {
  background-color: var(--ra-navy-deep);
  border-top: 4px solid var(--ra-orange);
}
#footer-bottom a { color: rgba(255,255,255,.8); }
#footer-bottom a:hover { color: var(--ra-orange); }
#footer-bottom #copyright,
#footer-bottom #credit { color: rgba(255,255,255,.68); }
#footer-bottom #back-to-top { background: var(--ra-orange); color: var(--ra-navy); }
#footer-bottom #back-to-top:hover { background: #fff; }
#footer-bottom .social-links a,
#footer-bottom .social-links a:hover { color: #fff; }
#footer-bottom .social-links a:hover { color: var(--ra-orange); }

/* =========================================================================
   8. ACCESIBILIDAD
   ========================================================================= */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--ra-orange);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}