/* =======================================
   ETG SOLUTION SEARCH – STYLE 3 (STACKED SCORE)
   Editorial layout + centered stacked score
   ======================================= */


/* -------- Search Form -------- */

.etg-solsearch{
  display:flex;
  gap:12px;
  align-items:center;
  margin:28px 0 20px;

  width:100%;
  max-width:100%;
  box-sizing:border-box;

  border:1px solid rgba(0,0,0,0.10);
  border-radius:999px;
  padding:10px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.etg-solsearch:focus-within{
  border-color:rgba(0,0,0,0.18);
  box-shadow:0 10px 26px rgba(0,0,0,0.10);
}

.etg-solsearch__input{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  padding:14px 16px;
  border:0 !important;
  outline:none;
  background:transparent;
  font-size:15px;
}

.etg-solsearch__input:focus{outline:none;}

.etg-solsearch__btn{
  flex:0 0 auto;
  white-space:nowrap;
  padding:14px 18px;
  border-radius:16px;
  border:0;
  cursor:pointer;
  background:#FFC400;
  color:#111;
  font-weight:900;
}

/* Desktop: constrain search width to content width */
@media (min-width: 769px){
  .etg-solsearch{
    max-width:var(--wp--style--global--content-size);
    margin-left:auto;
    margin-right:auto;
  }
}





/* ===============================
   Layout 2 — Dashboard (Improved)
   =============================== */

/* Change highlight color here */
:root {
  --etg-accent: #FFC400; /* Eurotechguide yellow */
}

.solution-card{
  margin: 2.5rem 0;
  padding: clamp(18px, 2.6vw, 34px);
  border-radius: 22px;
  background: var(--wp--preset--color--base, #fff);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 14px 44px rgba(0,0,0,.07);
}

/*
  Desktop width: allow solution cards + tables to use the theme's WIDE width
  (matches the visual divider under the header on Twenty Twenty-Three).
  Mobile is handled separately below and should remain unchanged.
*/
@media (min-width: 901px){
  .solution-card{
    width: 100%;
    max-width: var(--wp--style--global--wide-size, var(--wp--style--global--content-size, 1200px));
    margin-left: auto;
    margin-right: auto;
  }
}

.solution-header{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px 22px;
  align-items: start;
  margin-bottom: 18px;
}

@media (max-width: 900px){
  .solution-header{ grid-template-columns: 1fr; }
}

/* KPI box (Weighted Score) */
.solution-score-box{
  border-radius: 18px;
  padding: 18px 20px;
  background: var(--etg-accent);
  color: #111;
  border: none;
  cursor: pointer;
}

.solution-score-label{
  font-size: 12px;
  font-weight: 600;
  opacity: .8;
  margin-bottom: 6px;
}

.solution-score-value{
  font-size: 46px;
  line-height: 1;
  font-weight: 900;
  color: #111;
}

/* Legacy solution table styling removed (v1.6.6 cleanup).
   The current UI uses the 2x4 score grid; any imported table markup is hidden. */


/* ===============================
   Search results cards (desktop)
   Keep the 3-column layout stable across browsers.
=============================== */

.etg-solresults{
  display:grid;
  gap:14px;
  margin-top:12px;
}

.etg-solresult{
  display:grid;
  grid-template-columns:64px 1fr 160px;
  gap:18px;
  align-items:center;

  padding:18px 20px;
  border-radius:20px;
  border:1px solid rgba(0,0,0,0.10);
  background:var(--wp--preset--color--base,#fff);

  text-decoration:none;
  color:inherit;

  transition:transform .08s ease, box-shadow .14s ease, border-color .14s ease;
}

.etg-solresult:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,0.10);
  border-color:rgba(0,0,0,0.16);
}

/* Logo */
.etg-solresult__thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
}

/* Meta (title + summary) */
.etg-solresult__meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.etg-solresult__title{
  display:block;
  font-weight:900;
  font-size:17px;
  line-height:1.25;

  /* Android Chrome can break mid-word with break-word; keep wrapping natural */
  word-break: normal;
  overflow-wrap: break-word; /* only break long tokens when absolutely necessary */
  hyphens: none;
}

