/**
 * article-single.css  — v3
 * Loads AFTER 'ibm-style' (assets/css/style.css) via functions.php.
 * Only adds or overrides what is specific to the article template.
 * Global rules (heroinnerpages, h1–h4, p colours, ibm-breadcrumb, etc.)
 * are intentionally left to style.css wherever possible.
 */

/* ==========================================================================
   HERO — wrapper carries clip-path; inner section carries background
   ==========================================================================

   WHY A WRAPPER:
   clip-path clips an element strictly within its own box. The triangle tip
   is at polygon point (50%, 100%) = the element's bottom-centre. If the
   next element starts immediately there, the tip appears cut because there
   is no space below the tip for it to "land" visually.

   SOLUTION: .article-hero-wrap gets the clip-path + a large padding-bottom
   so the clipped area includes empty space beneath the content. A matching
   negative margin-bottom pulls the next section up to cover that empty space,
   so there is no gap on the page.

   The inner .article-hero carries the background image (from .heroinnerpages)
   and has its OWN clip-path set to none — the wrapper clips the whole thing.
   ========================================================================== */

.article-hero-wrap {
    /* Square bottom on all screen sizes — no clip-path triangle.
       Simpler, consistent, avoids all the rendering edge cases. */
    clip-path: none;
    -webkit-clip-path: none;
    padding-bottom: 0;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.heroinnerpages.article-hero {
    /*
     * The wrapper (.article-hero-wrap) owns the clip-path polygon.
     * We must remove it from the section itself so the background image
     * fills the full wrapper area and gets clipped by the wrapper.
     *
     * Using the combined selector .heroinnerpages.article-hero gives us
     * higher specificity than .heroinnerpages alone in style.css.
     * !important handles any remaining edge cases.
     */
    clip-path: none !important;
    -webkit-clip-path: none !important;
    /* Content padding — keeps content in the flat zone above the triangle */
    padding-bottom: 60px;
    min-height: 520px;
    /* Ensure background fills the entire wrapper including padded zone */
    background-size: 100% 100% !important;
    background-position: center !important;
}
/* ==========================================================================
   HERO — breadcrumbs: link colour = site blue, not gold
   ========================================================================== */

/*
 * Global .ibm-breadcrumb doesn't define link colour (inherits page context).
 * Inside .heroinnerpages the default a{} would show white or gold.
 * The screenshot from the category page (Image 1) shows the link in blue (#4a90d9 approx).
 * We use the site's standard link-on-dark colour used in the nav/footer: a lightened blue.
 */
.article-hero .ibm-breadcrumb li a {
    /* No colour override — inherit the site global a{} colour so it matches
       other links on the dark hero background (e.g. links in the intro text). */
    text-decoration: none;
    transition: color 0.2s;
}

.article-hero .ibm-breadcrumb li a:hover {
    opacity: 0.8;
}

/* Links inside hero intro — matches global dark-bg link colour #FF5252 */
.article-hero .article-intro a,
.article-hero p a {
    color: #FF5252;
    font-weight: 600;
    text-decoration: none;
}

.article-hero .article-intro a:hover,
.article-hero p a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Current (non-link) crumb — matches global .separator rgba white */
.article-hero .ibm-breadcrumb li:last-child {
    color: rgba(255,255,255,0.75);
}

/* Separator colour already set globally but reinforce here */
.article-hero .ibm-breadcrumb li.separator {
    color: rgba(255,255,255,0.5);
}

/* ==========================================================================
   HERO — paragraph text colour: inherit from global .herosection p
   ========================================================================== */

/*
 * Global: .herosection p { color: rgba(255,255,255,0.5) }
 * Our .heroinnerpages doesn't have a p rule so it falls through to
 *   p { color: #6B7179 }  — which looks grey/dark on the blue bg.
 * Fix: mirror what .herosection p does.
 */
.article-hero p,
.article-hero .article-intro p,
.article-hero .article-intro {
    color: rgba(255,255,255,0.82) !important;
    font-size: 16px;
    line-height: 1.8;
}

/* strong / b / span in hero — gold highlight */
.article-hero strong,
.article-hero b {
    color: #FCC50A !important;
    font-weight: 700;
}

.article-hero p span {
    color: #FCC50A !important;
}

/* ==========================================================================
   HERO — author / date: white, not gold
   ========================================================================== */

.article-author,
.article-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.90) !important;  /* white, not gold */
}

/* Icon accent stays gold (subtle) */
.article-author i,
.article-date i {
    color: rgba(255,255,255,0.65);
    font-size: 13px;
}

/* ==========================================================================
   HERO — image frame (rounded + shadow)
   ========================================================================== */

.article-hero-img-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.10),
        0 0 0 5px rgba(255,195,0,0.14),
        0 10px 36px rgba(0,0,0,0.40);
}

.article-featured-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

/* ==========================================================================
   HERO — tags (coloured pills)
   ========================================================================== */

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.article-tag {
    display: inline-block;
    padding: 5px 18px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.6;
    border: none;
    color: #fff !important;
    opacity: 0.92;
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}

.article-tag:hover {
    opacity: 1;
    transform: translateY(-1px);
    color: #fff !important;
}

