:root {
    --brand-color: #00bfa6; /* Bright Green */
    --brand-hover-color: #1ce3c0;
    --line-height-unit: 1;
}

::selection{
  background: rgba(0, 191, 166, 0.28); /* your #00bfa6 but softened */
  color: #0a0a0a;
  text-shadow: none;
}
::-moz-selection{
  background: rgba(0, 191, 166, 0.28);
  color: #0a0a0a;
  text-shadow: none;
}

.text-green {
  color: var(--brand-color);
}

/* Disable sticky on small screens */
@media (max-width: 767.98px) {
    .sn-top-nav.sticky-top {
        position: static !important;
        top: auto !important;
    }
}

header.masthead {
    padding-top: 8.5rem;
    padding-bottom: 5rem;
}

.btn-width-mobile-75 {
    width: 75%;
}

@media (min-width: 768px) { /* match your Bootstrap md breakpoint */
    .btn-width-mobile-75 {
        width: auto;
    }
}

footer h5 a:hover {
  color: var(--brand-color);
  text-decoration: none;
}

a:hover {
    text-decoration: none; /* Removes underline */
    color: #2cae86; /* Slightly brighter or darker teal shade for a gentle effect */
}

/* OPTION A - Crisp & Professional */

body {
  font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6, .masthead-heading,
.page-section h3.section-subheading,
header.masthead .masthead-subheading {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.btn {
  font-family: 'Poppins', sans-serif;
}

/* Utility: gray border button (used elsewhere too) */
.btn-gray-border {
  border: 2px solid #6c757d;
}

#myVideo {
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
}

/* SM Small Device :320px. */
@media only screen and (min-width: 320px) and (max-width: 1024px) {
  #myVideo {
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
  } 
}

.btn {
  box-shadow: 0 0 0 0.2rem #00bfa6 !important;
}

.btn-black {
  background-color: black;
  color: white;
}

.btn-green {
  background-color: #00bfa6;
  color: black !important;
}

.btn-green:hover, .btn-green:focus {
  background-color: var(--brand-hover-color);
  color: black !important;
}

.btn-black:hover {
  color: #00bfa6;
}

.container.cover-img {
  background-color: rgba(0, 247, 216, 0.8);
  width: 100%;
  height: 100%;
}

a {
  color: var(--brand-color);
}

.text-pink {
  color: deeppink;
}

.amcharts-export-menu.amcharts-export-menu-top-right.amExportButton {
  display: none;
}

.card-header {
  background-color: white;
}

ion-icon {
  font-size: 20px;
}

.loader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(../img/loading-2.gif) 50% 50% no-repeat #f9f9f9;
  opacity: 1;
}

@media only screen and (max-width : 768px) {
  .content {
    bottom: 50%;
  }            
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px)  and (max-width : 1024px) {
  /* Styles */
  .page-section {
    padding: 2rem 0;
  }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {
  /* Styles */
  .page-section {
    padding: 2rem 0;
  }
}


/* Line height for typographic readability */

body {
  line-height: calc(var(--line-height-unit) * 1.4);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  line-height: calc(var(--line-height-unit) * 1.296) !important;
}

.modal-body h1,
.modal-body h2,
.modal-body h3,
.modal-body h4,
.modal-body h5,
.modal-body h6,
.modal-body .h1,
.modal-body .h2,
.modal-body .h3,
.modal-body .h4,
.modal-body .h5,
.modal-body .h6 {
  line-height: calc(var(--line-height-unit) * 1.22);
}

p {
  line-height: calc(var(--line-height-unit) * 1.4);
}

:focus-visible {
    outline: 2px solid #3800ff;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Global safe override */
button:focus-visible,
a:focus-visible,
.nav-link-button:focus-visible {
    outline: 2px solid #3800ff !important;
    outline-offset: 3px;
    box-shadow: none;
}

/* Search result cards */
.sn-search-card {
    border-radius: 10px;
}

/* Meta bar with favicon + text */
.sn-search-meta {
    font-size: 0.82rem;
    color: #6c757d;
}

/* Tiny favicon */
.sn-favicon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
    object-fit: contain;
    margin-right: 4px;
}

a.search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    text-decoration: none;
    line-height: 1; /* avoid inherited tall line-height */
}

a.search-button:hover {
    background: #e7e7e7;
}

span.right-view {
    float: right;
}

span#hash-icons {
    background: white;
    padding: 1px 4px 0 4px;
    border-radius: 4px;
}

