/**
 * Formatted Blog Post Styles — Michael Carbonara
 * Scoped for WordPress + Elementor + Gutenberg post content
 * Sharp corners (no rounding)
 *
 * Loaded only on single blog posts via functions.php
 */

/* Brand tokens */
:root{
  --mc-bg:#0b2664;          /* Background */
  --mc-secondary:#ffffff;   /* Secondary */
  --mc-ink:#ffffff;         /* Font */
  --mc-accent:#ae2736;      /* Accents */

  --mc-line:rgba(255,255,255,.16);
  --mc-panel:rgba(255,255,255,.06);
  --mc-panel-2:rgba(255,255,255,.04);
  --mc-shadow:0 14px 34px rgba(0,0,0,.42);

  --mc-frame:min(980px, 100%);
  --mc-side-pad:clamp(12px, 4vw, 28px);

  --mc-radius:0px;          /* Sharp corners */
}

/* Base article typography + frame (scoped) */
.entry-content,
.elementor-widget-theme-post-content,
.wp-block-post-content,
.rte,
[itemprop="articleBody"],
.article__content{
  color: var(--mc-ink);
  font-size: 19px;
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: var(--mc-frame);
  margin-inline: auto;
  padding-inline: var(--mc-side-pad);
  box-sizing: border-box;
  background: var(--mc-bg);
}

/* Prevent odd theme styles from breaking layout */
.entry-content *,
.elementor-widget-theme-post-content *,
.wp-block-post-content *,
.rte *,
[itemprop="articleBody"] *,
.article__content *{
  box-sizing: border-box;
  max-width: 100%;
}

/* Headings (scoped) */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.elementor-widget-theme-post-content h1,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3,
.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3,
.rte h1,.rte h2,.rte h3,
[itemprop="articleBody"] h1,[itemprop="articleBody"] h2,[itemprop="articleBody"] h3,
.article__content h1,.article__content h2,.article__content h3{
  color: var(--mc-secondary);
  line-height: 1.25;
  margin-top: 1.8rem !important;
  margin-bottom: 1rem;
}

/* Paragraphs (scoped) */
.entry-content p,
.elementor-widget-theme-post-content p,
.wp-block-post-content p,
.rte p,
[itemprop="articleBody"] p,
.article__content p{
  margin: 0.6rem 0 !important;
}

/* Lists (scoped) */
.entry-content ul,
.entry-content ol,
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol,
.wp-block-post-content ul,
.wp-block-post-content ol,
.rte ul,
.rte ol,
[itemprop="articleBody"] ul,
[itemprop="articleBody"] ol,
.article__content ul,
.article__content ol{
  margin: 0 0 1.3rem 1.4rem;
  padding: 0;
}
.entry-content li,
.elementor-widget-theme-post-content li,
.wp-block-post-content li,
.rte li,
[itemprop="articleBody"] li,
.article__content li{
  margin: 0.25rem 0;
}

/* Links (scoped) */
.entry-content a,
.elementor-widget-theme-post-content a,
.wp-block-post-content a,
.rte a,
[itemprop="articleBody"] a,
.article__content a{
  color: var(--mc-secondary);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease, filter 0.18s ease;
}
.entry-content a:hover,
.elementor-widget-theme-post-content a:hover,
.wp-block-post-content a:hover,
.rte a:hover,
[itemprop="articleBody"] a:hover,
.article__content a:hover{
  color: var(--mc-accent);
  text-decoration-color: var(--mc-accent);
}

/* Focus ring (scoped) */
.entry-content :focus-visible,
.elementor-widget-theme-post-content :focus-visible,
.wp-block-post-content :focus-visible,
.rte :focus-visible,
[itemprop="articleBody"] :focus-visible,
.article__content :focus-visible{
  outline: 2px solid rgba(174,39,54,.80);
  outline-offset: 3px;
}

