/* =========================================================
   Interview Expert — Post content blocks
   Ultimate Blocks accordion, tables, video popup, YouTube,
   native <details> accordion (for when UB is removed)
   ========================================================= */

/* Slightly wider reading column for cheat sheets / problem lists */
.ie-wide-content .ie-content-wrap,
.ie-wide-content .ie-single-hero .wrap{
  max-width:960px;
}
.ie-wide-content .ie-featured{max-width:1100px}

/* ---------- Ultimate Blocks Content Toggle (accordion) ---------- */
.ie-content .wp-block-ub-content-toggle,
.ie-content .wp-block-ub-content-toggle-block{
  margin:28px 0 36px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ie-content .wp-block-ub-content-toggle-accordion{
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  background:var(--surface) !important;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  margin:0 !important;
  transition:border-color .18s ease, box-shadow .18s ease;
}
html[data-theme="dark"] .ie-content .wp-block-ub-content-toggle-accordion{
  background:linear-gradient(175deg,var(--surface-2),var(--surface)) !important;
  border-color:var(--line) !important;
  box-shadow:var(--shadow-sm);
}

.ie-content .wp-block-ub-content-toggle-accordion:hover{
  border-color:color-mix(in srgb,var(--brand) 35%, var(--line)) !important;
}

.ie-content .wp-block-ub-content-toggle-accordion-title-wrap{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px !important;
  margin:0 !important;
  cursor:pointer;
  background:var(--panel) !important;
  border:0 !important;
  transition:background .16s ease;
}
html[data-theme="dark"] .ie-content .wp-block-ub-content-toggle-accordion-title-wrap{
  background:rgba(255,255,255,.03) !important;
}
.ie-content .wp-block-ub-content-toggle-accordion-title-wrap:hover{
  background:color-mix(in srgb,var(--brand) 8%, var(--panel)) !important;
}
html[data-theme="dark"] .ie-content .wp-block-ub-content-toggle-accordion-title-wrap:hover{
  background:rgba(91,124,250,.10) !important;
}

.ie-content .wp-block-ub-content-toggle-accordion-title,
.ie-content h4.wp-block-ub-content-toggle-accordion-title{
  margin:0 !important;
  font-family:'Outfit',system-ui,sans-serif !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  letter-spacing:-.01em;
  color:var(--ink) !important;
  flex:1;
}
html[data-theme="dark"] .ie-content .wp-block-ub-content-toggle-accordion-title,
html[data-theme="dark"] .ie-content h4.wp-block-ub-content-toggle-accordion-title{
  color:#fff !important;
}

.ie-content .wp-block-ub-content-toggle-accordion-toggle-wrap{
  flex:none;
  width:32px;height:32px;
  border-radius:9px;
  display:grid !important;
  place-items:center;
  background:color-mix(in srgb,var(--brand) 12%, transparent);
  border:1px solid color-mix(in srgb,var(--brand) 25%, transparent);
  color:var(--brand);
}
html[data-theme="dark"] .ie-content .wp-block-ub-content-toggle-accordion-toggle-wrap{
  background:rgba(91,124,250,.12);
  border-color:rgba(91,124,250,.28);
  color:#AEBEFF;
}

.ie-content .wp-block-ub-content-toggle-accordion-state-indicator,
.ie-content .wp-block-ub-chevron-down{
  border-color:currentColor !important;
  opacity:.95;
}

.ie-content .wp-block-ub-content-toggle-accordion-content-wrap{
  padding:4px 18px 20px !important;
  border-top:1px solid var(--line);
  background:transparent !important;
  color:var(--ink-soft) !important;
}
html[data-theme="dark"] .ie-content .wp-block-ub-content-toggle-accordion-content-wrap{
  border-top-color:var(--line);
  color:var(--ink-soft) !important;
}

/* ---------- Native <details> accordion (UB replacement) ---------- */
.ie-content details,
.ie-content details.ie-accordion{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  margin:0 0 10px;
  overflow:hidden;
}
html[data-theme="dark"] .ie-content details,
html[data-theme="dark"] .ie-content details.ie-accordion{
  background:linear-gradient(175deg,var(--surface-2),var(--surface));
}
.ie-content details + details{margin-top:10px}
.ie-content details[open]{
  border-color:color-mix(in srgb,var(--brand) 35%, var(--line));
}
.ie-content summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  font-family:'Outfit',system-ui,sans-serif;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  background:var(--panel);
  transition:background .16s ease;
}
html[data-theme="dark"] .ie-content summary{
  color:#fff;
  background:rgba(255,255,255,.03);
}
.ie-content summary::-webkit-details-marker{display:none}
.ie-content summary::after{
  content:"";
  width:10px;height:10px;
  border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand);
  transform:rotate(45deg);
  transition:transform .2s ease;
  flex:none;
  margin-right:6px;
}
.ie-content details[open] > summary::after{
  transform:rotate(-135deg);
  margin-top:6px;
}
.ie-content summary:hover{
  background:color-mix(in srgb,var(--brand) 8%, var(--panel));
}
html[data-theme="dark"] .ie-content summary:hover{
  background:rgba(91,124,250,.10);
}
.ie-content details > *:not(summary){
  padding:0 18px;
}
.ie-content details > *:last-child{
  padding-bottom:18px;
}
.ie-content details[open] > summary{
  border-bottom:1px solid var(--line);
}