/* Three solid colours — same approach as affiliate table tabs */
.tag-colour-1 {
    background: #fcc50a;
    color: #0a0a2a !important;  /* dark text on gold */
}
.tag-colour-1:hover { color: #0023a7 !important; }

.tag-colour-2 {
    background: #b02a37  ;
}

.tag-colour-3 {
    background: #006b6b;
}

/* ==========================================================================
   HERO — decorative divider between meta and intro
   ========================================================================== */

.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-bottom: 0;
}

.article-meta-divider {
    margin: 14px 0 16px;
    height: 2px;
    width: 100%;
    /* Gold gradient — the lovely original design restored */
    background: linear-gradient(
        90deg,
        rgba(252,197,10,0.9) 0%,
        rgba(252,197,10,0.35) 60%,
        transparent 100%
    );
    border-radius: 2px;
    position: relative;
}

.article-meta-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FCC50A;
    box-shadow: 0 0 8px rgba(252,197,10,0.7);
}

/* ==========================================================================
   HERO — hero split layout centering
   ========================================================================== */

.article-hero-split {
    margin-top: 28px;
    align-items: flex-start;
}

.article-hero-image-col,
.article-hero-intro-col {
    padding-top: 4px;
}

/* ==========================================================================
   TABLET  (768px – 991px) — remove clip-path, use rectangular block
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    /* Remove clip-path from wrapper AND section on tablet — straight bottom */
    .article-hero-wrap {
        clip-path: none !important;
        -webkit-clip-path: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Also ensure the inner section's .heroinnerpages clip-path stays off */
    .heroinnerpages.article-hero {
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    /* Narrow the container so content doesn't stretch edge-to-edge */
    .article-hero .container {
        max-width: 700px;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Stack hero columns on tablet too */
    .article-hero-split {
        flex-direction: column;
    }

    .article-hero-image-col,
    .article-hero-intro-col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .article-hero-intro-col {
        margin-top: 20px;
    }
}

/* ==========================================================================
   MAIN ARTICLE BODY — col-md-7 / col-md-5 matching category template exactly
   ========================================================================== */

.article-body-section {
    background: #F2F8FF;
    padding: 0 0 60px;        /* no top padding — matches category template .pt-60 on children */
}

/* ==========================================================================
   ARTICLE CONTENT TYPOGRAPHY
   ========================================================================== */

.article-content {
    max-width: none !important;
    padding: 0 !important;
}

/*
 * H2 in body: global h2 { color: #FFFFFF } — wrong on light bg.
 * Category template .generaldetails h2 / .heading h2 don't set a dark colour
 * explicitly either; they rely on section-level overrides.
 * We match what the category page visually shows: dark navy text, NO left bar.
 * Left bar (gold) is H3-only per global style.css.
 */
.article-content h2 {
    font-size: 26px;
    line-height: 34px;
    font-weight: 700;
    color: #0A0A0A;           /* dark, matches category page heading colour */
    margin-top: 40px;
    margin-bottom: 16px;
    border-left: none;        /* no gold bar on H2 — H3 only per global */
    padding-left: 0;
}

/* H2 span highlight — gold (for 1–2 word emphasis) */
.article-content h2 span {
    color: #FCC50A;
}

/*
 * H3: the global .heroinnerpages h3 has the gold bar.
 * In the body (light bg) we apply the same visual — gold left bar, dark text.
 */
.article-content h3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #053A81;
    margin-top: 32px;
    margin-bottom: 12px;
    border-left: 4px solid #FFC300;  /* gold bar — H3 only, per global */
    padding-left: 12px;
}

.article-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-top: 26px;
    margin-bottom: 10px;
}

.article-content p {
    /* colour intentionally not set — inherits global p { color: #6B7179 } */
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 18px;
}

/* Body highlights: strong/b = burnt orange, span = burnt orange */
.article-content strong,
.article-content b {
    color: #b33f00;
    font-weight: 700;
}

.article-content p > span {
    color: #b33f00;
}

/* ==========================================================================
   LISTS — ibm-list / ibm-ol — black bullets, not gold
   ========================================================================== */

.article-content ul,
.article-content ul.ibm-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 20px;
}

.article-content ul li,
.article-content ul.ibm-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 9px;
    font-size: 16px;
    line-height: 1.8;
    /* colour inherits global p { color: #6B7179 } */
}

/* Black/dark bullet — NOT gold */
.article-content ul li::before,
.article-content ul.ibm-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6B7179;
}

.article-content ol,
.article-content ol.ibm-ol {
    padding-left: 22px;
    margin: 0 0 20px;
    list-style: decimal;
}

.article-content ol li,
.article-content ol.ibm-ol li {
    margin-bottom: 9px;
    font-size: 16px;
    line-height: 1.8;
    /* colour inherits global p { color: #6B7179 } */
    padding-left: 4px;
}

/* ==========================================================================
   LINKS, IMAGES, BLOCKQUOTE
   ========================================================================== */

.article-content a {
    /* No colour set — inherits browser default, same as global site links */
    text-decoration: none;
}

.article-content a:hover {
    text-decoration: none;
}

