/* Fusion Media Core (Single Dark Theme) */
:root{
  --fm-bg:#070A12;
  --fm-bg-2:#0B1020;
  --fm-surface:#0E1630;
  --fm-border:rgba(255,255,255,.08);
  --fm-text:#EAF0FF;
  --fm-muted:rgba(234,240,255,.72);

  --fm-accent:#7C5CFF;
  --fm-accent-2:#20E3FF;

  --fm-radius:18px;
  --fm-shadow: 0 18px 60px rgba(0,0,0,.45);

  --fm-container: 1180px;
}

/* Reset-ish */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(1200px 700px at 20% -10%, rgba(124,92,255,.20), transparent 60%),
              radial-gradient(900px 600px at 85% 0%, rgba(32,227,255,.18), transparent 55%),
              linear-gradient(180deg, var(--fm-bg), #05070d 70%);
  color:var(--fm-text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  text-rendering:optimizeLegibility;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%; height:auto; display:block}

.fm-sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.fm-container{max-width:var(--fm-container); margin:0 auto; padding:0 18px}

.fm-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,10,18,.65);
  border-bottom:1px solid var(--fm-border);
}
.fm-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 0;
}

.fm-brand{display:flex; align-items:center; min-width:0}
.fm-brand__logo .custom-logo{height:44px; width:auto}
.fm-brand__fallback img{height:44px; width:auto}

.fm-nav__toggle{
  display:none;
  background:transparent; border:1px solid var(--fm-border);
  border-radius:999px; padding:10px 12px; color:var(--fm-text);
}
.fm-nav__bars{
  display:block; width:22px; height:12px;
  background:
    linear-gradient(var(--fm-text),var(--fm-text)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--fm-text),var(--fm-text)) 0 50%/100% 2px no-repeat,
    linear-gradient(var(--fm-text),var(--fm-text)) 0 100%/100% 2px no-repeat;
  opacity:.9;
}

.fm-nav__list{
  list-style:none; display:flex; gap:10px; margin:0; padding:0;
}
.fm-nav__list > li > a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
}
.fm-nav__list > li > a:hover{
  border-color:var(--fm-border);
  background: rgba(255,255,255,.03);
}

/* Dropdown */
.fm-nav__list .menu-item-has-children{position:relative}
.fm-nav__list .sub-menu{
  display:none;
  position:absolute; top:calc(100% + 10px); left:0;
  min-width:220px;
  padding:10px;
  margin:0;
  list-style:none;
  border:1px solid var(--fm-border);
  background: rgba(11,16,32,.9);
  border-radius: 14px;
  box-shadow: var(--fm-shadow);
}
.fm-nav__list .menu-item-has-children:hover > .sub-menu{display:block}
.fm-nav__list .sub-menu a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
}
.fm-nav__list .sub-menu a:hover{background: rgba(255,255,255,.04)}

/* Main */
.fm-main{min-height:65vh}
.fm-section{padding:40px 0}

/* Typography helpers */
.fm-h2{margin:0 0 8px; font-size:28px; line-height:1.2; letter-spacing:.2px}
.fm-h3{margin:0 0 10px; font-size:18px; line-height:1.25; letter-spacing:.2px}
.fm-accent{color:var(--fm-accent)}

/* Hero */
.fm-hero{position:relative; padding:48px 0 34px; overflow:hidden}
.fm-hero__inner{position:relative}
.fm-hero__bg{position:absolute; inset:-20% -10% -30% -10%; pointer-events:none}
.fm-hero__grid{position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity:.22;
  transform: perspective(900px) rotateX(62deg) translateY(-6%);
  transform-origin: top center;
}
.fm-hero__orb{position:absolute; width:520px; height:520px; border-radius:999px; filter: blur(28px); opacity:.9}
.fm-hero__orb--a{left:-120px; top:-120px; background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.55), transparent 60%)}
.fm-hero__orb--b{right:-140px; top:-160px; background: radial-gradient(circle at 60% 40%, rgba(32,227,255,.40), transparent 62%)}
.fm-hero__noise{position:absolute; inset:0; opacity:.12;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.10), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.08), transparent 35%),
    radial-gradient(circle at 60% 80%, rgba(255,255,255,.06), transparent 35%);
}

.fm-hero__kicker{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.fm-pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--fm-border);
  background: rgba(255,255,255,.03);
  font-size:13px; letter-spacing:.2px;
}

