/* ===========================
   Galatea Power - user.css
   Cassiopeia child (J5.4 → J6)
   =========================== */

/* Palette minima: i veri valori arrivano dall'inline CSS di index.php */
:root{
  --gp-logo-maxh: 80px;

  /* default soft per icone social, sovrascrivibili da index.php */
  --gp-social-color: #f0bd64;
  --gp-social-bg: #00000066;
  --gp-social-hover-bg: #67e8f9;
  --gp-social-hover-color: #000000;
}


/* Reset minimi e base tipografica */
html, body{
  background: var(--gp-bg);
  color: var(--gp-text);
}
a{ color: var(--gp-accent); text-decoration: none; }
a:hover{ color: var(--gp-accent-2); }

/* Cornici e card articoli */
/* Cornici e card articoli */
.item-page,
.com-content-article,
.blog .item,
.items-leading .item{
  background: var(--gp-card);
  color: var(--gp-text);
  border: 1px solid var(--gp-border);
  border-radius: 14px;
  padding: 1.5rem 2rem; /* SPAZIO INTERNO TRA TESTO E BORDO */
}

.item-page p, .item-page li, .com-content-article__body p, .com-content-article__body li{
  color: var(--gp-text);
}
.item-page blockquote{
  border-left: 3px solid var(--gp-accent);
  background: color-mix(in srgb, var(--gp-card) 88%, #fff 12%);
  padding: .75rem 1rem;
  border-radius: 10px;
}


/* Header e menù */
.container-header, .navbar{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gp-header-bg) 92%, #000 8%) 0%,
    var(--gp-header-bg) 100%) !important;
  border-bottom: 1px solid var(--gp-border);
}

/* Bottoni */
.btn, button, .mod-login__submit, .pagination .page-link{
  background: linear-gradient(180deg, #151e2a, #0f1620);
  color: var(--gp-text);
  border: 1px solid var(--gp-border);
  border-radius: 10px;
}
.btn:hover,
button:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(103,232,249,0.2);
}

/* Titoli */
h1, h2, h3, h4{
  color: var(--gp-text);
  text-shadow: 0 0 10px rgba(103,232,249,0.08);
  line-height: 1.15;
}
h1{ font-size: clamp(1.8rem, 2.5vw, 2.4rem); }
h2{ font-size: clamp(1.4rem, 2vw, 1.9rem); }

/* Footer */
.footer{
  background: var(--gp-footer-bg) !important;
  border-top: 1px solid var(--gp-border);
  color: var(--gp-muted);
}


/* ======= Griglia servizi “darkpunk-services” ======= */
.darkpunk-services{
  display: grid;
  grid-template-columns: repeat(auto-fit, 250px);
  grid-auto-rows: 250px;
  gap: 1rem;
  justify-content: center;
  max-width: 100%;
  margin: 2rem auto;
}

/* Card immagine */
.darkpunk-services a{
  width:250px; height:250px; position:relative; overflow:hidden;
  border:2px solid var(--gp-accent);
  display:block;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  background: #0d141c;
}
.darkpunk-services a:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 40px rgba(103,232,249,0.18);
  border-color: var(--gp-accent-2);
}
.darkpunk-services img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(1.05) contrast(1.02);
}

/* Titolo fuori dall’immagine */
.darkpunk-services .svc-wrap{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.darkpunk-services .svc-title{
  display:block;
  max-width:250px;
  text-align:center;
  color:var(--gp-text);
  font-weight:600;
  line-height:1.25;
  padding:.35rem .5rem;
  background: rgba(12,18,26,0.9);
  border:1px solid var(--gp-border);
  border-radius:10px;
  margin: .35rem auto 0 auto;
}

/* Utility */
.gp-muted{ color: var(--gp-muted); }
.gp-sep{ height:1px; background:var(--gp-border); margin:1rem 0; }

/* ===============================
   Galatea Power – Logo Styling
   =============================== */

/* Contenitore header */
.container-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--gp-border);
}

/* Logo brand */
.container-header .navbar-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