/* Media (scoped, sharp edges) */
.entry-content img,
.entry-content video,
.entry-content iframe,
.elementor-widget-theme-post-content img,
.elementor-widget-theme-post-content video,
.elementor-widget-theme-post-content iframe,
.wp-block-post-content img,
.wp-block-post-content video,
.wp-block-post-content iframe,
.rte img,
.rte video,
.rte iframe,
[itemprop="articleBody"] img,
[itemprop="articleBody"] video,
[itemprop="articleBody"] iframe,
.article__content img,
.article__content video,
.article__content iframe{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--mc-radius);
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.10);
}

/* Summary + article ending */
.summary{
  font-style: italic;
  color: rgba(255,255,255,.80);
  margin-bottom: 2rem;
}
.article-ending{
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--mc-line);
  font-style: italic;
}

/* ============================
   Side-by-side blocks
   ============================ */
.side-by-side{
  display: flex;
  gap: clamp(16px, 3vw, 28px);
  align-items: flex-start;
  margin: 2rem 0;
  width: 100%;
}
.side-by-side img{
  flex: 0 0 auto;
  max-width: min(100%, 420px);
  border-radius: var(--mc-radius);
  box-shadow: var(--mc-shadow);
  border: 1px solid rgba(255,255,255,.10);
}
.side-by-side .side-text{
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0.75rem;
}

/* orientation helpers */
.side-by-side.special-image-left{ flex-direction: row; }
.side-by-side.image-2-right{ flex-direction: row-reverse; }

/* ============================
   Product section (image + button only, no extra parent frame)
   ============================ */
.side-by-side.product-image-right{
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 2.2rem auto;
  gap: 0.9rem;
}
.side-by-side.product-image-right img{
  max-width: 300px;
  width: 100%;
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10) !important;
}
.side-by-side.product-image-right .side-text{
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
.side-by-side.product-image-right .side-text p{
  margin: 0 !important;
}
.side-by-side.product-image-right .side-text a{
  display: inline-block;
  background: var(--mc-accent);
  color: #ffffff !important;
  padding: 0.78em 1.75em;
  font-size: 0.98em;
  font-weight: 900;
  border-radius: var(--mc-radius);
  border: 1px solid rgba(255,255,255,.18);
  text-decoration: none !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 16px 40px rgba(0,0,0,.46);
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.22s ease, background 0.16s ease;
}
.side-by-side.product-image-right .side-text a:hover{
  background: color-mix(in srgb, var(--mc-accent) 86%, #000 14%);
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(0,0,0,.56);
  filter: brightness(1.02);
}
.side-by-side.product-image-right .side-text a *{
  color: inherit !important;
  text-decoration: none !important;
}

/* ============================
   Highlights (sharp cards)
   ============================ */
.article-highlights{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2.2rem 0;
}
.highlight-card{
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.08), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.14);
  border-left: 4px solid var(--mc-accent);
  padding: 1.15rem 1.35rem;
  border-radius: var(--mc-radius);
  font-weight: 750;
  color: var(--mc-secondary);
  box-shadow: 0 14px 34px rgba(0,0,0,.40);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.22s ease, filter 0.18s ease;
}
.highlight-card:hover{
  transform: translateY(-2px);
  border-left-color: var(--mc-secondary);
  box-shadow: 0 20px 46px rgba(0,0,0,.52);
  filter: saturate(1.03);
}

/* ============================
   CTA block (headline floats above frame)
   Use .cta-headline immediately before .cta-section in markup
   ============================ */
.cta-headline{
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 2.3rem auto 0.7rem auto;
  padding: 0.55rem 0.95rem;
  font-size: 1.05em;
  font-weight: 950;
  letter-spacing: 0.02em;
  color: var(--mc-secondary);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
  border: 1px solid rgba(255,255,255,.14);
  border-left: 4px solid var(--mc-accent);
  border-radius: var(--mc-radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.cta-section{
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.08), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.14);
  padding: 1.35rem;
  margin: 0.75rem auto 2.3rem auto;
  border-radius: var(--mc-radius);
  text-align: center;
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
  max-width: 720px;
}
.cta-section p{
  color: rgba(255,255,255,.90);
}

