/* ─────────────────────────────────────────────
   Project-specific styles
   ───────────────────────────────────────────── */

/* Blog details: author byline avatar */
.about-author .avatar-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #3f021f;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
}

/* Blog details: recent posts widget */
.widget-recent-post .latest-post .thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.widget-recent-post .latest-post .title {
    font-size: 14px;
    line-height: 1.4;
}

.widget-recent-post .latest-post .blog-meta li {
    font-size: 12px;
}

/* ─────────────────────────────────────────────
   Blog details: typography for CKEditor 5 output
   The rich-text editor emits real <h1>/<h2>/etc.
   tags. Without scoped rules they take browser/
   Bootstrap defaults (huge). These constrain
   them to readable article sizes.
   ───────────────────────────────────────────── */
.blog-main-content {
    color: #333;
    font-size: 16px;
    line-height: 1.75;
    word-wrap: break-word;
}

.blog-main-content h1 {
    font-size: 2rem;
    margin: 1.8rem 0 1rem;
    line-height: 1.3;
    font-weight: 700;
}

.blog-main-content h2 {
    font-size: 1.6rem;
    margin: 1.6rem 0 0.8rem;
    line-height: 1.3;
    font-weight: 700;
}

.blog-main-content h3 {
    font-size: 1.35rem;
    margin: 1.4rem 0 0.7rem;
    line-height: 1.35;
    font-weight: 600;
}

.blog-main-content h4 {
    font-size: 1.2rem;
    margin: 1.2rem 0 0.6rem;
    line-height: 1.4;
    font-weight: 600;
}

.blog-main-content h5,
.blog-main-content h6 {
    font-size: 1.1rem;
    margin: 1rem 0 0.5rem;
    line-height: 1.4;
    font-weight: 600;
}

.blog-main-content p {
    margin-bottom: 1.1rem;
}

.blog-main-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1rem 0;
}

.blog-main-content ul,
.blog-main-content ol {
    margin-bottom: 1.1rem;
    padding-left: 1.5rem;
}

.blog-main-content li {
    margin-bottom: 0.4rem;
}

.blog-main-content blockquote {
    border-left: 4px solid #3f021f;
    padding: 0.6rem 1rem;
    margin: 1.2rem 0;
    background: #faf6f8;
    font-style: italic;
    color: #555;
}

.blog-main-content a {
    color: #3f021f;
    text-decoration: underline;
}

.blog-main-content table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
}

.blog-main-content table th,
.blog-main-content table td {
    border: 1px solid #e5e5e5;
    padding: 0.6rem 0.8rem;
}

.blog-main-content table th {
    background: #f7f7f7;
    font-weight: 600;
}

.blog-main-content figure {
    margin: 1rem 0;
}

.blog-main-content figure.image img {
    margin: 0;
}

/* ─────────────────────────────────────────────
   Stop horizontal page overflow.
   The theme's popup-mobile-menu inner sits at
   left: -150px (width: 320px) by design while
   hidden. body { overflow-x: hidden } clips it
   on its own context, but html doesn't have the
   same rule, so on some viewport widths the
   document still grows wider than the viewport.
   Adding it on html closes that gap.
   ───────────────────────────────────────────── */
html {
    overflow-x: hidden;
}