.article-content img {
    max-width: 100%;
    border-radius: 10px;
    margin: 20px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.article-content blockquote {
    border-left: 5px solid #FCC50A;
    background: #fffde7;
    margin: 24px 0;
    padding: 14px 18px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #4a3c00;
}

/* ==========================================================================
   SIDEBAR — exactly col-md-7 / col-md-5 as in category template
   ========================================================================== */

/*
 * The category template uses: col-md-7 (content) / col-md-5 (sidebar).
 * Our single-article.php now mirrors this exactly.
 * No additional width overrides needed here — Bootstrap handles it.
 * We just ensure bettingcardswrapper matches the category template.
 */
.article-sidebar .bettingcardswrapper {
    max-width: 510px;           /* matches global .bettingcardswrapper max-width */
    padding-top: 60px;          /* matches .pt-60 used in category template */
}

/* ==========================================================================
   DISCLAIMER — prominent yellow block + red standing bar
   ========================================================================== */

.article-disclaimer-section {
    background: #F2F8FF;
    padding: 10px 0 48px;
}

.article-disclaimer {
    display: flex;
    align-items: stretch;
    background: #FFF8DC;
    border: 1.5px solid #FFD600;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 16px rgba(255,214,0,0.20);
}

.article-disclaimer-bar {
    width: 7px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #E53935 0%, #b33f00 100%);
}

.article-disclaimer-text {
    padding: 18px 20px;
    font-size: 13.5px;
    line-height: 1.75;
    color: #4a3800;
    font-family: 'Sora', sans-serif;
}

.article-disclaimer-text strong {
    color: #E53935;
    font-weight: 700;
}

/* ==========================================================================
   RELATED ARTICLES
   ========================================================================== */

.article-related-section {
    background: #F2F8FF;
    padding: 60px 0;
}

.article-related-section .heading h2 {
    color: #0A0A0A;
    margin-bottom: 36px;
}

.article-related-section .heading h2 span {
    color: #FCC50A;
}

.article-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.article-related-card {
    display: block;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.article-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}

.article-related-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.article-related-title {
    padding: 14px 16px;
}

.article-related-title h4 {
    font-size: 15px;
    line-height: 1.45;
    color: #0A0A0A;
    margin: 0;
    font-weight: 600;
}

.article-related-carousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 12px;
}

.article-related-carousel::-webkit-scrollbar        { height: 4px; }
.article-related-carousel::-webkit-scrollbar-thumb  { background: #FCC50A; border-radius: 2px; }

.article-related-carousel .article-related-card {
    min-width: 240px;
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* ==========================================================================
   MOBILE  (< 768px)
   ========================================================================== */

@media (max-width: 767px) {

    /* Remove clip-path on mobile — flat square bottom, same as tablet */
    .article-hero-wrap {
        clip-path: none !important;
        -webkit-clip-path: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .heroinnerpages.article-hero {
        clip-path: none !important;
        -webkit-clip-path: none !important;
        padding-bottom: 40px;
        min-height: 0;
    }

    .article-hero-split { flex-direction: column; }

    .article-hero-image-col,
    .article-hero-intro-col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .article-hero-intro-col { margin-top: 20px; }

    .article-tags { justify-content: flex-start; }

    .article-hero .ibm-breadcrumb li { font-size: 12px; }

    .article-hero h1 {
        font-size: clamp(26px, 7vw, 44px);
        line-height: 1.2;
    }

    .article-disclaimer-text { font-size: 13px; padding: 14px 14px; }
}

/* ==========================================================================
   AUTHOR INFO BOX — Blue Glassmorph (Gold Name + Loser Text Colour)
   ========================================================================== */

.article-author-box {
    background:
        linear-gradient(148deg, #3f5580 0%, #324470 30%, #283a62 60%, #2e4268 100%);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);

    border: 1px solid rgba(0,0,0,0.65); /* מסגרת שחורה דקה */
    border-radius: 20px;

    padding: 32px 34px;
    margin-top: 40px;

    box-shadow:
        0 6px 18px rgba(0,0,0,0.45),
        inset 0 0 1px rgba(255,255,255,0.25);

    /* טקסט מרכזי כמו הקבוצה המפסידה ב-final */
    color: #c0cce8;
}

/* Label */
.article-author-box-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e6ebf5;
    margin-bottom: 12px;
}

/* Name — זהב כמו המנצח ב-final */
.article-author-box-name {
    font-size: 25px;
    font-weight: 700;
    padding-left: 20px;
    position: relative;
    color: #fcc50a; /* זהב נקי */
    text-shadow: 0 1px 4px rgba(252,197,10,0.35); /* glow עדין */
}

/* קו אנכי אדום דהוי */
.article-author-box-name::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    background: #b02a37; /* אדום דהוי */
    border-radius: 4px;
}

/* Bio — צבע המפסידה ב-final */
.article-author-box-bio {
    font-size: 17px;
    line-height: 1.85;
    color: #c0cce8;
}

/* FORCE BIO TEXT TO LOSER FINAL COLOUR */
.article-author-box-bio p {
    color: #c0cce8 !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
}