.cta-section .cta-button,
.cta-section a.cta-button{
  display: inline-block;
  background: var(--mc-accent);
  color: #ffffff !important;
  padding: 0.85em 2.1em;
  font-size: 1em;
  font-weight: 950;
  border-radius: var(--mc-radius);
  margin-top: 0.7rem;
  border: 1px solid rgba(255,255,255,.18);
  text-decoration: none !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 16px 44px rgba(0,0,0,.52);
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.22s ease, background 0.16s ease;
}
.cta-section .cta-button *,
.cta-section a.cta-button *{
  color: inherit !important;
  text-decoration: none !important;
}
.cta-section .cta-button:hover,
.cta-section a.cta-button:hover{
  background: color-mix(in srgb, var(--mc-accent) 86%, #000 14%);
  transform: translateY(-2px);
  box-shadow: 0 24px 58px rgba(0,0,0,.60);
  filter: brightness(1.02);
}

/* ============================
   Special standalone image (logo)
   ============================ */
figure.special-image-standalone{
  margin: 1.4rem auto;
  text-align: center;
  max-width: 120px;
  width: 100%;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
figure.special-image-standalone img{
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0 !important;
  border: 0 !important;
}

/* Inline figures (non side-by-side) */
figure:not(.side-by-side):not(.special-image-standalone){
  margin: 1.6rem auto;
  max-width: 760px;
  width: 100%;
}
figure:not(.side-by-side):not(.special-image-standalone) img{
  width: 100%;
  height: auto;
  border-radius: var(--mc-radius);
}

/* ============================
   FAQ accordion (checkbox)
   ============================ */
.faq-accordion{
  border: 1px solid rgba(255,255,255,.14);
  border-left: 4px solid var(--mc-accent);
  border-radius: var(--mc-radius);
  margin-bottom: 1.2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.08), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,.42);
}
.faq-accordion > br{ display:none !important; margin:0; padding:0; }
.faq-toggle{ position:absolute; opacity:0; pointer-events:none; }

.faq-summary{
  padding: 1.25rem 1.2rem 1.25rem 2.9rem;
  font-weight: 950;
  cursor: pointer;
  position: relative;
  color: var(--mc-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 64px;
  line-height: 1.35;
}
.faq-summary::before{
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--mc-accent);
  transition: transform 0.2s ease, border-color 0.18s ease;
}
.faq-toggle:checked ~ .faq-summary::before{
  transform: translateY(-50%) rotate(90deg);
  border-color: transparent transparent transparent var(--mc-secondary);
}

.faq-content{
  display: none;
  padding: 1.05rem 1.2rem 1.15rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}
.faq-toggle:checked ~ .faq-content{ display:block; }

/* ============================
   Tool blocks (checklist, slider, calculator)
   Branded, centered, interactive
   ============================ */
.tool-block{
  max-width: 720px;
  margin: 2.3rem auto;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.08), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.14);
  border-left: 4px solid var(--mc-accent);
  padding: 1.3rem;
  border-radius: var(--mc-radius);
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
  position: relative;
}
.tool-purpose{
  margin: 0 0 0.9rem 0 !important;
  color: rgba(255,255,255,.86);
  font-style: italic;
}
.tool-notes{
  margin: 0.9rem 0 0 0 !important;
  color: rgba(255,255,255,.80);
  font-size: 0.95em;
}

/* Subtle highlight strip */
.tool-block::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, rgba(174,39,54,.0), rgba(174,39,54,.75), rgba(255,255,255,.55), rgba(174,39,54,.0));
  opacity: .9;
}

/* Hover lift */
@media (prefers-reduced-motion: no-preference){
  .tool-block{
    transition: transform 0.18s ease, box-shadow 0.22s ease, filter 0.18s ease, border-color 0.18s ease;
  }
  .tool-block:hover{
    transform: translateY(-2px);
    border-left-color: var(--mc-secondary);
    box-shadow: 0 24px 58px rgba(0,0,0,.60);
    filter: saturate(1.03);
  }
}