/* Conference page: Key Speakers — circular avatars */
.key-speaker-img {
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* ─────────────────────────────────────────────
   Floating social rail (right side, fixed)
   Stacked colored tiles — Facebook / Twitter /
   Instagram / LinkedIn / YouTube. Always visible
   while scrolling on tablet+; hidden on mobile.
   ───────────────────────────────────────────── */
.floating-social {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    will-change: transform;
    z-index: 999;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    /* Only top-left rounded so the conference Register CTA can
       sit flush against the bottom and complete the column. */
    border-radius: 6px 0 0 0;
    overflow: hidden;
}

.floating-social .fs-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #fff !important;
    font-size: 18px;
    text-decoration: none;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.floating-social .fs-item:hover {
    filter: brightness(1.12);
    transform: translateX(-3px);
}

.floating-social .fs-item i {
    color: #fff;
    line-height: 1;
}

/* Brand colors */
.floating-social .fs-facebook  { background: #1877F2; }
.floating-social .fs-twitter   { background: #1DA1F2; }
.floating-social .fs-instagram { background: #9333EA; }
.floating-social .fs-linkedin  { background: #0A66C2; }
.floating-social .fs-youtube   { background: #FF0000; }

/* Mobile: keep visible but smaller tiles */
@media (max-width: 575.98px) {
    .floating-social .fs-item {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ─────────────────────────────────────────────
   Conference page: sticky "Register Now" CTA
   Anchored right edge, sits just below the
   floating social rail (rail = 5 × 48px,
   centered → bottom at 50% + 120px). The class
   only appears on conference.html, so the rule
   is page-scoped automatically.
   ───────────────────────────────────────────── */
.conference-register-cta {
    position: fixed;
    right: 0;
    /* Sits flush against the bottom of the social rail.
       Rail = 5 × 48px = 240px tall, centered on viewport,
       so its bottom edge is at exactly 50% + 120px. */
    top: calc(50% + 120px);
    /* Above the theme's scroll-to-top button (z:10000) so it
       doesn't intercept clicks on mobile where they overlap. */
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: #3f021f;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 0 0 0 6px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.conference-register-cta:hover {
    color: #fff !important;
    filter: brightness(1.12);
    transform: translateX(-3px);
}

.conference-register-cta i {
    font-size: 13px;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .conference-register-cta {
        /* Move to bottom-LEFT on mobile so it doesn't overlap with
           the theme's scroll-to-top button at bottom-right. */
        top: auto;
        right: auto;
        left: 16px;
        bottom: 16px;
        padding: 10px 16px;
        font-size: 13px;
        border-radius: 50px;
    }
}

/* ============================================================
   Announcement bar (homepage)
   ============================================================ */
.iasrm-announce {
    position: relative;
    background: linear-gradient(115deg, #1a0210 0%, #3f021f 45%, #6b0735 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 10px 30px -18px rgba(63, 2, 31, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.iasrm-announce::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 200px at 10% 0%, rgba(255, 196, 132, 0.16), transparent 60%),
        radial-gradient(900px 180px at 90% 100%, rgba(212, 132, 168, 0.18), transparent 60%);
    pointer-events: none;
}

.iasrm-announce__glow {
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 170, 0.12), transparent);
    pointer-events: none;
    animation: iasrmShimmer 7s ease-in-out infinite;
}

@keyframes iasrmShimmer {
    0%   { transform: translateX(0); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateX(350%); opacity: 0; }
}

.iasrm-announce__inner {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 28px;
}

.iasrm-announce__row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    opacity: 0;
    transform: translateY(-8px);
    animation: iasrmRowIn 0.55s cubic-bezier(.2, .9, .25, 1) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 60ms);
    transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.28s ease;
}

.iasrm-announce__row:first-child {
    border-top: none;
}

.iasrm-announce__row--leaving {
    opacity: 0;
    transform: translateY(-6px);
}

@keyframes iasrmRowIn {
    to { opacity: 1; transform: translateY(0); }
}

.iasrm-announce__content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    min-width: 0;
}

.iasrm-announce__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.iasrm-announce__pill--new   { color: #ffd6a5; }
.iasrm-announce__pill--live  { color: #ff8fa3; }
.iasrm-announce__pill--hot   { color: #ffbd6b; }

.iasrm-announce__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: iasrmPulse 1.6s ease-out infinite;
}

@keyframes iasrmPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 200, 140, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 200, 140, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 200, 140, 0); }
}

.iasrm-announce__text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
}

.iasrm-announce__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffd9a8;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding: 4px 2px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.iasrm-announce__cta span {
    background-image: linear-gradient(90deg, #ffb96b, #ffd9a8);
    background-size: 100% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
    padding-bottom: 2px;
}

.iasrm-announce__cta i {
    transition: transform 0.25s ease;
}

.iasrm-announce__cta:hover {
    color: #fff;
}

.iasrm-announce__cta:hover span {
    background-size: 100% 100%;
    color: #3f021f;
    border-radius: 4px;
    padding: 2px 8px;
}

.iasrm-announce__cta:hover i {
    transform: translateX(4px);
}

.iasrm-announce__close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 196, 132, 0.55);
    background: transparent;
    color: #ffd9a8;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    padding: 0;
}

.iasrm-announce__close i {
    font-size: 18px;
    line-height: 1;
}

.iasrm-announce__close:hover {
    background: linear-gradient(135deg, #ffb96b, #ff8fa3);
    color: #3f021f;
    border-color: transparent;
    transform: rotate(90deg) scale(1.05);
}

@media (max-width: 767px) {
    .iasrm-announce__inner {
        padding: 0 18px;
    }
    .iasrm-announce__row {
        align-items: flex-start;
        gap: 12px;
        padding: 12px 0;
    }
    .iasrm-announce__text {
        font-size: 14px;
    }
    .iasrm-announce__cta {
        font-size: 13px;
    }
    .iasrm-announce__pill {
        font-size: 10px;
        padding: 3px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .iasrm-announce__glow,
    .iasrm-announce__dot { animation: none; }
    .iasrm-announce__row { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   Header: highlighted "Join IASRM" CTA
   ============================================================ */
.mainmenu-nav .mainmenu > li.nav-join-iasrm-li {
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.mainmenu-nav .mainmenu > li > a.nav-join-iasrm,
a.nav-join-iasrm {
    display: inline-flex;
    align-items: center;
    background-color: #07a5b3;
    color: #ffffff !important;
    padding: 0 22px;
    height: 38px;
    line-height: 1;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 6px 18px -8px rgba(7, 165, 179, 0.7);
}

.mainmenu-nav .mainmenu > li > a.nav-join-iasrm:hover,
a.nav-join-iasrm:hover {
    background-color: #058d99;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(7, 165, 179, 0.85);
}

/* Hide the theme's dropdown caret on the Join IASRM pill (CTA, not a menu) */
.mainmenu-nav .mainmenu > li.nav-join-iasrm-li.has-droupdown > a::after {
    content: none !important;
}

/* Testimonial: monogram fallback when no client image is uploaded */
.testimonial-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #3f021f;
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    text-transform: uppercase;
}