/* ═══════════════════════════════════════════════
   ELETTROPROGETTI – shared.css
   Palette: #30b7ff (blu), #888 (grigio), #222 (dark)
   ═══════════════════════════════════════════════ */

:root {
  --blue:      #30b7ff;
  --blue-dark: #1a9de0;
  --blue-lt:   #e6f7ff;
  --grey-p:    #888888;
  --dark:      #222222;
  --nav-text:  #444444;
  --light-bg:  #f4f5f7;
  --border:    #e2e5ea;
  --footer-bg: #2d3033;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Open Sans', sans-serif; color: var(--dark); margin: 0; font-size: 15px; }

/* ── TOPBAR ── */
.topbar { background: var(--blue); color: rgba(255,255,255,.85); font-size: .75rem; padding: 6px 0; }
.topbar i { opacity: .8; }
.topbar a { color: #fff; text-decoration: none; opacity: .9; }
.topbar a:hover { opacity: 1; text-decoration: underline; }

/* ── NAVBAR ── */
.navbar-ep { background: #fff; border-bottom: 3px solid var(--blue); padding: 0; position: sticky; top: 0; z-index: 1030; box-shadow: 0 1px 8px rgba(0,0,0,.08); }
.navbar-ep .container { min-height: 76px; }
.navbar-ep .nav-link { font-family: 'Open Sans',sans-serif; font-size: .78rem; font-weight: 700; color: var(--nav-text) !important; text-transform: uppercase; letter-spacing: .04em; padding: 26px 10px !important; border-bottom: 3px solid transparent; margin-bottom: -3px; transition: color .2s, border-color .2s; }
.navbar-ep .nav-link:hover, .navbar-ep .nav-link.active { color: var(--blue) !important; border-bottom-color: var(--blue); }
.navbar-toggler { border-color: var(--blue); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2330b7ff' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/* ── ALERT BANNER ── */
.alert-banner { background: var(--blue); color: #fff; font-size: .78rem; font-weight: 700; text-align: center; padding: 9px 20px; letter-spacing: .03em; }

/* ── PAGE HERO ── */
.page-hero { background: linear-gradient(135deg, #0d2a4a 0%, #1b4f8a 55%, #30b7ff 100%); padding: 56px 0; position: relative; overflow: hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:48px 48px; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-family:'Oswald',sans-serif; font-size:2.4rem; font-weight:600; color:#fff; margin:0 0 10px; }
.page-hero p { color:rgba(255,255,255,.75); font-size:.95rem; margin:0; }
.breadcrumb-ep { font-size:.78rem; margin-bottom:14px; }
.breadcrumb-ep a { color:rgba(255,255,255,.6); text-decoration:none; }
.breadcrumb-ep a:hover { color:#fff; }
.breadcrumb-ep span { color:rgba(255,255,255,.4); margin:0 7px; }
.breadcrumb-ep .current { color:rgba(255,255,255,.9); }

/* ── SECTION UTILS ── */
.sec-tag { display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; color:var(--blue); border-left:3px solid var(--blue); padding-left:10px; margin-bottom:12px; }
.sec-title { font-family:'Oswald',sans-serif; font-size:1.85rem; font-weight:600; color:var(--dark); margin-bottom:10px; line-height:1.2; }
.sec-line { width:44px; height:3px; background:var(--blue); margin-bottom:22px; }
.btn-primary-ep { display:inline-block; background:var(--blue); color:#fff; font-size:.79rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:11px 26px; border-radius:2px; text-decoration:none; border:none; transition:background .2s,transform .15s; cursor:pointer; }
.btn-primary-ep:hover { background:var(--blue-dark); color:#fff; transform:translateY(-1px); }
.btn-outline-ep { display:inline-block; background:transparent; border:2px solid var(--blue); color:var(--blue); font-size:.79rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:10px 26px; border-radius:2px; text-decoration:none; transition:background .2s,color .2s; }
.btn-outline-ep:hover { background:var(--blue); color:#fff; }

/* ── CONTENT SECTIONS ── */
.content-section { padding: 68px 0; }
.content-section.alt { background: var(--light-bg); }
.content-section p { color:#555; line-height:1.85; }
.content-section h3 { font-family:'Oswald',sans-serif; font-weight:600; font-size:1.3rem; color:var(--dark); margin-bottom:12px; margin-top:28px; }
.content-section h3:first-child { margin-top:0; }
.content-section ul li { color:#555; line-height:1.8; margin-bottom:6px; }
.content-section strong { color:var(--dark); }

/* ── CARD GENERIC ── */
.ep-card { background:#fff; border-radius:4px; padding:30px 26px; height:100%; border-top:3px solid transparent; box-shadow:0 1px 10px rgba(0,0,0,.06); transition:border-color .25s,transform .25s,box-shadow .25s; }
.ep-card:hover { border-top-color:var(--blue); transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,.1); }
.ep-card .card-icon { width:52px; height:52px; background:var(--blue-lt); border-radius:6px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.ep-card .card-icon i { font-size:1.45rem; color:var(--blue); }
.ep-card h5 { font-family:'Oswald',sans-serif; font-weight:600; color:var(--dark); font-size:1.05rem; margin-bottom:10px; }
.ep-card p { font-size:.86rem; color:#666; line-height:1.7; margin-bottom:14px; }
.ep-card a.read-more { font-size:.76rem; font-weight:700; color:var(--blue); text-decoration:none; text-transform:uppercase; letter-spacing:.06em; }
.ep-card a.read-more:hover { color:var(--blue-dark); text-decoration:underline; }

/* ── STEP FLOW ── */
.step-flow { display:flex; gap:0; margin:32px 0; flex-wrap:wrap; }
.step-item { flex:1; min-width:180px; background:var(--blue-lt); border-left:3px solid var(--blue); padding:20px 18px; position:relative; }
.step-item::after { content:'›'; position:absolute; right:-14px; top:50%; transform:translateY(-50%); font-size:1.6rem; color:var(--blue); z-index:2; font-weight:700; }
.step-item:last-child::after { display:none; }
.step-item .step-num { font-family:'Oswald',sans-serif; font-size:1.8rem; font-weight:700; color:var(--blue); opacity:.3; line-height:1; }
.step-item h6 { font-family:'Oswald',sans-serif; font-weight:600; color:var(--dark); font-size:.95rem; margin:4px 0 6px; text-transform:uppercase; letter-spacing:.06em; }
.step-item p { font-size:.82rem; color:#666; margin:0; line-height:1.6; }

/* ── INFO BOX ── */
.info-box { background:var(--blue); border-radius:4px; padding:28px 26px; color:#fff; }
.info-box h5 { font-family:'Oswald',sans-serif; font-weight:600; font-size:1.1rem; margin-bottom:10px; }
.info-box p { color:rgba(255,255,255,.82); font-size:.88rem; line-height:1.7; margin:0; }

/* ── CALLOUT ── */
.callout-bar { background:var(--footer-bg); padding:50px 0; }
.callout-bar blockquote { font-style:italic; color:rgba(255,255,255,.85); border-left:4px solid var(--blue); padding-left:26px; max-width:870px; margin:0 auto; font-size:1.05rem; line-height:1.85; }

/* ── CONTACT CARD ── */
.contact-card { background:#fff; border-radius:4px; padding:32px 28px; box-shadow:0 1px 10px rgba(0,0,0,.06); }
.c-row { display:flex; align-items:flex-start; gap:12px; font-size:.9rem; color:#444; margin-bottom:12px; }
.c-row i { color:var(--blue); margin-top:2px; flex-shrink:0; width:16px; }

/* ── WIDGET BOX ── */
.widget-box { background:var(--light-bg); border-top:3px solid var(--blue); border-radius:3px; padding:26px 22px; height:100%; }
.widget-box h5 { font-family:'Oswald',sans-serif; font-weight:600; color:var(--dark); font-size:.95rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.widget-box p { font-size:.86rem; color:#555; line-height:1.7; }
.widget-box a { color:var(--blue); text-decoration:none; font-weight:600; font-size:.86rem; }
.widget-box a:hover { text-decoration:underline; }

/* ── FOOTER ── */
footer { background:var(--footer-bg); color:#8a9ba8; font-size:.82rem; padding:46px 0 0; }
footer h6 { font-family:'Oswald',sans-serif; font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.08); }
footer a { color:#8a9ba8; text-decoration:none; display:block; margin-bottom:7px; }
footer a:hover { color:#30b7ff; }
footer p { line-height:1.75; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.07); margin-top:34px; padding:15px 0; text-align:center; font-size:.75rem; color:#4e6070; }

/* ── COOKIE ── */
#cookie-bar { position:fixed; bottom:0; left:0; right:0; z-index:9999; background:rgba(20,28,38,.97); color:#adbecb; font-size:.81rem; padding:13px 26px; display:flex; align-items:center; justify-content:space-between; gap:18px; backdrop-filter:blur(6px); }
#cookie-bar a { color:#30b7ff; }
.btn-cookie { background:var(--blue); color:#fff; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border:none; padding:8px 22px; border-radius:2px; cursor:pointer; white-space:nowrap; }
.btn-cookie:hover { background:var(--blue-dark); }

@media (max-width:767px) {
  .navbar-ep .nav-link { padding:12px 14px !important; border-bottom:none; }
  .page-hero h1 { font-size:1.7rem; }
  .step-flow { flex-direction:column; }
  .step-item::after { display:none; }
}