/* Checklist */
.tool-checklist-list{
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0 0;
  display: grid;
  gap: 0.55rem;
}
.tool-checklist-item label{
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  user-select: none;
  padding: 0.7rem 0.8rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--mc-radius);
}
.tool-checklist-item input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--mc-accent);
  cursor: pointer;
}
.tool-checklist-item span{
  font-weight: 800;
  color: var(--mc-secondary);
}

/* Slider */
.tool-slider-label{
  font-weight: 950;
  color: var(--mc-secondary);
  margin-bottom: 0.6rem;
}
.tool-slider-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.9rem;
  align-items: center;
}
.tool-slider-input{
  width: 100%;
  accent-color: var(--mc-accent);
  cursor: pointer;
}
.tool-slider-value{
  font-weight: 950;
  color: var(--mc-secondary);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 0.55rem 0.75rem;
  min-width: 72px;
  text-align: right;
  border-radius: var(--mc-radius);
}

/* Range improvements for Safari */
.tool-slider-input[type="range"]::-webkit-slider-runnable-track{
  background-color: rgba(174,39,54,.40);
  height: 6px;
}
.tool-slider-input[type="range"]::-webkit-slider-thumb{ cursor:pointer; }

/* Calculator */
.tool-calc-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 0.5rem;
}
.tool-calc-field{
  display: grid;
  gap: 0.35rem;
}
.tool-calc-label{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  font-size: 0.95em;
}
.tool-calc-input{
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--mc-secondary);
  padding: 0.7rem 0.8rem;
  border-radius: var(--mc-radius);
}
.tool-calc-input:focus{
  outline: none;
  border-color: rgba(174,39,54,.70);
}
.tool-calc-output{
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  align-items: baseline;
}
.tool-calc-output-label{
  font-weight: 950;
  color: rgba(255,255,255,.90);
}
.tool-calc-output-value{
  font-weight: 950;
  color: var(--mc-accent);
  letter-spacing: 0.2px;
}
.tool-calc-output-unit{
  font-weight: 900;
  color: rgba(255,255,255,.86);
}

/* If calculator has many fields, allow 1 column on narrow widths */
@media (max-width: 560px){
  .tool-calc-grid{ grid-template-columns: 1fr; }
}

/* Make tool internals robust against theme link styles */
.entry-content .tool-block a,
.elementor-widget-theme-post-content .tool-block a,
.wp-block-post-content .tool-block a,
.rte .tool-block a,
[itemprop="articleBody"] .tool-block a,
.article__content .tool-block a{
  color: var(--mc-secondary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 850;
}
.entry-content .tool-block a:hover,
.elementor-widget-theme-post-content .tool-block a:hover,
.wp-block-post-content .tool-block a:hover,
.rte .tool-block a:hover,
[itemprop="articleBody"] .tool-block a:hover,
.article__content .tool-block a:hover{
  color: var(--mc-accent);
  text-decoration-color: var(--mc-accent);
}

/* ============================
   References section spacing
   ============================ */
.entry-content h1#references,
.entry-content h2#references,
.entry-content h3#references,
.elementor-widget-theme-post-content h1#references,
.elementor-widget-theme-post-content h2#references,
.elementor-widget-theme-post-content h3#references,
.wp-block-post-content h1#references,
.wp-block-post-content h2#references,
.wp-block-post-content h3#references,
.rte h1#references,.rte h2#references,.rte h3#references,
[itemprop="articleBody"] h1#references,[itemprop="articleBody"] h2#references,[itemprop="articleBody"] h3#references,
.article__content h1#references,.article__content h2#references,.article__content h3#references{
  margin-top: 3.1rem !important;
}
.entry-content h1[id*="reference" i],
.entry-content h2[id*="reference" i],
.entry-content h3[id*="reference" i],
.elementor-widget-theme-post-content h1[id*="reference" i],
.elementor-widget-theme-post-content h2[id*="reference" i],
.elementor-widget-theme-post-content h3[id*="reference" i],
.wp-block-post-content h1[id*="reference" i],
.wp-block-post-content h2[id*="reference" i],
.wp-block-post-content h3[id*="reference" i],
.rte h1[id*="reference" i],.rte h2[id*="reference" i],.rte h3[id*="reference" i],
[itemprop="articleBody"] h1[id*="reference" i],[itemprop="articleBody"] h2[id*="reference" i],[itemprop="articleBody"] h3[id*="reference" i],
.article__content h1[id*="reference" i],.article__content h2[id*="reference" i],.article__content h3[id*="reference" i]{
  margin-top: 3.1rem !important;
}
.entry-content .references,
.entry-content .reference-section,
.entry-content .references-section,
.elementor-widget-theme-post-content .references,
.elementor-widget-theme-post-content .reference-section,
.elementor-widget-theme-post-content .references-section,
.wp-block-post-content .references,
.wp-block-post-content .reference-section,
.wp-block-post-content .references-section,
.rte .references,
.rte .reference-section,
.rte .references-section,
[itemprop="articleBody"] .references,
[itemprop="articleBody"] .reference-section,
[itemprop="articleBody"] .references-section,
.article__content .references,
.article__content .reference-section,
.article__content .references-section{
  margin-top: 2.4rem !important;
}