/* Score column (medal + stacked score) */
.etg-solresult__score{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  text-align:right;
}

.etg-solresult__medal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
}

/* Big number with yellow dot */
.etg-score-value{
  position:relative;
  font-size:30px;
  font-weight:950;
  letter-spacing:-0.5px;
  line-height:1;
  color:#111;
  padding-left:22px;
  margin-bottom:4px;
}

.etg-score-value::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  border-radius:999px;
  background:#FFC400;
}

/* Label below score */
.etg-score-label{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(0,0,0,0.55);
}

/* Extra-small phones (e.g., ~360px logical width): reduce forced wraps */
@media (max-width: 380px){
  .etg-solresult__title{font-size:20px;line-height:1.15}
}

/* Mobile layout */
@media (max-width:640px){
  .etg-solresult{
    grid-template-columns:64px 1fr;
    grid-template-rows:auto auto;
    gap:12px;
  }

  .etg-solresult__score{
    grid-column:2;
    align-items:flex-start;
    text-align:left;
    margin-top:6px;
  }

  /* Compact mobile score layout (search results only): place medal right of % */
  .etg-solresult__score{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "value medal"
      "label label";
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
    justify-items: start;
  }

  .etg-score-value{ grid-area: value; margin: 0; }
  .etg-score-label{ grid-area: label; }
  .etg-solresult__medal{ grid-area: medal; margin: 0; justify-self: end; }
}



/* Placeholder animation readability */
.etg-solsearch__input::placeholder{opacity:0.75;}

/* Pagination */
.etg-solpagination{margin-top:18px}
.etg-solpagination__list{list-style:none;display:flex;gap:8px;align-items:center;justify-content:center;margin:0;padding:0;flex-wrap:wrap}
.etg-solpagination__link{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid rgba(0,0,0,0.12);text-decoration:none}
.etg-solpagination__link.is-current{font-weight:800;border-color:rgba(0,0,0,0.25)}
.etg-solpagination__dots{padding:0 6px;opacity:.6}

/* Search result summary + medal visuals (layout is defined above) */
.etg-solresult__summary{font-size:16px;line-height:1.25;color:rgba(0,0,0,0.75)}
.etg-medal{filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));}
@media (max-width: 768px){
  .etg-solresult__summary{font-size:14px}
  .etg-medal{width:38px;height:38px}
}

