/*
Theme Name: OceanWP DDI
Template: oceanwp
Author: DDI
Description: Child theme di OceanWP per donnedermatologhe.it. Racchiude il "vestito"
 del vecchio sito Uncode (logo, menu, colori, font Poppins) e gli snippet (home slider,
 griglie articoli). Modificabile liberamente: tutto qui e in functions.php.
Version: 1.0
*/

/* ============================================================
   BRAND — colori e font (Uncode originale)
   primario #0cb4ce (turchese) · accento #4770bb (blu) · Poppins
   ============================================================ */
:root{
  --ddi-primary:#0cb4ce;   /* celeste */
  --ddi-accent:#4770bb;     /* blu */
  --ddi-pink:#f24e87;       /* rosa (menu attivo/hover, come OceanWP) */
}

body, button, input, select, textarea,
.entry-content, p, li{
  font-family:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
h1,h2,h3,h4,h5,h6,
.entry-title,.page-header-title{
  font-family:"Poppins", sans-serif;
}

/* link e accenti */
a{ color:var(--ddi-accent); }
a:hover{ color:var(--ddi-primary); }

/* bottoni / pulsanti tema */
.theme-button, button, input[type="submit"], .button,
#searchform .search-submit{
  background-color:var(--ddi-primary);
  border-color:var(--ddi-primary);
}
.theme-button:hover, button:hover, input[type="submit"]:hover{
  background-color:var(--ddi-accent);
  border-color:var(--ddi-accent);
}

/* ============================================================
   HEADER / BARRA MENU — barra bianca pulita, voci maiuscole
   (come l'originale Uncode)
   ============================================================ */
#site-header{ background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.06); }

#site-navigation-wrap .dropdown-menu > li > a{
  font-family:"Poppins", sans-serif;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:13px;
  font-weight:500;
  color:#222;
}
#site-navigation-wrap .dropdown-menu > li > a:hover,
#site-navigation-wrap .dropdown-menu > li.current-menu-item > a{
  color:var(--ddi-primary);
}

/* logo dimensionato come l'originale */
#site-logo img,.custom-logo{ max-height:60px; width:auto; }

/* ============================================================
   ARTICOLO SINGOLO — testo stretto e centrato (~820px) come Uncode
   ============================================================ */
.single .entry-content,
.single article .entry{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}

/* ============================================================
   FOOTER — scuro con colonne di link (stile originale)
   ============================================================ */
#footer{ background:#101213; color:#cfcfcf; }
#footer a{ color:#cfcfcf; }
#footer a:hover{ color:var(--ddi-primary); }
#footer-widgets .footer-box h4,
#footer-widgets .widget-title{ color:#fff; text-transform:uppercase; font-size:13px; letter-spacing:.5px; }
#footer-bottom{ background:#0b0d0e; color:#9a9a9a; }

/* ============================================================
   HOME SLIDER ([ddi_home_slider]) — vedi functions.php
   ============================================================ */
#fullpage .section{ height:100vh; position:relative; overflow:hidden; }
#fullpage .bg-layer{
  position:absolute; inset:0; background-size:cover; background-position:center;
  z-index:1; animation:ddiZoom 20s ease-in-out infinite alternate;
}
@keyframes ddiZoom{ 0%{transform:scale(1);} 100%{transform:scale(1.1);} }
#fullpage .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.3); z-index:2; }
#fullpage .content{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; color:#fff; z-index:3; width:90%; max-width:900px;
}
#fullpage .content h2{ font-size:42px; margin-bottom:20px; font-weight:800; }
#fullpage .content a{
  display:inline-block; padding:12px 28px; background:#fff; color:#000;
  text-decoration:none; border-radius:30px; font-size:14px;
}
#fp-nav ul li a span{ background:#fff !important; }

/* ============================================================
   GRIGLIA ARTICOLI ([ddi_post_grid]) — stile "metro" semplificato
   ============================================================ */
