/*
Theme Name: Ribassi Blog
Description: Child theme di Twenty Twenty-Five per il blog di RIBASSI.TOP
Template: twentytwentyfive
Version: 1.0.0
*/

/* ========================================
   VARIABILI CSS PER RIBASSI.TOP
   ======================================== */
:root {

 /* Nuovi colori da aggiungere */
--color-cream: #eeefe9;          /* Crema */
--color-cream-light: #f7f7f4;    /* Crema chiaro */
--color-orange: #ff9900;         /* Arancione vivace */
--color-orange-dark: #df8702;    /* Arancione scuro */
--color-yellow: #ffd814;         /* Giallo principale */
--color-yellow-hover: #ffce12;   /* Giallo per hover */
--color-yellow-light: #fff7ce;    /* Giallo chiaro */
--color-yellow-dark: #dfbd13;    /* Giallo scuro */
--color-red: #cc0c39;         /* Rosso per sconti */
--color-red-hover: #a0092c;   /* Rosso più scuro per hover */
--color-navy: #232f3f;           /* Blu navy */
--color-navy-hover: #161d26;     /* Blu navy hover */
--color-blue: #017afd;           /* Blu */
--color-gray: #565959;           /* Grigio */
--color-gray-light: #f5f5f5;     /* Grigio Chiaro */

  
  /* Borders */
--color-border: #dbded4;         /* Bordi standard */
--color-border-light: #f0f0f0;   /* Bordi chiari */
--color-border-dark: #abad9f;    /* Bordi standard */

  /* Font Variables */
  --font-roboto: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-roboto-mono: 'Roboto Mono', 'Courier New', monospace;


}

/* Font Family Classes */
.font-roboto { font-family: var(--font-roboto); }
.font-roboto-mono { font-family: var(--font-roboto-mono); }

/* Font Color Classes */
.text-navy { color: var(--color-navy); }
.text-red { color: var(--color-red);}
.text-gray { color: var(--color-gray);}
.text-yellow { color: var(--color-yellow);}
.text-yellow-dark { color: var(--color-yellow-dark);}
.text-orange { color: var(--color-orange);}



/* Border Classes */
.border-color { border-color: var(--color-border); }
.border-color-light { border-color: var(--color-border-light); }
.border-color-dark { border-color: var(--color-border-dark); }



body {
  color: var(--color-navy);
}

h1 {
  font-weight: var(--font-bold);
}

h2 {
  font-weight: var(--font-semibold);
}

h3 {
  font-weight: var(--font-medium);
}

/* Button Components */

.wp-block-button.btn {
  position: relative;
  display: inline-block;
}


a:focus,
a:focus-visible,
button:focus,
.btn-nowp:focus,
.btn-nowp:focus-visible,
.wp-block-button.btn .wp-block-button__link:focus,
.wp-block-button.btn .wp-block-button__link:focus-visible {
  outline: none;
}

.btn-nowp,
.wp-block-button.btn .wp-block-button__link {
  position: relative;
  text-align: center;
  font-weight: 400;
  font-family: var(--font-roboto-mono);
  font-size: var(--text-sm);
  letter-spacing: -0.05rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-decoration: none;
}

.btn-nowp:hover,
.wp-block-button.btn .wp-block-button__link:hover {
  top: -1px;
}

.btn-nowp:active,
.wp-block-button.btn .wp-block-button__link:active {
  top: 3px;
}

/* Button White */

.btn-white-nowp,
.wp-block-button.btn-white .wp-block-button__link {
    background-color: white;
    color: var(--color-navy);
    border: 1px solid var(--color-navy);
    box-shadow: 0 3px 0 var(--color-gray);
}

.btn-white-nowp:hover,
.wp-block-button.btn-white .wp-block-button__link:hover {
    box-shadow: 0 4px 0 var(--color-gray);
}

.btn-white-nowp:active,
.wp-block-button.btn-white .wp-block-button__link:active {
    box-shadow: none;
}


/* Button white-orange-dark */

.wp-block-button.btn-white-orange-dark .wp-block-button__link {
    background-color: white;
    color: var(--color-navy);
    border: 1px solid var(--color-orange-dark);
    box-shadow: 0 3px 0 var(--color-orange-dark);
}

.wp-block-button.btn-white-orange-dark .wp-block-button__link:hover {
    box-shadow: 0 4px 0 var(--color-orange-dark);
}

.wp-block-button.btn-white-orange-dark .wp-block-button__link:active {
    box-shadow: none;
}