/* ===== Mobile: left-align title/summary consistently ===== */
@media (max-width: 768px){
  .etg-solresult__meta{
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .etg-solresult__title,
  .etg-solresult__summary{
    text-align: left !important;
  }
}

/* Not rated styling in search cards */
.etg-score-value.is-not-rated{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.etg-score-value.is-not-rated::before{display:none;}
@media (max-width: 768px){
  .etg-score-value.is-not-rated{font-size:20px;}
}

/* Not rated disclaimer (single solution) - subtle pop */
.etg-notrated-disclaimer{
  margin: 14px 0 14px 0;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.10);
  border-left: 6px solid rgba(255, 196, 0, 0.85);
  border-radius: 14px;
  background: rgba(255, 196, 0, 0.10);
  color: rgba(0,0,0,0.85);
  font-size: 16px;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px){
  .etg-notrated-disclaimer{font-size:15px;}
}

/* Disclaimer spans full card width (when injected inside card/grid) */
.solution-card .etg-notrated-disclaimer{
  grid-column: 1 / -1;
}




/* ===== Dual-layer popovers (framework vs assessment) ===== */
.etg-sov-label,
.etg-assess-trigger{
  cursor: help;
}

.etg-sov-label{
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* Avoid underlining the whole cell if it contains nested links */
.etg-sov-label a{ text-decoration: inherit; }

.etg-popover{
  position: absolute;
  z-index: 99999;
  max-width: 460px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
  line-height: 1.35;
  font-size: 14px;
}

.etg-popover[hidden]{
  display: none !important;
}

.etg-popover__kicker{
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 6px;
}

.etg-popover__title{
  font-weight: 800;
  margin: 0 0 8px 0;
}

.etg-popover__weight{
  margin: 0 0 10px 0;
  opacity: 0.9;
}

.etg-popover__sub{
  margin: 0 0 10px 0;
}

.etg-popover__body{
  margin: 0;
}

/* Framework popover: neutral */
.etg-popover--fw{
  background: #fbfbfd;
}

/* Assessment popover: slightly stronger emphasis */
.etg-popover--as{
  background: #ffffff;
}

.etg-seal-badge{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.22);
  font-weight: 900;
  margin-right: 8px;
}

.etg-seal-name{
  font-weight: 800;
  opacity: 0.9;
}

/* Links inside framework/calc popovers */
.etg-popover--fw a{
  color: #1a73e8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Keep long rationale HTML readable inside popover */
.etg-popover--as a{
  color: #1a73e8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 640px){
  .etg-popover{
    font-size: 14px;
    padding: 12px 12px;
  }
}

/* Solution name header (shown above weighted score + excerpt; solution pages + embeds) */
.solution-card .etg-scorecard__solution-name{
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 800;
  font-size: 1.25em;
  margin: 0 0 14px 0;
}

/* =============================
   Solution scorecard grid (v157)
   Replaces the table view on solution pages, while leaving imported HTML intact.
   ============================= */

.solution-card.etg-has-scorecard .solution-table-wrapper{
  display: none;
}

.etg-scorecard-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 10px;
}

.etg-scorecard-tile{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}

.etg-scorecard-tile__sov{
  margin-bottom: 10px;
}

.etg-scorecard-tile__sov .etg-sov-label{
  font-weight: 900;
  cursor: help;
}

.etg-scorecard-tile__seal{
  margin-bottom: 10px;
}

.etg-seal-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ffc300;
  font-weight: 900;
}

.etg-scorecard-tile__short{
  font-size: 14px;
  line-height: 1.35;
}

.etg-scorecard-tile .etg-assess-trigger{
  cursor: help;
}

@media (max-width: 980px){
  .etg-scorecard-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .etg-scorecard-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}


/* === ETG: Active filter button styling === */
.etg-si-active .wp-block-button__link,
a.etg-si-active.wp-block-button__link,
a.etg-si-active.wp-element-button,
.wp-block-button.etg-si-active .wp-block-button__link{
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}


/* ===== Embedded weighted score box shortcode ===== */
.etg-embed-weighted {
  margin: 12px 0;
}

.etg-embed-weighted__linkwrap {
  margin-top: 8px;
}

.etg-embed-weighted__link {
  display: inline-block;
  text-decoration: underline;
  font-weight: 600;
}

.etg-embed-weighted--error {
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
}


/* Make the entire weighted score box clickable without changing appearance */
.etg-embed-weighted__boxlink{
  display: block;
  color: inherit;
  text-decoration: none;
}
.etg-embed-weighted__boxlink:focus-visible{
  outline: 2px solid #111;
  outline-offset: 3px;
  border-radius: 18px;
}

/* Compact mode for embedded weighted score box */
.etg-embed-weighted--compact .solution-score-box{
  padding: 12px 14px;
  border-radius: 16px;
}
.etg-embed-weighted--compact .solution-score-label{
  font-size: 11px;
  margin-bottom: 4px;
}
.etg-embed-weighted--compact .solution-score-value{
  font-size: 34px;
}

/* ============================================================
   Eurotechguide: Sovereignty Index hero badge (homepage overlay)
   - Scopes to the explicit wrapper class to avoid side effects.
   - Wrapper must exist in the page markup (e.g., a Group block with
     Additional CSS class(es): etg-hero-wrap)
   ============================================================ */

.etg-hero-wrap{
  position: relative;
}