/* Group wrapper for native accordions */
.ie-accordion-group{
  margin:28px 0 36px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ie-accordion-group details{margin:0}

/* ---------- Tables (problem lists) ---------- */
.ie-content .wp-block-table,
.ie-content figure.wp-block-table{
  margin:1.2em 0 1.6em;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
}
html[data-theme="dark"] .ie-content .wp-block-table,
html[data-theme="dark"] .ie-content figure.wp-block-table{
  background:rgba(255,255,255,.02);
}
.ie-content .wp-block-table table{
  margin:0;
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
}
.ie-content .wp-block-table th,
.ie-content .wp-block-table td,
.ie-content table th,
.ie-content table td{
  border:1px solid var(--line) !important;
  padding:12px 14px !important;
  vertical-align:middle;
  color:var(--ink-soft);
}
html[data-theme="dark"] .ie-content .wp-block-table th,
html[data-theme="dark"] .ie-content .wp-block-table td,
html[data-theme="dark"] .ie-content table th,
html[data-theme="dark"] .ie-content table td{
  color:var(--ink-soft);
}
.ie-content .wp-block-table th,
.ie-content table th{
  background:var(--panel) !important;
  font-family:'Outfit',sans-serif;
  font-weight:700;
  color:var(--ink) !important;
  font-size:13px;
  letter-spacing:.02em;
}
html[data-theme="dark"] .ie-content .wp-block-table th,
html[data-theme="dark"] .ie-content table th{
  background:var(--surface-2) !important;
  color:#fff !important;
}
.ie-content .wp-block-table tr:hover td{
  background:color-mix(in srgb,var(--brand) 5%, transparent);
}
html[data-theme="dark"] .ie-content .wp-block-table tr:hover td{
  background:rgba(91,124,250,.06);
}

/* ---------- Video Popup + YouTube embeds ---------- */
.ie-content .vp-a,
.ie-content a.vp-a{
  display:inline-block;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none !important;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  line-height:0;
  isolation:isolate;
}
.ie-content .vp-a:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb,var(--brand) 40%, var(--line));
}
.ie-content .vp-img,
.ie-content .vp-a img{
  display:block;
  width:100%;
  max-width:200px;
  height:auto;
  border-radius:0;
  margin:0;
}
.ie-content td .vp-a{max-width:180px}
/* dim overlay */
.ie-content .vp-a::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(8,9,13,.15), rgba(8,9,13,.55));
  z-index:1;
  pointer-events:none;
  transition:opacity .16s;
}
.ie-content .vp-a:hover::before{opacity:.75}
/* play button */
.ie-content .vp-a::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:46px;height:46px;
  margin:-23px 0 0 -23px;
  border-radius:50%;
  z-index:2;
  pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Ccircle cx='23' cy='23' r='23' fill='%235B7CFA'/%3E%3Cpath d='M19 14l16 9-16 9z' fill='white'/%3E%3C/svg%3E")
    center/contain no-repeat;
  box-shadow:0 8px 22px rgba(52,87,255,.45);
  transition:transform .16s ease;
}
.ie-content .vp-a:hover::after{transform:scale(1.06)}

.ie-content .wp-block-embed,
.ie-content .wp-block-embed-youtube,
.ie-content .wp-block-video,
.ie-content figure.wp-block-embed{
  margin:1.8em 0;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--dark,#0B0F1E);
  box-shadow:var(--shadow-md);
}
html[data-theme="dark"] .ie-content .wp-block-embed,
html[data-theme="dark"] .ie-content .wp-block-embed-youtube,
html[data-theme="dark"] .ie-content figure.wp-block-embed{
  border-color:var(--line);
  box-shadow:var(--shadow-lg);
}
.ie-content .wp-block-embed__wrapper{
  position:relative;
  aspect-ratio:16/9;
  background:#06070C;
}
.ie-content .wp-block-embed iframe,
.ie-content .wp-block-embed__wrapper iframe,
.ie-content iframe[src*="youtube"],
.ie-content iframe[src*="youtu.be"],
.ie-content iframe[src*="youtube-nocookie"]{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  border:0;
  display:block;
}
.ie-content > iframe[src*="youtube"],
.ie-content p iframe[src*="youtube"]{
  position:static;
  width:100% !important;
  aspect-ratio:16/9;
  height:auto !important;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  display:block;
  margin:1.6em 0;
}

.vp-inner,
.vp-mpf-iframe-content iframe{
  border-radius:14px !important;
}

/* ---------- Code Block Pro + default code ---------- */
.ie-content .wp-block-kevinbatdorf-code-block-pro,
.ie-content .code-block-pro-copy-button{
  border-radius:var(--r-sm) !important;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  margin:1.4em 0 !important;
}
html[data-theme="dark"] .ie-content .wp-block-kevinbatdorf-code-block-pro{
  border-color:var(--line);
  box-shadow:var(--shadow-md);
}
.ie-content .wp-block-kevinbatdorf-code-block-pro pre{
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
}

/* ---------- Cheat sheet / long-form polish ---------- */
.ie-content h2{
  padding-top:.35em;
  border-top:1px solid transparent;
}
.ie-content h2:not(:first-child){
  margin-top:2.4em;
  padding-top:1.1em;
  border-top-color:var(--line);
}
.ie-content h3,.ie-content h4{
  scroll-margin-top:90px;
}
.ie-content ul li::marker{color:var(--brand)}
.ie-content ol li::marker{color:var(--brand);font-weight:700;font-family:'JetBrains Mono',monospace;font-size:.85em}

/* Inline code in cheat sheets */
.ie-content p code,
.ie-content li code{
  font-size:.86em;
  color:var(--brand-ink);
}
html[data-theme="dark"] .ie-content p code,
html[data-theme="dark"] .ie-content li code{
  color:#AEBEFF;
}

@media(max-width:560px){
  .ie-content .wp-block-ub-content-toggle-accordion-title,
  .ie-content summary{font-size:15.5px !important}
  .ie-content .vp-img,
  .ie-content .vp-a img{max-width:140px}
  .ie-content .wp-block-ub-content-toggle-accordion-title-wrap,
  .ie-content summary{padding:14px 14px !important}
}