.fm-hero__title{margin:0 0 10px; font-size:44px; line-height:1.07; letter-spacing:.2px; max-width: 980px}
.fm-hero__lead{margin:0 0 18px; max-width: 840px; font-size:17px; color:var(--fm-muted)}
.fm-hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 18px}

.fm-hero__stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top: 14px}
.fm-stat{border:1px solid var(--fm-border); border-radius: var(--fm-radius);
  background: linear-gradient(180deg, rgba(14,22,48,.60), rgba(10,16,32,.55));
  padding:14px 14px;
}
.fm-stat__num{font-weight:750; letter-spacing:.2px; margin-bottom:4px}

/* Section head */
.fm-section__head{margin: 0 0 16px; max-width: 980px}
.fm-section--alt{background: rgba(255,255,255,.02); border-top:1px solid var(--fm-border); border-bottom:1px solid var(--fm-border)}

/* Callout */
.fm-callout{margin-top: 18px; display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border:1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  background: linear-gradient(180deg, rgba(124,92,255,.10), rgba(32,227,255,.06));
  padding: 18px;
}

/* Cards utilities */
.fm-card--pad{padding:18px}
.fm-grid--3{grid-template-columns:repeat(3, minmax(0, 1fr))}

/* Tags */
.fm-tagrow{display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px}
.fm-tag{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:13px;
  border:1px solid var(--fm-border);
  background: rgba(255,255,255,.03);
}

/* Shortcode tiles compatibility: [fusion_kacheln] */
.fusion-kacheln,
.fm-kacheln{display:grid; gap:18px}
.fusion-kacheln.columns-4,
.fm-kacheln.columns-4{grid-template-columns:repeat(4, minmax(0,1fr))}
.fusion-kacheln.columns-3,
.fm-kacheln.columns-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.fusion-kacheln.columns-2,
.fm-kacheln.columns-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.fusion-kacheln.columns-1,
.fm-kacheln.columns-1{grid-template-columns:1fr}

.fusion-kachel,
.fm-kachel{border:1px solid var(--fm-border); border-radius: var(--fm-radius);
  background: linear-gradient(180deg, rgba(14,22,48,.82), rgba(10,16,32,.72));
  box-shadow: 0 20px 90px rgba(0,0,0,.25);
  padding:18px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.fusion-kachel:hover,
.fm-kachel:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(14,22,48,.88), rgba(10,16,32,.76))}
.fusion-kachel h3,
.fm-kachel h3{margin:0 0 8px; font-size:18px; letter-spacing:.2px}
.fusion-kachel p,
.fm-kachel p{margin:0; color:var(--fm-muted)}

/* Cards */
.fm-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
}
.fm-card{
  grid-column: span 6;
  border:1px solid var(--fm-border);
  background: linear-gradient(180deg, rgba(14,22,48,.82), rgba(10,16,32,.72));
  border-radius: var(--fm-radius);
  overflow:hidden;
  box-shadow: 0 20px 90px rgba(0,0,0,.30);
}
.fm-card--flat{grid-column:1/-1; padding:22px}
.fm-card__thumb img{width:100%; height:240px; object-fit:cover}
.fm-card__body{padding:18px}
.fm-card__title{margin:0 0 6px; font-size:20px; letter-spacing:.2px}
.fm-card__meta{font-size:13px}
.fm-card__excerpt{margin:12px 0 14px}

/* Content */
.fm-content{max-width: 980px}
.fm-article__title{margin:0 0 10px; font-size:34px; line-height:1.15}
.fm-article__content{margin-top:18px}
.fm-muted{color:var(--fm-muted)}
.fm-tags a{display:inline-block; margin-right:8px; padding:6px 10px; border:1px solid var(--fm-border); border-radius:999px; font-size:13px}

/* Buttons */
.fm-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius: 999px;
  border:1px solid var(--fm-border);
  background: rgba(255,255,255,.03);
}
.fm-btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.12);
}
.fm-btn:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}

/* Footer */
.fm-footer{
  border-top:1px solid var(--fm-border);
  background: rgba(7,10,18,.85);
  padding:26px 0;
}
.fm-footer__inner{
  display:flex; gap:16px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap;
}
.fm-footer__brand{font-weight:700; letter-spacing:.3px}
.fm-footer__list{list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap}
.fm-footer__list a{padding:8px 10px; border-radius:999px; border:1px solid transparent}
.fm-footer__list a:hover{border-color:var(--fm-border); background: rgba(255,255,255,.03)}