/* ============================
   Scope animations
   ============================ */
@media (prefers-reduced-motion: no-preference){
  .entry-content img,
  .entry-content video,
  .entry-content iframe,
  .elementor-widget-theme-post-content img,
  .elementor-widget-theme-post-content video,
  .elementor-widget-theme-post-content iframe,
  .wp-block-post-content img,
  .wp-block-post-content video,
  .wp-block-post-content iframe,
  .rte img,
  .rte video,
  .rte iframe,
  [itemprop="articleBody"] img,
  [itemprop="articleBody"] video,
  [itemprop="articleBody"] iframe,
  .article__content img,
  .article__content video,
  .article__content iframe{
    opacity: 1;
    transform: none;
    animation: none;
  }

  .side-by-side img,
  .cta-headline,
  .cta-section,
  .tool-block,
  .highlight-card{
    opacity: 0;
    transform: translateY(4px);
    animation: mc-fade-in 420ms cubic-bezier(0.22, 0.7, 0.18, 1) 40ms both;
  }
}
@keyframes mc-fade-in{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ============================
   Mobile
   ============================ */
@media (max-width: 768px){
  .entry-content,
  .elementor-widget-theme-post-content,
  .wp-block-post-content{
    padding-inline: clamp(12px, 5.5vw, 20px);
  }

  .side-by-side{
    flex-direction: column !important;
  }
  .side-by-side .side-text{
    padding: 0;
  }

  .faq-summary{
    padding: 1.1rem 1rem 1.1rem 2.6rem;
    min-height: 58px;
  }
  .faq-summary::before{
    left: 0.95rem;
  }
  .faq-content{
    padding: 0.95rem 1rem 1.05rem 1rem;
  }

  figure.special-image-standalone{
    margin: 1.2rem auto;
    max-width: 104px;
  }

  .cta-headline{
    margin: 2rem auto 0.65rem auto;
    text-align: center;
  }

  .cta-section .cta-button,
  .cta-section a.cta-button{
    width: 100%;
    max-width: 360px;
  }

  .side-by-side.product-image-right img{
    max-width: 320px;
  }
  .side-by-side.product-image-right .side-text a{
    width: 100%;
    max-width: 360px;
  }

  .tool-block{
    padding: 1.15rem;
  }
  .tool-slider-row{
    grid-template-columns: 1fr;
  }
  .tool-slider-value{
    width: 100%;
    text-align: center;
  }

  .entry-content h1#references,
  .entry-content h2#references,
  .entry-content h3#references,
  .elementor-widget-theme-post-content h1#references,
  .elementor-widget-theme-post-content h2#references,
  .elementor-widget-theme-post-content h3#references,
  .wp-block-post-content h1#references,
  .wp-block-post-content h2#references,
  .wp-block-post-content h3#references{
    margin-top: 2.6rem !important;
  }
}