/* Logo immagine */
.container-header .navbar-brand img,
.container-header .navbar-brand svg {
  max-height: var(--gp-logo-maxh, 80px);
  width: auto;
  height: auto;
  display: block;
  transition: transform .2s ease;
}

.container-header .navbar-brand img:hover {
  transform: scale(1.03);
}

/* Su desktop largo: leggermente più grande */
@media (min-width: 992px) {
  .container-header .navbar-brand img,
  .container-header .navbar-brand svg {
    max-height: var(--gp-logo-maxh, 96px);
  }
}

/* Eventuale titolo accanto al logo */
.site-title, .navbar-brand span {
  color: var(--gp-accent);
  font-weight: 600;
  margin-left: .5rem;
  font-size: 1.2rem;
  text-transform: uppercase;
}

/* ====== LOGO CENTRATO + MENU SOTTO ====== */

.container-header,
.container-header > .container,
.container-header .navbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.container-header .container-branding,
.container-header .site-branding {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.container-header .navbar-brand {
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.container-header .navbar-brand img,
.container-header .navbar-brand svg,
.container-header .site-branding .logo img {
  max-height: var(--gp-logo-maxh, 80px) !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

@media (min-width: 992px){
  .container-header .container-nav,
  .container-header nav,
  .container-header .mod-menu,
  .container-header [class*="mod-menu"] {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (min-width: 992px){
  .container-header .navbar-brand img,
  .container-header .navbar-brand svg {
    max-height: var(--gp-logo-maxh, 96px) !important;
  }
}

/* ====== SFONDO MODULI/CARD VINCOLATO A gp-card ====== */

.moduletable,
.module,
aside .module,
.card,
.card > .card-body,
.card > .card-header,
.panel,
.panel-body,
.well {
  background: var(--gp-card) !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
}


/* ====== CONTRASTO DARK GLOBALE MODULI E FORM ====== */

.moduletable,
.moduletable * {
  color: #fff !important;
}
.moduletable a {
  color: #fff !important;
  text-decoration: none;
}
.moduletable a:hover {
  color: var(--gp-accent-2) !important;
  text-decoration: underline;
}

.moduletable h1,
.moduletable h2,
.moduletable h3,
.moduletable h4 {
  color: #fff !important;
}

/* Form scuri */
.moduletable input[type="text"],
.moduletable input[type="email"],
.moduletable input[type="password"],
.moduletable input[type="number"],
.moduletable input[type="search"],
.moduletable textarea,
.moduletable select {
  background: #0f1620 !important;
  color: #e6edf3 !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.moduletable input::placeholder,
.moduletable textarea::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

.moduletable label,
.moduletable .form-text,
.moduletable .form-check-label {
  color: #e6edf3 !important;
}
.moduletable input[type="checkbox"],
.moduletable input[type="radio"] {
  accent-color: var(--gp-accent);
}

.moduletable input:disabled,
.moduletable select:disabled,
.moduletable textarea:disabled {
  background: #0d1418 !important;
  color: #6b7480 !important;
  border-color: #2a3442 !important;
}

/* Pulsanti moduli */
.moduletable .btn,
.moduletable input[type="submit"],
.moduletable button {
  background: linear-gradient(180deg, #151e2a, #0f1620) !important;
  color: #fff !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 10px !important;
}
.moduletable .btn:hover,
.moduletable input[type="submit"]:hover,
.moduletable button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(103,232,249,0.2);
}

.moduletable hr,
.moduletable .divider,
.moduletable .ph-hr {
  border-color: var(--gp-border) !important;
  color: var(--gp-border) !important;
}

.moduletable .price,
.moduletable .ph-price,
.moduletable .subtotal,
.moduletable .total {
  color: var(--gp-accent) !important;
}

/* ====== CONTRASTO GLOBALE MODULI (BRUTAL MODE) ====== */

.moduletable, .moduletable *,
aside .module, aside .module *,
.mod-login, .mod-login *,
[class*="phoca"], [class*="phocacart"], .phoca, .phocacart {
  color: #fff !important;
}

/* Card */
.card,
.card * {
  color: var(--gp-text);
}

.moduletable a, .card a,
.mod-login a,
[class*="phoca"] a, [class*="phocacart"] a {
  color: #fff !important;
  text-decoration: none;
}
.moduletable a:hover, .card a:hover,
.mod-login a:hover,
[class*="phoca"] a:hover, [class*="phocacart"] a:hover {
  color: var(--gp-accent-2) !important;
  text-decoration: underline;
}

/* Form nei moduli */
.moduletable input[type="text"],
.moduletable input[type="email"],
.moduletable input[type="password"],
.moduletable input[type="search"],
.mod-login input[type="text"],
.mod-login input[type="email"],
.mod-login input[type="password"],
.mod-login input[type="search"],
.moduletable textarea, .mod-login textarea,
.moduletable select, .mod-login select {
  background: var(--gp-surface) !important;
  color: var(--gp-text) !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.moduletable input::placeholder,
.mod-login input::placeholder,
.moduletable textarea::placeholder,
.mod-login textarea::placeholder {
  color: #9aa4ad !important;
  opacity: 1 !important;
}

.moduletable label, .mod-login label,
.moduletable .form-text, .mod-login .form-text {
  color: #e6edf3 !important;
}
.moduletable input[type="checkbox"],
.moduletable input[type="radio"],
.mod-login input[type="checkbox"],
.mod-login input[type="radio"] {
  accent-color: var(--gp-accent);
}

.moduletable .btn, .mod-login .btn,
.moduletable button, .mod-login button,
.moduletable input[type="submit"], .mod-login input[type="submit"] {
  background: linear-gradient(180deg, #151e2a, #0f1620) !important;
  color: #fff !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 10px !important;
}
.moduletable .btn:hover, .mod-login .btn:hover,
.moduletable button:hover, .mod-login button:hover,
.moduletable input[type="submit"]:hover, .mod-login input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(103,232,249,0.2);
}

[class*="phoca"] .price, [class*="phocacart"] .price,
[class*="phoca"] .ph-price, [class*="phocacart"] .ph-price,
[class*="phoca"] .subtotal, [class*="phocacart"] .subtotal,
[class*="phoca"] .total, [class*="phocacart"] .total {
  color: var(--gp-accent) !important;
}

.moduletable hr, .card hr, .ph-hr, .phoca hr {
  border-color: var(--gp-border) !important;
  color: var(--gp-border) !important;
}

/* ===== FORZA TITOLO MODULO ===== */
.moduletable h1.card-header,
.moduletable h2.card-header,
.moduletable h3.card-header,
.moduletable h4.card-header,
.module h1.card-header,
.module h2.card-header,
.module h3.card-header,
.module h4.card-header,
.card-header {
    color: var(--gp-module-title-color) !important;
}

/* ===== MENU TOP — COLORE BASE ===== */
.container-header .mod-menu a,
.container-header .mod-menu .nav-link,
.container-header .navbar-nav > li > a,
.container-header .navbar-nav .nav-link,
.container-header nav a {
  color: var(--gp-text) !important;
  text-decoration: none;
}

.container-header .mod-menu .current > a,
.container-header .mod-menu .active > a,
.container-header .navbar-nav .active > a,
.container-header .navbar-nav .nav-item.active > a {
  color: var(--gp-accent) !important;
}

.container-header .mod-menu a:hover,
.container-header .mod-menu .nav-link:hover,
.container-header .navbar-nav > li > a:hover,
.container-header .navbar-nav .nav-link:hover,
.container-header nav a:hover {
  color: var(--gp-accent-2) !important;
  text-decoration: underline;
}

.container-header .mod-menu .nav-child a,
.container-header .mod-menu .nav-child .nav-link {
  color: var(--gp-text) !important;
}
.container-header .mod-menu .nav-child a:hover,
.container-header .mod-menu .nav-child .nav-link:hover {
  color: var(--gp-accent-2) !important;
}

/* ===== SOTTOMENU TOP DESKTOP – DROPDOWN ===== */
@media (min-width: 992px){

  .container-header .mod-menu li {
    position: relative;
  }

  .container-header .mod-menu .nav-child {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    background: var(--gp-card);
    border: 1px solid var(--gp-border);
    padding: .25rem 0;
    min-width: 220px;
    z-index: 1000;
  }

  .container-header .mod-menu .nav-child li {
    display: block;
  }

  .container-header .mod-menu li:hover > .nav-child,
  .container-header .mod-menu li:focus-within > .nav-child {
    display: block;
  }

  .container-header .mod-menu .nav-child a {
    display: block;
    padding: .4rem .9rem;
    white-space: nowrap;
    color: var(--gp-text) !important;
  }

  .container-header .mod-menu .nav-child a:hover {
    background: rgba(0,0,0,0.35);
    color: var(--gp-accent-2) !important;
  }
}

.container-header .mod-menu,
.container-header .mod-menu > ul,
.container-header nav,
.container-header .navbar,
.container-header .container-nav,
.container-header .navbar-nav {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* ===== SFONDO SOTTOMENU (METISMENU / COLLAPSIBLE DROPDOWN) ===== */

.container-header ul.mm-collapse,
.container-header ul.mm-collapse.mm-show,
.navbar ul.mm-collapse,
.navbar ul.mm-collapse.mm-show {
  background: var(--gp-submenu-bg) !important;
  border: 1px solid var(--gp-border) !important;
  padding: 0.25rem 0 !important;
}

.container-header ul.mm-collapse li,
.container-header ul.mm-collapse.mm-show li,
.navbar ul.mm-collapse li,
.navbar ul.mm-collapse.mm-show li {
  background: transparent !important;
}

.container-header ul.mm-collapse a,
.container-header ul.mm-collapse.mm-show a,
.navbar ul.mm-collapse a,
.navbar ul.mm-collapse.mm-show a {
  background: transparent !important;
  color: var(--gp-text) !important;
}

.container-header ul.mm-collapse a:hover,
.container-header ul.mm-collapse.mm-show a:hover,
.navbar ul.mm-collapse a:hover,
.navbar ul.mm-collapse.mm-show a:hover {
  color: var(--gp-accent-2) !important;
}

/* ===== TOPBAR HEADER ICONS (WHATSAPP + SOCIAL UNIFORMI) ===== */

.topbar {
  background: var(--gp-header-bg) !important;
  border-bottom: 1px solid var(--gp-border) !important;
}

/* niente card/bordi nella topbar */
.topbar .moduletable,
.topbar .module,
.topbar .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Wrapper icone */
.gp-header-contacts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: .25rem 0;
}

.gp-header-social {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

/* Icona singola: target touch-friendly ~40x40 */
.gp-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--gp-social-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  text-decoration: none;
  background: var(--gp-social-bg);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

/* Forza colore icona indipendentemente dal contesto (moduli, topbar, ecc.) */
.gp-header-icon,
.gp-header-icon i {
  color: var(--gp-social-color) !important;
}

/* hover: colore icona + link sul colore hover configurato */
.gp-header-icon:hover,
.gp-header-icon:hover i {
  color: var(--gp-social-hover-color) !important;
}


/* Hook per differenze future per piattaforma */
.gp-header-icon--whatsapp i {}
.gp-header-icon--facebook i {}
.gp-header-icon--instagram i {}
.gp-header-icon--tiktok i {}
.gp-header-icon--linkedin i {}
.gp-header-icon--x i {}
.gp-header-icon--youtube i {}

/* ===== RESPONSIVE TOPBAR ===== */
@media (max-width: 991.98px) {
  .gp-header-contacts {
    justify-content: center;
  }

  .gp-header-social {
    gap: .8rem;
  }
}

@media (min-width: 992px) {
  .topbar .grid-child {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

/* Fondo uniforme su tutti i wrapper principali */
body.site, .site-grid, #content, .container-component, main {
  background: var(--gp-bg) !important;
}