/* ============================================================
   Sanigroup — component styles
   Tokens come from theme.json (--wp--preset--color--*, fonts).
   This file styles the custom components the block editor can't
   express on its own (mega-menu, utility bar, hours table, …).
   ============================================================ */

:root{
  --sg-navy: var(--wp--preset--color--navy, #120068);
  --sg-navy-hover: var(--wp--preset--color--navy-hover, #1d0e82);
  --sg-ink: var(--wp--preset--color--ink, #211f26);
  --sg-lav: var(--wp--preset--color--lavender, #e9eaf6);
  --sg-lav-deep: var(--wp--preset--color--lavender-deep, #dfe1f4);
  --sg-line: var(--wp--preset--color--line, #e7e7ee);
  --sg-muted: var(--wp--preset--color--muted, #5d6070);
  --sg-label: var(--wp--preset--color--label, #8a8d9c);
  --sg-soft: var(--wp--preset--color--soft, #f2f2f5);
  --sg-alert: var(--wp--preset--color--alert, #c43d3d);
  --sg-alert-bg: var(--wp--preset--color--alert-bg, #fdecec);
  --sg-maxw: 1280px;
}

.sg-ic{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- utility bar ---------- */
.sg-util{background:#fff;border-bottom:1px solid var(--sg-line);font-size:13px}
.sg-util a{color:var(--sg-navy);font-weight:500;text-decoration:none}
.sg-util a:hover{opacity:.7}

/* ---------- header ---------- */
.sg-search input[type="search"],
.sg-search .wp-block-search__input{
  height:53px;border:1.5px solid #e0e0ea;border-radius:30px;
  padding:0 22px;font-size:15px;color:var(--sg-ink);background:#fff;
}
.sg-search .wp-block-search__button{display:none}
.wp-block-woocommerce-mini-cart{color:var(--sg-navy)}

/* hardcoded logo */
.sg-logo{display:inline-flex;align-items:center;flex:0 0 auto}
.sg-logo img{display:block;height:46px;width:auto}

/* FiboSearch ([fibosearch]) — force a clean pill, beats FiboSearch's own CSS */
.sg-search{min-width:0;flex:1 1 auto}
.sg-search .dgwt-wcas-search-wrapp{width:100%;max-width:560px;margin:0}
.sg-search .dgwt-wcas-search-form{position:relative;margin:0}
.sg-search input.dgwt-wcas-search-input{
  height:53px !important;width:100% !important;box-sizing:border-box !important;
  border:1.5px solid #e0e0ea !important;border-radius:30px !important;
  padding:0 58px 0 22px !important;font-size:15px !important;color:var(--sg-ink) !important;background:#fff !important;
  box-shadow:none !important;-webkit-appearance:none;appearance:none;margin:0 !important;
}
.sg-search input.dgwt-wcas-search-input:focus{border-color:var(--sg-navy) !important;outline:none !important}
.sg-search input.dgwt-wcas-search-input::placeholder{color:#9aa0ab !important}
.sg-search .dgwt-wcas-search-submit{
  position:absolute !important;top:4px !important;right:4px !important;bottom:4px !important;
  width:46px !important;height:auto !important;min-height:0 !important;
  display:flex !important;align-items:center;justify-content:center;
  background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;cursor:pointer;
}
.sg-search .dgwt-wcas-ico-magnifier{width:19px !important;height:19px !important;fill:var(--sg-navy) !important}
.sg-search .dgwt-wcas-search-icon-arrow{display:none !important}

/* ---------- mega-nav (custom block) ---------- */
.sg-nav{background:var(--sg-lav);position:relative}
.sg-navbar{max-width:var(--sg-maxw);margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:center;gap:6px;height:56px}
.sg-navitem{position:static}
.sg-navlink{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:15px;color:var(--sg-navy);height:56px;padding:0 16px;border:0;background:none;cursor:pointer;position:relative;font-family:inherit}
.sg-navlink .sg-chev{width:14px;height:14px;opacity:.75;transition:transform .18s}
.sg-navlink:hover{opacity:.8}
.sg-navitem.is-open .sg-navlink::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;background:var(--sg-navy);border-radius:2px 2px 0 0}
.sg-navitem.is-open .sg-navlink .sg-chev{transform:rotate(180deg)}

.sg-megawrap{position:absolute;top:100%;left:0;right:0;z-index:200}
.sg-mega{display:none;background:#fff;border-top:1px solid var(--sg-lav-deep);box-shadow:0 22px 44px rgba(18,0,104,.12)}
.sg-mega.is-open{display:block;animation:sgDrop .18s ease}
@keyframes sgDrop{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
.sg-mega-inner{max-width:var(--sg-maxw);margin:0 auto;padding:34px 28px 38px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,230px));justify-content:start;gap:30px 40px}
.sg-col h4 a{color:inherit;text-decoration:none}
.sg-col h4 a:hover{color:var(--sg-navy)}
.sg-cols-4{grid-template-columns:repeat(4,1fr)}
.sg-cols-3{grid-template-columns:repeat(3,1fr)}
.sg-cols-2{grid-template-columns:repeat(2,minmax(0,260px))}
.sg-cols-q{grid-template-columns:repeat(2,minmax(0,220px)) 1fr}
.sg-col h4{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sg-ink);padding-bottom:12px;margin:0 0 6px;border-bottom:1px solid var(--sg-line)}
.sg-col a{display:block;font-size:14px;color:var(--sg-muted);padding:7px 0;text-decoration:none;transition:color .12s,padding .12s}
.sg-col a:hover{color:var(--sg-navy);padding-left:5px}
.sg-promo{background:var(--sg-lav);border-radius:12px;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.sg-promo img{height:26px;width:auto}
.sg-promo b{color:var(--sg-ink);font-size:16px}
.sg-promo .sg-pct{align-self:flex-start;background:var(--sg-navy);color:#fff;font-weight:700;font-size:13px;padding:5px 11px;border-radius:7px}
.sg-promo p{font-size:13px;color:var(--sg-muted);margin:0}
@media(max-width:1040px){.sg-navbar{gap:0;overflow-x:auto;justify-content:flex-start}}
@media(max-width:782px){.sg-nav{display:none}}

/* ---------- USP row (pattern) ---------- */
.sg-usp3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sg-usp3 .u{display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--sg-line);border-radius:8px;padding:18px;background:#fff;font-weight:500;color:var(--sg-ink);font-size:15px}
.sg-usp3 .u svg{width:22px;height:22px;color:var(--sg-navy)}
@media(max-width:640px){.sg-usp3{grid-template-columns:1fr}}

/* ---------- payment row (pattern) ---------- */
.sg-pay{display:flex;gap:9px;flex-wrap:wrap}
.sg-pay .chip{border:1px solid var(--sg-line);border-radius:7px;height:38px;padding:0 11px;display:grid;place-items:center;background:#fff}
.sg-pay .chip img{height:18px;width:auto}

/* ---------- hero (home) ---------- */
.sg-hero{position:relative;min-height:470px;display:flex;align-items:center;overflow:hidden}
.sg-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,22,.72) 0%,rgba(10,11,22,.4) 48%,rgba(10,11,22,.05) 100%);z-index:1}
.sg-hero > *{position:relative;z-index:2}
.sg-hero h1{color:#fff!important;max-width:16ch}
.sg-hero p{color:#e7e8f2!important;max-width:54ch}

/* ---------- vorteile cards (home) ---------- */
.sg-vcard img{aspect-ratio:1/1;object-fit:cover;border-radius:8px;width:100%}

/* ---------- footer hours table (pattern) ---------- */
.sg-hours .status{display:inline-flex;align-items:center;gap:8px;background:var(--sg-alert-bg);color:var(--sg-alert);font-size:13px;font-weight:500;padding:6px 13px;border-radius:999px;margin-bottom:14px}
.sg-hours .status .d{width:8px;height:8px;border-radius:50%;background:var(--sg-alert)}
.sg-hours .row{display:flex;justify-content:space-between;padding:11px 14px;font-size:14px;color:var(--sg-ink);border-radius:7px}
.sg-hours .row.is-today{background:var(--sg-lav)}

/* ---------- generic helpers ---------- */
.sg-eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sg-label)}

/* ---------- footer + home helpers ---------- */
.sg-footer{border-top:1px solid var(--sg-line)}
.sg-footer a{text-decoration:none;color:var(--sg-navy);font-weight:500}
.sg-footer .sg-addr a{color:var(--sg-navy)}
.sg-brandstrip{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.sg-brandstrip img{height:38px;width:auto;object-fit:contain}
@media(max-width:760px){.sg-brandstrip{justify-content:center;gap:26px}.sg-brandstrip img{height:30px}}

/* hero background (image painted via CSS so the group block stays plain & valid) */
.sg-hero{background:#1a1c2b url('https://sanigroup.ch/wp-content/uploads/2025/03/img-kuechengeraete-miele-1-2x-1350x-q75.webp') center/cover no-repeat}
.sg-soft{background:var(--sg-soft);border-radius:16px}

/* responsive image guard */
img{max-width:100%;height:auto}