/* =============================================================================
   CONTENT.CSS — Post Content & Gutenberg Block Styles
   Hello Elementor Child Theme

   This file styles the main article body rendered by the_content().
   It is also loaded in the Gutenberg block editor via add_editor_style()
   in functions.php so the editing preview matches the frontend exactly.

   Design intent:
     The content area is where the reader spends most of their time.
     Every decision here serves legibility and reading comfort.
     Line length, line height, paragraph spacing, heading hierarchy —
     all tuned for long-form reading sessions.

     Rubik for headings and body.
     Consolas for all code — monospaced, clear, professional.
     Helvetica for captions and utility text — neutral, efficient.

   Gutenberg blocks styled here:
     Core: paragraph, heading, image, gallery, quote, pullquote,
           code, preformatted, list, table, separator, buttons,
           cover, group, columns, media-text, embed.
   ============================================================================= */


/* =============================================================================
   1. ARTICLE WRAPPER
   ============================================================================= */

   .hec-content-body {
    width:      100%;
    max-width:  var(--hec-content-width);
    margin:     0 auto;
    padding:    var(--hec-space-10) 0 var(--hec-space-12);
  
    transition:
      color            var(--hec-transition-slow),
      background-color var(--hec-transition-slow);
  }
  
  
  /* =============================================================================
     2. CONTENT BODY — the actual rendered block content
     ============================================================================= */
  
  .hec-content__body {
    font-family:   var(--hec-font-body);
    font-size:     var(--hec-text-md);
    font-weight:   var(--hec-weight-regular);
    line-height:   var(--hec-leading-relaxed);
    color:         var(--hec-color-text-primary);
    word-break:    break-word;
    overflow-wrap: break-word;
  }
  
  
  /* =============================================================================
     3. TYPOGRAPHY — Paragraphs
     ============================================================================= */
  
  .hec-content__body p {
    margin-bottom:  var(--hec-space-6);
    font-size:      var(--hec-text-md);
    line-height:    var(--hec-leading-relaxed);
    color:          var(--hec-color-text-primary);
    letter-spacing: var(--hec-tracking-normal);
  }
  
  .hec-content__body p:last-child {
    margin-bottom: 0;
  }
  
  /*
   * First paragraph — slightly larger lead paragraph.
   * Creates a strong editorial opening to the article.
   */
  .hec-content__body > p:first-of-type {
    font-size:   var(--hec-text-lg);
    line-height: var(--hec-leading-relaxed);
    color:       var(--hec-color-text-primary);
    font-weight: var(--hec-weight-regular);
  }
  
  /* Drop cap on the very first letter of the article */
  .hec-content__body > p:first-of-type::first-letter {
    float:          left;
    font-size:      4.2em;
    line-height:    0.78;
    margin-right:   var(--hec-space-2);
    margin-top:     var(--hec-space-1);
    font-weight:    var(--hec-weight-bold);
    font-family:    var(--hec-font-heading);
    color:          var(--hec-color-accent);
    padding:        0 var(--hec-space-1) 0 0;
  }
  
  
  /* =============================================================================
     4. TYPOGRAPHY — Headings
     ============================================================================= */
  
  .hec-content__body h2,
  .hec-content__body h3,
  .hec-content__body h4,
  .hec-content__body h5,
  .hec-content__body h6 {
    font-family:    var(--hec-font-heading);
    font-weight:    var(--hec-weight-bold);
    line-height:    var(--hec-leading-snug);
    letter-spacing: var(--hec-tracking-tight);
    color:          var(--hec-color-text-primary);
    margin-top:     var(--hec-space-10);
    margin-bottom:  var(--hec-space-4);
    scroll-margin-top: 100px; /* Offset for fixed progress bar + header */
  }
  
  /* Remove top margin from first heading */
  .hec-content__body > h2:first-child,
  .hec-content__body > h3:first-child {
    margin-top: 0;
  }
  
  .hec-content__body h2 {
    font-size: var(--hec-text-2xl);
    padding-bottom: var(--hec-space-3);
    border-bottom:  2px solid var(--hec-color-border);
    position:       relative;
  }
  
  /*
   * H2 left accent bar — brand amber vertical rule.
   * Creates a strong visual hierarchy marker for major sections.
   */
  .hec-content__body h2::before {
    content:      '';
    position:     absolute;
    left:         calc(-1 * var(--hec-space-6));
    top:          0;
    bottom:       var(--hec-space-3);
    width:        4px;
    background:   linear-gradient(
                    to bottom,
                    var(--hec-brand-amber) 0%,
                    var(--hec-brand-gold)  100%
                  );
    border-radius: var(--hec-radius-full);
  }
  
  @media (max-width: 768px) {
    .hec-content__body h2::before {
      display: none;
    }
  }
  
  .hec-content__body h3 {
    font-size:   var(--hec-text-xl);
    color:       var(--hec-color-text-primary);
    margin-top:  var(--hec-space-8);
  }
  
  .hec-content__body h4 {
    font-size:   var(--hec-text-lg);
    font-weight: var(--hec-weight-semibold);
    color:       var(--hec-color-accent);
  }
  
  .hec-content__body h5 {
    font-size:      var(--hec-text-base);
    font-weight:    var(--hec-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--hec-tracking-wider);
    color:          var(--hec-color-text-secondary);
  }
  
  .hec-content__body h6 {
    font-size:   var(--hec-text-sm);
    font-weight: var(--hec-weight-semibold);
    color:       var(--hec-color-text-tertiary);
  }
  
  
  /* =============================================================================
     5. LISTS
     ============================================================================= */
  
  .hec-content__body ul,
  .hec-content__body ol {
    margin-bottom: var(--hec-space-6);
    padding-left:  var(--hec-space-6);
    color:         var(--hec-color-text-primary);
  }
  
  .hec-content__body li {
    margin-bottom: var(--hec-space-2);
    line-height:   var(--hec-leading-relaxed);
    font-size:     var(--hec-text-md);
  }
  
  .hec-content__body li::marker {
    color: var(--hec-color-accent);
  }
  
  /* Nested lists */
  .hec-content__body ul ul,
  .hec-content__body ol ol,
  .hec-content__body ul ol,
  .hec-content__body ol ul {
    margin-top:    var(--hec-space-2);
    margin-bottom: 0;
  }
  
  /* Custom unordered list bullet */
  .hec-content__body ul {
    list-style: none;
    padding-left: var(--hec-space-6);
  }
  
  .hec-content__body ul > li {
    position: relative;
  }
  
  .hec-content__body ul > li::before {
    content:          '';
    position:         absolute;
    left:             calc(-1 * var(--hec-space-5));
    top:              0.55em;
    width:            8px;
    height:           8px;
    border-radius:    var(--hec-radius-full);
    background:       linear-gradient(
                        135deg,
                        var(--hec-brand-amber) 0%,
                        var(--hec-brand-gold)  100%
                      );
    flex-shrink:      0;
  }
  
  /* Nested ul uses hollow circle */
  .hec-content__body ul ul > li::before {
    background:   transparent;
    border:       2px solid var(--hec-color-accent);
    width:        6px;
    height:       6px;
  }
  
  /* Ordered list */
  .hec-content__body ol {
    list-style: decimal;
    padding-left: var(--hec-space-8);
  }
  
  .hec-content__body ol > li::marker {
    font-weight: var(--hec-weight-semibold);
    color:       var(--hec-color-accent);
  }
  
  
  /* =============================================================================
     5b. FAQ / ACCORDION  (Yoast / Rank Math / AIOSEO schema FAQ blocks)
  
     Targets the markup produced by SEO plugins' FAQ schema blocks:
       <div class="schema-faq-section" id="...">
         <strong class="schema-faq-question">Q</strong>
         <p class="schema-faq-answer">A</p>
       </div>
  
     Behaviour:
       - Without JS: answers stay visible (graceful degradation).
       - With JS: main.js adds .hec-faq-ready to <html> and binds click
         handlers that toggle .is-open on each section.
     ============================================================================= */
  
  .hec-content__body .schema-faq-section {
    position:      relative;
    margin:        var(--hec-space-4) 0;
    padding:       0;
    background:    var(--hec-color-bg-elevated, var(--hec-color-surface, #fffaf3));
    border:        1px solid var(--hec-color-border);
    border-radius: var(--hec-radius-lg);
    box-shadow:    var(--hec-shadow-sm);
    overflow:      hidden;
    transition:
      border-color var(--hec-transition-fast),
      box-shadow   var(--hec-transition-fast),
      transform    var(--hec-transition-fast);
  }
  
  /* Amber → gold accent bar on the left edge. */
  .hec-content__body .schema-faq-section::before {
    content:      '';
    position:     absolute;
    top:          0;
    bottom:       0;
    left:         0;
    width:        3px;
    background:   linear-gradient(
                    to bottom,
                    var(--hec-brand-amber) 0%,
                    var(--hec-brand-gold)  100%
                  );
    opacity:      0.55;
    transition:   opacity var(--hec-transition-fast);
    z-index:      1;
  }
  
  .hec-content__body .schema-faq-section:hover {
    border-color: var(--hec-color-border-strong, var(--hec-color-accent));
    box-shadow:   var(--hec-shadow-md);
    transform:    translateY(-1px);
  }
  
  .hec-content__body .schema-faq-section.is-open {
    border-color: var(--hec-color-accent);
    box-shadow:   var(--hec-shadow-lg);
  }
  
  .hec-content__body .schema-faq-section.is-open::before {
    opacity: 1;
  }
  
  /* Question — the <strong> turned into a clickable header. */
  .hec-content__body .schema-faq-question {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--hec-space-4);
    padding:         var(--hec-space-5) var(--hec-space-6)
                     var(--hec-space-5) var(--hec-space-7);
    margin:          0;
  
    font-family:     var(--hec-font-heading);
    font-size:       var(--hec-text-lg);
    font-weight:     var(--hec-weight-semibold);
    line-height:     var(--hec-leading-snug);
    color:           var(--hec-color-text-primary);
  
    cursor:          pointer;
    user-select:     none;
    outline:         none;
    transition:      color var(--hec-transition-fast);
  }
  
  .hec-content__body .schema-faq-question:hover {
    color: var(--hec-color-accent);
  }
  
  .hec-content__body .schema-faq-question:focus-visible {
    box-shadow: inset 0 0 0 2px var(--hec-brand-gold);
  }
  
  /* Chevron disc — rotates when section is open. */
  .hec-content__body .schema-faq-question::after {
    content:       '';
    flex-shrink:   0;
    width:         28px;
    height:        28px;
    border-radius: 50%;
    background:    linear-gradient(
                     135deg,
                     var(--hec-brand-amber) 0%,
                     var(--hec-brand-gold)  100%
                   );
    -webkit-mask:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>")
      center / 60% no-repeat,
      linear-gradient(#000, #000);
    -webkit-mask-composite: source-in;
            mask:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>")
      center / 60% no-repeat,
      linear-gradient(#000, #000);
            mask-composite: intersect;
    transform:     rotate(-90deg);
    transition:    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
                   filter   220ms ease;
    box-shadow:    0 4px 10px rgba(209, 106, 11, 0.25);
  }
  
  .hec-content__body .schema-faq-section.is-open .schema-faq-question::after {
    transform: rotate(0deg);
    filter:    drop-shadow(0 0 6px rgba(255, 191, 0, 0.50));
  }
  
  /* Answer — paragraph beneath the question. */
  .hec-content__body .schema-faq-answer {
    margin:      0;
    padding:     0 var(--hec-space-6) var(--hec-space-5) var(--hec-space-7);
    color:       var(--hec-color-text-secondary);
    font-size:   var(--hec-text-base);
    line-height: var(--hec-leading-relaxed);
  }
  
  .hec-content__body .schema-faq-answer em,
  .hec-content__body .schema-faq-answer strong {
    color: var(--hec-color-text-primary);
  }
  
  /* -------------------------------------------------------------------------
     Collapsible behavior — applied only after JS marks the page ready.
     Uses the grid-template-rows 0fr ↔ 1fr trick for smooth height animation.
     ------------------------------------------------------------------------- */
  .hec-faq-ready .hec-content__body .schema-faq-section {
    display:            grid;
    grid-template-rows: auto 0fr;
    transition:
      grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color       var(--hec-transition-fast),
      box-shadow         var(--hec-transition-fast),
      transform          var(--hec-transition-fast);
  }
  
  .hec-faq-ready .hec-content__body .schema-faq-section.is-open {
    grid-template-rows: auto 1fr;
  }
  
  .hec-faq-ready .hec-content__body .schema-faq-answer {
    overflow:   hidden;
    min-height: 0;
  }
  
  @media (max-width: 600px) {
    .hec-content__body .schema-faq-question {
      padding:   var(--hec-space-4) var(--hec-space-4)
                 var(--hec-space-4) var(--hec-space-5);
      font-size: var(--hec-text-base);
    }
    .hec-content__body .schema-faq-answer {
      padding: 0 var(--hec-space-4) var(--hec-space-4) var(--hec-space-5);
    }
    .hec-content__body .schema-faq-question::after {
      width: 24px;
      height: 24px;
    }
  }
  
  
  /* =============================================================================
     6. BLOCKQUOTE
     ============================================================================= */
  
  .hec-content__body blockquote,
  .hec-content__body .wp-block-quote {
    position:       relative;
    margin:         var(--hec-space-8) 0;
    padding:        var(--hec-space-6) var(--hec-space-8);
    background:     var(--hec-color-blockquote-bg);
    border-left:    var(--hec-border-width-heavy) solid var(--hec-color-blockquote-border);
    border-radius:  0 var(--hec-radius-lg) var(--hec-radius-lg) 0;
  
    font-style:     italic;
    font-size:      var(--hec-text-lg);
    line-height:    var(--hec-leading-relaxed);
    color:          var(--hec-color-blockquote-text);
  
    transition:
      background  var(--hec-transition-slow),
      border-color var(--hec-transition-slow);
  }
  
  /* Large decorative quotation mark */
  .hec-content__body blockquote::before,
  .hec-content__body .wp-block-quote::before {
    content:        '\201C';
    position:       absolute;
    /* v1.0.12: was `top: -var(...)` which is invalid CSS and was ignored. */
    top:            calc(-1 * var(--hec-space-2));
    left:           var(--hec-space-4);
    font-size:      5rem;
    line-height:    1;
    color:          var(--hec-color-accent);
    opacity:        0.20;
    font-family:    Georgia, serif;
    font-style:     normal;
    pointer-events: none;
    user-select:    none;
  }
  
  .hec-content__body blockquote p,
  .hec-content__body .wp-block-quote p {
    margin-bottom: var(--hec-space-3);
    font-size:     inherit;
  }
  
  .hec-content__body blockquote cite,
  .hec-content__body .wp-block-quote cite,
  .hec-content__body .wp-block-quote footer {
    display:        block;
    font-size:      var(--hec-text-sm);
    font-style:     normal;
    font-weight:    var(--hec-weight-semibold);
    color:          var(--hec-color-accent);
    margin-top:     var(--hec-space-3);
    letter-spacing: var(--hec-tracking-wide);
  }
  
  .hec-content__body blockquote cite::before,
  .hec-content__body .wp-block-quote cite::before {
    content: '— ';
  }
  
  /* Pullquote block */
  .hec-content__body .wp-block-pullquote {
    border-top:    3px solid var(--hec-color-accent);
    border-bottom: 3px solid var(--hec-color-accent);
    padding:       var(--hec-space-8) var(--hec-space-6);
    margin:        var(--hec-space-10) 0;
    text-align:    center;
    background:    transparent;
  }
  
  .hec-content__body .wp-block-pullquote blockquote {
    background:  transparent;
    border-left: none;
    padding:     0;
    border-radius: 0;
  }
  
  .hec-content__body .wp-block-pullquote blockquote::before {
    display: none;
  }
  
  .hec-content__body .wp-block-pullquote p {
    font-size:   var(--hec-text-xl);
    font-weight: var(--hec-weight-semibold);
    font-style:  italic;
    color:       var(--hec-color-text-primary);
  }
  
  
  /* =============================================================================
     7. CODE
     ============================================================================= */
  
  /* Inline code */
  .hec-content__body code,
  .hec-content__body kbd {
    font-family:      var(--hec-font-code);
    font-size:        0.875em;
    padding:          2px 6px;
    border-radius:    var(--hec-radius-sm);
    background-color: var(--hec-color-inline-code-bg);
    color:            var(--hec-color-inline-code-text);
    border:           1px solid var(--hec-color-code-border);
    white-space:      nowrap;
    word-break:       normal;
    transition:
      background-color var(--hec-transition-slow),
      color            var(--hec-transition-slow);
  }
  
  /* Code block */
  .hec-content__body pre,
  .hec-content__body .wp-block-code {
    font-family:      var(--hec-font-code);
    font-size:        var(--hec-text-sm);
    line-height:      var(--hec-leading-relaxed);
  
    background-color: var(--hec-color-code-bg);
    color:            var(--hec-color-code-text);
    border:           1px solid var(--hec-color-code-border);
    border-radius:    var(--hec-radius-lg);
  
    padding:          var(--hec-space-6) var(--hec-space-6);
    margin:           var(--hec-space-6) 0;
    overflow-x:       auto;
  
    position:         relative;
    transition:
      background-color var(--hec-transition-slow),
      color            var(--hec-transition-slow);
  
    /* Top accent line */
    border-top: 3px solid var(--hec-brand-amber);
  }
  
  /*
   * Code block top right label — "CODE".
   * Small label in the top right of code blocks for orientation.
   */
  .hec-content__body pre::after,
  .hec-content__body .wp-block-code::after {
    content:        'CODE';
    position:       absolute;
    top:            var(--hec-space-3);
    right:          var(--hec-space-4);
    font-family:    var(--hec-font-meta);
    font-size:      var(--hec-text-xs);
    font-weight:    var(--hec-weight-bold);
    letter-spacing: var(--hec-tracking-widest);
    color:          var(--hec-brand-amber);
    opacity:        0.60;
  }
  
  .hec-content__body pre code,
  .hec-content__body .wp-block-code code {
    background:  transparent;
    border:      none;
    padding:     0;
    color:       inherit;
    font-size:   inherit;
    white-space: pre;
    word-break:  normal;
  }
  
  /* Scrollbar inside code blocks */
  .hec-content__body pre::-webkit-scrollbar {
    height: 4px;
  }
  
  .hec-content__body pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--hec-radius-full);
  }
  
  .hec-content__body pre::-webkit-scrollbar-thumb {
    background:    var(--hec-brand-amber);
    border-radius: var(--hec-radius-full);
  }
  
  
  /* =============================================================================
     8. IMAGES
     ============================================================================= */
  
  .hec-content__body img {
    max-width:     100%;
    height:        auto;
    border-radius: var(--hec-radius-lg);
    display:       block;
    margin:        var(--hec-space-6) auto;
  
    /*
     * Subtle shadow gives images lift above the page background.
     */
    box-shadow:    var(--hec-shadow-md);
    transition:
      box-shadow var(--hec-transition-normal),
      transform  var(--hec-transition-normal),
      filter     var(--hec-transition-slow);
  }
  
  .hec-content__body img:hover {
    box-shadow: var(--hec-shadow-xl);
    transform:  scale(1.005);
  }
  
  /* Figure captions */
  .hec-content__body figure {
    margin:      var(--hec-space-8) 0;
  }
  
  .hec-content__body figcaption,
  .hec-content__body .wp-element-caption {
    font-family:  var(--hec-font-meta);
    font-size:    var(--hec-text-xs);
    line-height:  var(--hec-leading-snug);
    color:        var(--hec-color-text-tertiary);
    text-align:   center;
    margin-top:   var(--hec-space-3);
    font-style:   italic;
    padding:      0 var(--hec-space-4);
  }
  
  /* Image block */
  .hec-content__body .wp-block-image {
    margin: var(--hec-space-8) 0;
  }
  
  .hec-content__body .wp-block-image img {
    margin: 0 auto;
  }
  
  /* Full width and wide images override border-radius */
  .hec-content__body .alignfull img,
  .hec-content__body .alignwide img {
    border-radius: 0;
  }
  
  
  /* =============================================================================
     9. GALLERY
     ============================================================================= */
  
  .hec-content__body .wp-block-gallery {
    margin:  var(--hec-space-8) 0;
    gap:     var(--hec-space-3);
  }
  
  .hec-content__body .wp-block-gallery .wp-block-image img {
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: var(--hec-radius-md);
    margin:        0;
    box-shadow:    none;
    transition:
      transform  var(--hec-transition-normal),
      box-shadow var(--hec-transition-normal);
  }
  
  .hec-content__body .wp-block-gallery .wp-block-image:hover img {
    transform:  scale(1.02);
    box-shadow: var(--hec-shadow-lg);
  }
  
  
  /* =============================================================================
     10. TABLE
     ============================================================================= */
  
  .hec-content__body table,
  .hec-content__body .wp-block-table table {
    width:           100%;
    border-collapse: collapse;
    margin:          var(--hec-space-8) 0;
    font-size:       var(--hec-text-sm);
    font-family:     var(--hec-font-meta);
    border:          1px solid var(--hec-color-border);
    border-radius:   var(--hec-radius-lg);
    overflow:        hidden;
  
    transition:
      border-color var(--hec-transition-slow);
  }
  
  .hec-content__body th {
    background-color: var(--hec-color-accent);
    color:            var(--hec-white);
    font-weight:      var(--hec-weight-semibold);
    text-align:       left;
    padding:          var(--hec-space-3) var(--hec-space-4);
    font-family:      var(--hec-font-meta);
    letter-spacing:   var(--hec-tracking-wide);
    border:           1px solid rgba(255,255,255,0.15);
  }
  
  .hec-content__body td {
    padding:      var(--hec-space-3) var(--hec-space-4);
    border:       1px solid var(--hec-color-border);
    color:        var(--hec-color-text-primary);
    line-height:  var(--hec-leading-normal);
    transition:   background-color var(--hec-transition-fast);
  }
  
  .hec-content__body tr:nth-child(even) td {
    background-color: var(--hec-color-bg-sunken);
  }
  
  .hec-content__body tr:hover td {
    background-color: var(--hec-color-hover-bg);
  }
  
  
  /* =============================================================================
     11. HORIZONTAL RULE / SEPARATOR
     ============================================================================= */
  
  .hec-content__body hr,
  .hec-content__body .wp-block-separator {
    border:        none;
    margin:        var(--hec-space-10) auto;
    height:        1px;
    background:    linear-gradient(
                     to right,
                     transparent 0%,
                     var(--hec-color-border-strong) 20%,
                     var(--hec-color-border-strong) 80%,
                     transparent 100%
                   );
    max-width:     80%;
  }
  
  /* Styled separator — dots */
  .hec-content__body .wp-block-separator.is-style-dots {
    height:      auto;
    background:  none;
    text-align:  center;
    line-height: 1;
    color:       var(--hec-color-accent);
    font-size:   var(--hec-text-xl);
    letter-spacing: 0.4em;
  }
  
  .hec-content__body .wp-block-separator.is-style-dots::after {
    content: '···';
  }
  
  .hec-content__body .wp-block-separator.is-style-wide {
    max-width:  100%;
    height:     2px;
    background: linear-gradient(
                  to right,
                  var(--hec-brand-amber) 0%,
                  var(--hec-brand-gold)  100%
                );
    border-radius: var(--hec-radius-full);
  }
  
  
  /* =============================================================================
     12. BUTTONS
     ============================================================================= */
  
  .hec-content__body .wp-block-buttons {
    margin: var(--hec-space-6) 0;
    gap:    var(--hec-space-3);
  }
  
  .hec-content__body .wp-block-button__link {
    display:          inline-flex;
    align-items:      center;
    padding:          var(--hec-space-3) var(--hec-space-8);
    border-radius:    var(--hec-radius-full);
    font-family:      var(--hec-font-ui);
    font-size:        var(--hec-text-sm);
    font-weight:      var(--hec-weight-semibold);
    letter-spacing:   var(--hec-tracking-wide);
    text-decoration:  none;
    cursor:           pointer;
    transition:
      background-color var(--hec-transition-fast),
      transform        var(--hec-transition-fast),
      box-shadow       var(--hec-transition-fast);
  }
  
  /* Primary button */
  .hec-content__body .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background-color: var(--hec-color-accent);
    color:            var(--hec-white);
  }
  
  .hec-content__body .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background-color: var(--hec-color-accent-hover);
    transform:        translateY(-2px);
    box-shadow:       var(--hec-shadow-amber);
  }
  
  /* Outline button */
  .hec-content__body .is-style-outline .wp-block-button__link {
    background:    transparent;
    border:        2px solid var(--hec-color-accent);
    color:         var(--hec-color-accent);
  }
  
  .hec-content__body .is-style-outline .wp-block-button__link:hover {
    background:  var(--hec-color-accent);
    color:       var(--hec-white);
    transform:   translateY(-2px);
    box-shadow:  var(--hec-shadow-amber);
  }
  
  
  /* =============================================================================
     13. CALLOUT / NOTICE BLOCKS
     Using wp-block-group with custom classes or the
     wp-block-notice-block plugin pattern.
     ============================================================================= */
  
  .hec-content__body .hec-callout {
    display:       flex;
    gap:           var(--hec-space-4);
    padding:       var(--hec-space-5) var(--hec-space-6);
    border-radius: var(--hec-radius-lg);
    margin:        var(--hec-space-8) 0;
    border-left:   var(--hec-border-width-heavy) solid;
    font-size:     var(--hec-text-base);
    line-height:   var(--hec-leading-normal);
    transition:
      background var(--hec-transition-slow),
      border-color var(--hec-transition-slow);
  }
  
  .hec-content__body .hec-callout--info {
    background:  rgba(209, 106, 11, 0.06);
    border-color: var(--hec-brand-amber);
  }
  
  .hec-content__body .hec-callout--warning {
    background:  var(--hec-color-warning-bg);
    border-color: var(--hec-color-warning);
  }
  
  .hec-content__body .hec-callout--success {
    background:  var(--hec-color-success-bg);
    border-color: var(--hec-color-success);
  }
  
  
  /* =============================================================================
     14. COVER BLOCK
     ============================================================================= */
  
  .hec-content__body .wp-block-cover {
    border-radius:  var(--hec-radius-xl);
    overflow:       hidden;
    margin:         var(--hec-space-8) 0;
    min-height:     240px;
  }
  
  .hec-content__body .wp-block-cover__inner-container {
    padding: var(--hec-space-8);
  }
  
  
  /* =============================================================================
     15. EMBED BLOCKS (YouTube, Vimeo, Twitter, etc.)
     ============================================================================= */
  
  .hec-content__body .wp-block-embed {
    margin: var(--hec-space-8) 0;
  }
  
  .hec-content__body .wp-block-embed__wrapper {
    position:       relative;
    width:          100%;
    border-radius:  var(--hec-radius-xl);
    overflow:       hidden;
    box-shadow:     var(--hec-shadow-lg);
  }
  
  /* Responsive video ratio */
  .hec-content__body .wp-block-embed-youtube .wp-block-embed__wrapper,
  .hec-content__body .wp-block-embed-vimeo .wp-block-embed__wrapper {
    aspect-ratio: 16 / 9;
  }
  
  .hec-content__body .wp-block-embed__wrapper iframe {
    width:    100%;
    height:   100%;
    position: absolute;
    inset:    0;
  }
  
  
  /* =============================================================================
     16. COLUMNS BLOCK
     ============================================================================= */
  
  .hec-content__body .wp-block-columns {
    margin:    var(--hec-space-8) 0;
    gap:       var(--hec-space-6);
    flex-wrap: nowrap;
  }
  
  @media (max-width: 600px) {
    .hec-content__body .wp-block-columns {
      flex-wrap: wrap;
    }
  }
  
  .hec-content__body .wp-block-column {
    flex:     1;
    min-width: 0;
  }
  
  
  /* =============================================================================
     17. POST PAGINATION (wp_link_pages)
     ============================================================================= */
  
  .hec-page-links {
    display:        flex;
    align-items:    center;
    flex-wrap:      wrap;
    gap:            var(--hec-space-2);
    margin:         var(--hec-space-10) 0;
    padding-top:    var(--hec-space-8);
    border-top:     1px solid var(--hec-color-border);
  }
  
  .hec-page-links__label {
    font-family:    var(--hec-font-meta);
    font-size:      var(--hec-text-sm);
    font-weight:    var(--hec-weight-semibold);
    color:          var(--hec-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--hec-tracking-wider);
    margin-right:   var(--hec-space-2);
  }
  
  .hec-page-links__item {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    min-width:        36px;
    height:           36px;
    padding:          0 var(--hec-space-3);
    border-radius:    var(--hec-radius-md);
    font-size:        var(--hec-text-sm);
    font-weight:      var(--hec-weight-semibold);
    border:           1px solid var(--hec-color-border);
    color:            var(--hec-color-text-secondary);
    transition:
      background-color var(--hec-transition-fast),
      color            var(--hec-transition-fast),
      border-color     var(--hec-transition-fast);
  }
  
  .hec-page-links__item:hover,
  .hec-page-links a .hec-page-links__item {
    background-color: var(--hec-color-accent);
    color:            var(--hec-white);
    border-color:     var(--hec-color-accent);
  }
  
  
  /* =============================================================================
     18. CONTENT REVEAL ANIMATION
     ============================================================================= */
  
  html.hec-js .hec-content-body[data-reveal="content"] {
    opacity:    0;
    transform:  translateY(12px);
    transition:
      opacity   var(--hec-transition-slow) var(--hec-ease-out) 0.1s,
      transform var(--hec-transition-slow) var(--hec-ease-out) 0.1s,
      color     var(--hec-transition-slow),
      background-color var(--hec-transition-slow);
  }
  
  html.hec-js .hec-content-body[data-reveal="content"].hec-revealed {
    opacity:   1;
    transform: translateY(0);
  }
  
  @media (prefers-reduced-motion: reduce) {
    html.hec-js .hec-content-body[data-reveal="content"] {
      opacity:   1;
      transform: none;
      transition:
        color            var(--hec-transition-slow),
        background-color var(--hec-transition-slow);
    }
  }
  
  
  /* =============================================================================
     19. RESPONSIVE
     ============================================================================= */
  
  @media (max-width: 768px) {
    .hec-content-body {
      padding: var(--hec-space-8) 0;
    }
  
    .hec-content__body {
      font-size: var(--hec-text-base);
    }
  
    .hec-content__body p {
      font-size: var(--hec-text-base);
    }
  
    .hec-content__body > p:first-of-type {
      font-size: var(--hec-text-md);
    }
  
    /* Remove drop cap on mobile — too large */
    .hec-content__body > p:first-of-type::first-letter {
      float:   none;
      font-size: inherit;
      margin:  0;
      padding: 0;
      color:   inherit;
    }
  
    .hec-content__body h2 {
      font-size: var(--hec-text-xl);
    }
  
    .hec-content__body h3 {
      font-size: var(--hec-text-lg);
    }
  
    .hec-content__body pre,
    .hec-content__body .wp-block-code {
      padding:   var(--hec-space-4);
      font-size: var(--hec-text-xs);
    }
  }