.ddi-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin:30px 0;
}
.ddi-grid .ddi-card{
  position:relative; border-radius:12px; overflow:hidden;
  background:#222; min-height:260px; display:block; text-decoration:none;
}
.ddi-grid .ddi-card .ddi-thumb{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .5s ease;
}
.ddi-grid .ddi-card:hover .ddi-thumb{ transform:scale(1.06); }
.ddi-grid .ddi-card .ddi-ov{
  position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.65));
}
.ddi-grid .ddi-card .ddi-tt{
  position:absolute; left:0; right:0; bottom:0; padding:18px; color:#fff;
  font-family:"Poppins",sans-serif; font-weight:600; font-size:17px; line-height:1.3; z-index:2;
}
@media(max-width:1000px){ .ddi-grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .ddi-grid{ grid-template-columns:1fr;} }

/* ============================================================
   SOTTO-MENU ([ddi_menu]) — pagine scheda patologia
   ============================================================ */
/* la classe ddi-submenu è sull'<ul> (menu_class di wp_nav_menu) */
ul.ddi-submenu{
  list-style:none; margin:0 0 26px; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px;
}
ul.ddi-submenu li{ margin:0; }
ul.ddi-submenu li a{
  font-family:"Poppins",sans-serif; text-transform:uppercase;
  font-size:12px; letter-spacing:.5px; font-weight:500;
  color:var(--ddi-primary);              /* celeste come l'originale */
  text-decoration:none; padding:6px 4px; border-bottom:2px solid transparent;
  transition:color .2s;
}
ul.ddi-submenu li a:hover,
ul.ddi-submenu li.current-menu-item > a,
ul.ddi-submenu li.current-menu-item a{
  color:var(--ddi-pink);                 /* attivo + hover = rosa */
}

/* ============================================================
   TESSERE ([ddi_tile]) — titolo su immagine con overlay,
   al passaggio del mouse l'overlay sparisce (solo immagine)
   ============================================================ */
.ddi-tile{
  position:relative; display:block; overflow:hidden; line-height:0;
  text-decoration:none;
}
.ddi-tile img{ display:block; width:100%; height:auto; }
.ddi-tile .ddi-tile-ov{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); transition:opacity .35s ease; opacity:1;
}
.ddi-tile:hover .ddi-tile-ov{ opacity:0; }
.ddi-tile .ddi-tile-tt{
  color:#fff; font-family:"Poppins",sans-serif; font-weight:600; text-transform:uppercase;
  font-size:18px; letter-spacing:.5px; text-align:center; line-height:1.25; padding:12px 16px;
}

/* ============================================================
   CARD container Elementor (.ddi-card) con titolo iniettato
   (.ddi-card-title) — overlay scuro + titolo, al mouseover spariscono
   e resta solo l'immagine di sfondo. Usato in dermatologia / skin-magazine.
   ============================================================ */
.ddi-card{ position:relative; overflow:hidden; }

/* il widget titolo copre tutta la card: gradiente scuro + testo centrato V+H */
.ddi-card-title{
  position:absolute !important; inset:0; margin:0 !important; z-index:5; pointer-events:none;
  display:flex; align-items:center; justify-content:center;   /* centra il contenuto V e H */
  padding:18px; box-sizing:border-box;
  /* gradiente scuro su tutta l'immagine (più marcato in basso) */
  background:linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.68) 100%);
  transition:opacity .35s ease;
}
.ddi-card-title .elementor-widget-container{ margin:0; width:100%; }
.ddi-card-title .elementor-heading-title{
  margin:0; color:#fff !important; text-align:center; line-height:1.2;
  font-family:"Poppins",sans-serif; font-weight:700; text-transform:uppercase;
  font-size:20px; letter-spacing:.5px; text-shadow:0 1px 6px rgba(0,0,0,.45); padding-top:35%;
}
/* mouseover: titolo + gradiente spariscono, resta solo l'immagine */
.ddi-card:hover .ddi-card-title,
.elementor-widget-image:hover ~ .ddi-card-title{ opacity:0; }