.etg-hero-wrap .etg-index-badge{
  position: absolute;
  top: 0;
  right: 24px;
  z-index: 20;

  /* More pop, still elegant */
  background: radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 55%),
              linear-gradient(180deg, #1f78c8 0%, #1b66ab 100%);
  color: #fff;
  border-radius: 18px;
  padding: 18px 20px;
  max-width: 300px;

  box-shadow:
    0 26px 70px rgba(16, 24, 40, 0.30),
    0 6px 16px rgba(16, 24, 40, 0.18);
  border: 1px solid rgba(255,255,255,0.22);
  outline: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

@media (min-width: 769px){
  .etg-hero-wrap .etg-index-badge{
    right: -1px; /* shift 25px right from default 24px */
  }
}

.etg-hero-wrap .etg-index-badge:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 30px 84px rgba(16, 24, 40, 0.34),
    0 8px 22px rgba(16, 24, 40, 0.20);
}

.etg-hero-wrap .etg-index-badge__link{
  display: block;
  text-decoration: none;
  color: inherit;
}

.etg-hero-wrap .etg-index-badge__title{
  font-size: 18px;
  font-weight: 650;
  line-height: 1.2;
  margin-bottom: 6px;
}

.etg-hero-wrap .etg-index-badge__meta{
  font-size: 14px;
  opacity: 0.92;
  margin-bottom: 12px;
}

.etg-hero-wrap .etg-index-badge__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px;
  padding: 8px 12px;

  font-size: 14px;
  font-weight: 650;
}

.etg-hero-wrap .etg-index-badge__arrow{
  font-size: 16px;
  line-height: 1;
}

/* If an older badge markup still includes a version line, hide it. */
.etg-hero-wrap .etg-index-badge__version{
  display: none !important;
}

@media (max-width: 768px){
  .etg-hero-wrap{display:flex;flex-direction:column;}

  /* Mobile: place badge ABOVE featured post + make it much more compact */
  /* v1.8.7: badge width +30% (min-width: 70% of viewport), vertical padding -20% (4px vs 5px) */
  .etg-hero-wrap .etg-index-badge{
    order:-1;
    position:static;
    margin:0 auto 10px auto;
    width:70%;
    max-width:100%;
    padding:4px 10px;
    border-radius:14px;
  }

  .etg-hero-wrap .etg-index-badge__title{
    font-size:13px;
    line-height:1.15;
    margin:0 0 2px 0;
  }

  .etg-hero-wrap .etg-index-badge__meta{
    font-size:11px;
    line-height:1.2;
    margin:0 0 4px 0;
  }

  .etg-hero-wrap .etg-index-badge__cta{
    padding:3px 8px;
    font-size:12px;
    line-height:1.1;
  }

  .etg-hero-wrap .etg-index-badge__arrow{
    font-size:14px;
  }
}


/* ============================================================
   HOME – Make post cards subtly hover + whole card clickable
   Scope: homepage only (body.home)
   ============================================================ */

body.home .wp-block-post,
body.home .wp-block-post-template > li{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding-top: 10px;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

body.home .wp-block-post:hover,
body.home .wp-block-post-template > li:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.14);
  filter: saturate(1.05) contrast(1.02);
}

/* Make the whole card area click through to the post (via the title link overlay) */
body.home .wp-block-post .wp-block-post-title a::after,
body.home .wp-block-post-template > li .wp-block-post-title a::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* Ensure the overlay sits on top */
body.home .wp-block-post,
body.home .wp-block-post-template > li{
  cursor: pointer;
}



/* Homepage post hover: add equal left/right breathing room for text blocks */
body.home .wp-block-post .wp-block-post-title,
body.home .wp-block-post .wp-block-post-date,
body.home .wp-block-post .wp-block-post-excerpt,
body.home .wp-block-post-template > li .wp-block-post-title,
body.home .wp-block-post-template > li .wp-block-post-date,
body.home .wp-block-post-template > li .wp-block-post-excerpt{
  padding-left: 18px;
  padding-right: 18px;
}

/* Homepage post hover: add top breathing room (match left/right padding) */
body.home .wp-block-post .wp-block-post-date,
body.home .wp-block-post-template > li .wp-block-post-date{
  padding-top: 18px;
}