/* Button Yellow */

.wp-block-button.btn-yellow .wp-block-button__link {
    background-color: var(--color-yellow);
    color: var(--color-navy);
    border: 1px solid var(--color-orange-dark);
    box-shadow: 0 3px 0 var(--color-orange-dark);
}

.wp-block-button.btn-yellow .wp-block-button__link:hover {
    background-color: var(--color-yellow-hover);
    box-shadow: 0 4px 0 var(--color-orange-dark);
}

.wp-block-button.btn-yellow .wp-block-button__link:active {
    box-shadow: none;
}



/* Button Amazon */

.wp-block-button.btn-amazon .wp-block-button__link {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  font-weight: 400;
  padding: 0.35rem 0.75rem;
  border-radius: 1rem;
  border: none;
  cursor: pointer;
}

.wp-block-button.btn-amazon .wp-block-button__link:hover {
  background-color: var(--color-primary-hover);
}


.btn-amazon-light,
.wp-block-button.btn-amazon-light .wp-block-button__link {
  position: relative;
  background-color: var(--color-yellow-light);
  color: var(--color-navy);
  font-weight: 400;
  font-family: var(--font-roboto-mono);
  letter-spacing: -0.05rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-orange-dark);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--color-orange-dark);
}

.btn-amazon-light:hover,
.wp-block-button.btn-amazon-light .wp-block-button__link:hover {
  top: -1px;
  background-color: var(--color-yellow);
  box-shadow: 0 4px 0 var(--color-orange-dark);
}

.btn-amazon-light:active,
.wp-block-button.btn-amazon-light .wp-block-button__link:active {
  box-shadow: none;
}



/* Container Personalizzato RIBASSI.TOP */
.rt-max-w-1140 {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .rt-max-w-1140 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .rt-max-w-1140 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}




/* Applica ai container principali del tema */
.wp-block-group {
  max-width: 1440px;
  margin: 0 auto;
}


/* Background Body */
body {
  background-color: white;
  font-family: var(--font-roboto);
}


/* Header Top Bar */

header.wp-block-template-part {
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-cream) !important;
}


/* Header Sticky */
.site-header,
.wp-block-template-part[class*="header"],
header {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Footer */
footer.wp-block-template-part {
  background-color: var(--color-cream) !important;
  border-top: 1px solid var(--color-border);
  font-weight: var(--font-normal);
}


/* Menu Links Top Bar */
.wp-block-navigation a,
.wp-block-navigation-item a,
.site-header .wp-block-navigation-link a,
header nav a {
  color: var(--color-navy);
  font-weight: var(--font-normal);
  font-size: var(--text-sm);
  text-decoration: none;
}

/* Menu Links Hover */
.wp-block-navigation a:hover,
.wp-block-navigation-item a:hover,
.site-header .wp-block-navigation-link a:hover,
header nav a:hover {
  color: var(--color-orange);
}


@media (max-width: 640px) {
    .wp-block-navigation a,
    .wp-block-navigation-item a,
    .site-header .wp-block-navigation-link a,
    header nav a {
        font-size: var(--text-2xl);
    }
}



.footer-link a{
  font-size: var(--text-sm);
  color:  var(--color-cream);
  transition: color 0.2s ease-in-out;
}

.footer-link a:hover {
  text-decoration: underline;
}


/* ========================================
   RIBASSI OFFERTE WIDGET (CSS Variables)
   ======================================== */



.card-product {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border-light);
  padding: 0.75em;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}


.card-product:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}


.card-product * {
  text-decoration: none;
}



/* ========================================
   BOTTONI PER LISTA CATEGORIE BLOG
   ======================================== */



/* Bottoni categorie con selettore specifico */
.categories-button .wp-block-categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.categories-button .wp-block-categories-list li {
  margin: 0;
}

/* Stile bottoni categorie */
.categories-button .wp-block-categories-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  background-color: white;
  color: var(--color-navy);
  border-radius: 0.5rem;
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  text-decoration: none;
  box-shadow: 0 2px 0 var(--color-border-dark);
  text-align: center;
  font-family: var(--font-roboto-mono);
  letter-spacing: -0.05rem;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  border: 1px solid var(--color-navy);
  box-shadow: 0 3px 0 var(--color-gray);
}

.categories-button .wp-block-categories-list a:hover {
  top: -1px;
  box-shadow: 0 4px 0 var(--color-gray);
}

.categories-button .wp-block-categories-list a:active {
  box-shadow: none;
  top: 3px;
}