/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

.section-intro {
	position: relative;	
}

#g-intro { position: relative; }

.g-date {
	position: absolute; 
	top: 40px; 
	right: 20px; 
	z-index: 9999;
}

/* Owl Carousel — desktop only */
@media (min-width: 1200px) {
.home-owl {
    padding-top: 100px !important;
    background-size: 150%;
    background-position: center 70%;
    max-height: 700px;
    overflow: hidden;
    background-size: cover;
    background-position: center 70%;  
  }
}


/* Scroll-down arrow */
.scroll-down {
    display: inline-block;
    font-size: 48px;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    animation: bounce 2s infinite;
}


#g-navigation {
    background-image: url('/user/custom/images/nav-background.jpg') !important;
    background-position: center !important;   /* center the image */
    background-repeat: no-repeat !important;  /* avoid tiling */
}

.g-standard {
    background: rgba(20, 20, 20, 0.5) !important; /* white with 70% opacity */
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 4px !important;
    padding-bottom: 0px !important;
}

.g-offcanvas-toggle {
    color: #000;
}

span.fa {
    color: rgba(0, 0, 0, 0.9) !important;
}    

#g-mainbar .g-content {
    background: rgba(255, 255, 255, 0.2); /* lighter than outside */
    padding: 20px;
    border-radius: 8px;
}

#g-intro {
    margin-top: -55px;
}

.search-wrapper {
    margin-top: 10px !important;   /* vertically aligns everything */
}


/* --------------------------------------------- */
/* MOBILE FIXES: Keep Logo + Social side-by-side */
/* --------------------------------------------- */

.sc-columns > div {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
}

.sc-columns p:first-child {
    margin-top: 0;
}

.sc-columns {
    padding-top: 1em
}


@media (max-width: 767px) {

    .search-box {
        display: none !important;
    }

    .sc-columns {
        columns: 1 !important;
    }

    /* Keep navigation row horizontal */
    #g-navigation .g-grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }

    .g-logo {
        margin-top:-14px;
        margin-bottom: -14px
    }
    .g-social {
        margin-top:-6px;
        margin-bottom: -6px
    }
}

/* ------------------------------------------
   Improved Article Typography for Helium
   ------------------------------------------ */

/* Headings: reduce excessive spacing */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0.2rem;
    margin-bottom: 0.6rem;
    line-height: 1.0;
}

/* Optional: even tighter control per level */
h1 { margin-top: 1.0rem; margin-bottom: 0.1rem; }
h2 { margin-top: 0.1rem; margin-bottom: 0.1rem; }
h3 { margin-top: 0.8rem; margin-bottom: 0.1rem; }

/* Paragraphs: cleaner spacing + better readability */
p {
    margin-top: 0.4rem;
    margin-bottom: 0.9rem;
    line-height: 1.2;
    color: #222;
}

/* Easy text color utility classes */
.text-red    { color: #c0392b; }
.text-blue   { color: #2980b9; }
.text-green  { color: #27ae60; }
.text-gold   { color: #c9a646; }
.text-muted  { color: #777; }

/* Images inside articles: scale nicely and center */
.article-content img,
.g-content img,
p img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.5rem auto;
}

/* Bootstrap-based column spacing (for [div class="row"]) */
.row > [class*="col-"] {
    margin-bottom: 1.2rem;
}

@media (min-width: 768px) {
    .row > [class*="col-"] {
        margin-bottom: 0;
    }
}

/* Lead paragraph style for intros */
.p-lead {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 1.2rem;
}

.bs-box {
  display: inline-block;      /* keeps it inline but allows padding */
  padding: 2px 6px;           /* compact box */
  border: 1px solid #000;     /* thin border */
  border-radius: 4px;         /* soft corners */
}

h3 span {
  display: inline-block;
  background: #DFB373;
  padding: 3px 8px;
  border: 1px solid #b98f4f;   /* slightly darker border for contrast */
  border-radius: 4px;
  color: #000;
  line-height: 1.2;
}

.bs-mark {
  display: inline-block;
  background: #DFB373;
  padding: 3px 8px;
  border: 1px solid #b98f4f;   /* slightly darker border for contrast */
  border-radius: 4px;
  color: #000;
  line-height: 1.2;
}

.sc-notice span {
  color: #8B0000;
}

.sc-notice a {
    color: #000;
    text-decoration: underline;
}

.page-content-bg {
    background: url('/user/pages/03.contacts/Masks.png') no-repeat center center;
    background-size: cover;
    padding: 2rem; /* optional */
    border-radius: 8px; /* optional */
}