/* Responsive */
@media (max-width: 920px){
  .fm-card{grid-column: span 12}
  .fm-hero__title{font-size:34px}
  .fm-hero__stats{grid-template-columns:1fr}
  .fm-grid--3{grid-template-columns:1fr}
  .fusion-kacheln.columns-4,
  .fm-kacheln.columns-4{grid-template-columns:1fr}
  .fusion-kacheln.columns-3,
  .fm-kacheln.columns-3{grid-template-columns:1fr}
  .fusion-kacheln.columns-2,
  .fm-kacheln.columns-2{grid-template-columns:1fr}
  .fm-nav__toggle{display:inline-flex}
  .fm-nav{display:none}
  body.fm-nav-open .fm-nav{display:block}
  .fm-nav__list{flex-direction:column; gap:6px; padding:12px; border:1px solid var(--fm-border); border-radius:14px; background: rgba(11,16,32,.9)}
  .fm-nav__list .sub-menu{position:static; display:block; box-shadow:none; margin-top:6px}
}

@media (max-width: 520px){
  .fm-hero{padding-top:34px}
  .fm-hero__title{font-size:30px}
}



/* =========================================================
   HERO TITLES: prevent clipping on long single-line headings
   (service pages / Gutenberg headings)
   ========================================================= */
.fm-hero h1,
.fm-hero .wp-block-heading,
.fm-hero__title{
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* responsive sizing for very long titles */
.fm-hero h1,
.fm-hero__title{
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.08;
}

/* if a heading is centered by Gutenberg, keep it readable */
.fm-hero .has-text-align-center{
  text-align: left;
}


/* =========================================================
   FIX: Gutenberg alignfull/alignwide inside hero
   Some pages used full-width groups for the hero content,
   which combined with .fm-hero{overflow:hidden} clipped the headline.
   We neutralize alignfull offsets inside the hero only.
   ========================================================= */
.fm-hero .alignfull,
.fm-hero .alignwide,
.fm-hero .wp-block-group.alignfull,
.fm-hero .wp-block-group.alignwide,
.fm-hero .wp-block-cover.alignfull,
.fm-hero .wp-block-cover.alignwide{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure any accidental nowrap in hero headings is overridden */
.fm-hero h1,
.fm-hero h2,
.fm-hero h3,
.fm-hero .wp-block-heading{
  white-space: normal !important;
}

/* =========================================================
   FIX: Gutenberg alignfull/alignwide inside hero
   Some pages use full-width blocks for hero content. With
   .fm-hero{overflow:hidden} this can clip long headlines.
   We neutralize the full-width offsets inside the hero only.
   ========================================================= */
.fm-hero .alignfull,
.fm-hero .alignwide{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
}

/* If WordPress applies viewport-based negative margins, undo them */
.fm-hero [class*="alignfull"],
.fm-hero [class*="alignwide"]{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   FIX: Gutenberg alignfull/alignwide inside hero
   ---------------------------------------------------------
   Some pages were built with full-width Gutenberg groups/blocks
   inside the hero. WordPress applies negative margins for
   .alignfull/.alignwide. Because the hero uses overflow:hidden
   (for the background effects), those negative margins caused
   the headline to be clipped.

   We neutralize the negative offsets inside .fm-hero only.
   ========================================================= */
.fm-hero .alignfull,
.fm-hero .alignwide{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
}

/* Also protect common full-width blocks */
.fm-hero .wp-block-cover.alignfull,
.fm-hero .wp-block-media-text.alignfull,
.fm-hero .wp-block-group.alignfull,
.fm-hero .wp-block-cover.alignwide,
.fm-hero .wp-block-media-text.alignwide,
.fm-hero .wp-block-group.alignwide{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   FIX: Gutenberg alignfull/alignwide inside hero
   ---------------------------------------------------------
   WordPress uses negative margins for .alignfull/.alignwide.
   Because .fm-hero has overflow:hidden (needed for the visual
   background), those negative margins can clip long headlines.
   We reset full-width offsets inside the hero only.
   ========================================================= */
.fm-hero .alignfull,
.fm-hero .alignwide,
.fm-hero .wp-block-group.alignfull,
.fm-hero .wp-block-group.alignwide,
.fm-hero .wp-block-cover.alignfull,
.fm-hero .wp-block-cover.alignwide{
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* If a full-width group exists, keep its inner content aligned to container */
.fm-hero .alignfull > .wp-block-group__inner-container,
.fm-hero .alignwide > .wp-block-group__inner-container{
  max-width: var(--fm-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}