.introjs-bullets {
    display: none;
}

.introjs-helperLayer {
    border: 1px solid rgb(255 255 255 / 87%) !important;
}

/*
.introjs-overlay {
    opacity: .85 !important;
}
*/

.introjs-tooltiptext {
    font-size: 15px;
    line-height: calc(var(--line-height-unit) * 1.4) !important;
}

.custom-highlight {
    background-color: transparent !important;
    opacity: 1 !important;
    box-shadow:
        0 0 0 9999px rgba(0, 0, 0, 0.65),  /* dim the page */
        0 0 18px rgba(25, 135, 84, 0.85) !important;  /* inner glow */
    /* animation: introPlayPulse 1.5s ease-in-out infinite; */
}




.scroll-article-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.scroll-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* or use your brand accent color lightly */
}

/* Specific flavors if you want subtle differences */
.scroll-badge-deep-dive {
    /* maybe slightly stronger border or background */
}

.scroll-badge-high-signal-publisher {
    /* maybe a little icon via ::before later */
}


.scroll-history-card {
    /* position: relative; */
    /* your existing card styles */
}

.scroll-card-high-signal {
    border: 1px solid rgba(0, 200, 255, 0.7);  /* use your accent color */
    box-shadow: 0 0 0 1px rgba(0, 200, 255, 0.3);
}

/* Badge container */
.scroll-article-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.35rem;
}

/* Base badge */
.scroll-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

/* Make THIS one really visible */
.scroll-badge-high-signal-publisher {
    /* position: absolute; */
    top: 0.5rem;
    right: 0.6rem;

    background: rgb(0 200 255);                /* soft fill */
    border: 1px solid rgba(0, 200, 255, 0.9);  /* strong edge */
    color: rgb(255 255 255);
    font-weight: 600;

    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

a.scroll-badge-high-signal-publisher:hover {
    color: rgb(220 245 255);
}

/* Deep Dive badge – inline, more analytical vibe */
.scroll-badge-deep-dive {
    background: rgba(120, 80, 255, 0.8);          /* soft indigo wash */
    border: 1px solid rgba(120, 80, 255, 0.7);    /* defined edge */
    color: rgb(255, 255, 255);                      /* readable text */
    font-weight: 600;

    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

a.scroll-badge-deep-dive:hover {
    color: rgb(220 245 255);
}

.italic {
    font-style: italic;
}

.btn-outline-secondary {
    border-color: transparent;
}

.sn-categories-strip{
  margin-top: 10px;
}

.sn-categories-title{
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.sn-categories-pills{
  flex-wrap: wrap;
  gap: 8px;
}

.sn-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 21px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-decoration: none;
    line-height: 1;
    font-size: 13px;
}

.sn-pill:hover{
  border-color: rgba(255,255,255,0.3);
}

.sn-pill-active{
  border-color: rgba(255,255,255,0.6);
}

a.nlp-chip.nlp-chip-entity:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

a.nlp-chip.nlp-chip-topic:hover {
    background: rgba(0, 200, 140, 0.5) !important;
}

.loading-overlay{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.82); z-index:2000; backdrop-filter:saturate(120%) blur(2px);
}

.loading-spinner{
    width:48px; height:48px; border:4px solid #e5e7eb; border-top-color:#0d6efd;
    border-radius:50%; animation:spin 1s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .loading-spinner{animation:none} }


.btn {
    /* box-shadow: 0 0 0 0.14rem var(--brand-color) !important; */
    box-shadow: none !important;
}

.analyze-btn {
    box-shadow: 0 0 0 0.14rem var(--brand-color-break) !important;
}

.analyze-btn:hover {
    background: #00bfa6;
}

.browse-btn {
    color: var(--dark);
    box-shadow: 0 0 0 0.14rem var(--brand-color-break) !important;
}

.browse-btn:hover {
    color: white;
}

.analyze-btn,
.browse-btn {
    width: 150px;
}

#browseNewsModal p.card-text {
    font-size: 14px;
}

.card-img-top.news-modal {
    height: 230px;
    object-fit: cover;
}

footer .btn:not(.analyze-btn, .browse-btn) {
    box-shadow: 0 0 0 2px #00bfa6 !important;
}

/* Footer styling (global footer component) */

footer.footer {
  background: white;
}

footer .text-lg-right a {
  color: #00bfa6;
}

footer .text-lg-right a:hover {
  color: black;
}

.browse-card-btn-col {
  padding-left: .15rem;
  padding-right: .15rem;
}