/* ==========================================================
   1. Base Layout & Typography
   ========================================================== */






body, .main-container {
    background-color: #ffffff !important;
    color: #1d1d1f; /* Apple's dark grey for text */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Apple-style Link Color Customization */
a {
    color: #009688 !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover, a:focus {
    color: #00695c;
    text-decoration: underline;
}


/* If viewing the node as a full page, ensure the homepage link wrapper is totally hidden */
.node--view-mode-full .homepage-only-link,
body:not(.path-frontpage) .homepage-only-link {
    display: none !important;
}


.links.inline {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.links.inline li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    margin: 50px 0px;
    border-radius: 50rem;
    background: var(--bs-light);
    color: var(--bs-secondary-color);
    font-size: .875rem;
    font-weight: 500;
}

.links.inline li::before {
    content: "👁";
    margin-right: .4rem;
}


/* ==========================================================
   Eyerys - Pager (Bootstrap5 + Drupal hybrid classes)
   ========================================================== */

ul.pagination.js-pager__items {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 48px auto !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: wrap !important;

    --bs-pagination-padding-x: 0 !important;
    --bs-pagination-padding-y: 0 !important;
    --bs-pagination-border-width: 0 !important;
    --bs-pagination-border-color: transparent !important;
    --bs-pagination-border-radius: 9999px !important;
    --bs-pagination-bg: #eeeeee !important;
    --bs-pagination-color: #666666 !important;
    --bs-pagination-hover-bg: #e0e0e0 !important;
    --bs-pagination-hover-color: #666666 !important;
    --bs-pagination-hover-border-color: transparent !important;
    --bs-pagination-active-bg: #009688 !important;
    --bs-pagination-active-color: #ffffff !important;
    --bs-pagination-active-border-color: transparent !important;
    --bs-pagination-disabled-bg: #eeeeee !important;
    --bs-pagination-disabled-color: #bbbbbb !important;
    --bs-pagination-disabled-border-color: transparent !important;
    --bs-pagination-focus-box-shadow: none !important;
}

ul.pagination.js-pager__items .page-item {
    margin: 0 !important;
}

ul.pagination.js-pager__items .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 10px !important;
    border-radius: 9999px !important;
    border: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: #666666 !important;
    background-color: #eeeeee !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

ul.pagination.js-pager__items .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: #e0e0e0 !important;
    color: #666666 !important;
}

ul.pagination.js-pager__items .page-item.active .page-link,
ul.pagination.js-pager__items .page-item.is-active .page-link {
    background-color: #009688 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: none !important;
}

ul.pagination.js-pager__items .pager__item--previous .page-link,
ul.pagination.js-pager__items .pager__item--next .page-link,
ul.pagination.js-pager__items .pager__item--first .page-link,
ul.pagination.js-pager__items .pager__item--last .page-link {
    padding: 0 16px !important;
    font-weight: 600 !important;
    color: #666666 !important;
    background-color: #eeeeee !important;
}

ul.pagination.js-pager__items .pager__item--previous .page-link:hover,
ul.pagination.js-pager__items .pager__item--next .page-link:hover,
ul.pagination.js-pager__items .pager__item--first .page-link:hover,
ul.pagination.js-pager__items .pager__item--last .page-link:hover {
    background-color: #e0e0e0 !important;
    color: #666666 !important;
}

ul.pagination.js-pager__items .page-item.disabled .page-link {
    color: #bbbbbb !important;
    background-color: #eeeeee !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
}

ul.pagination.js-pager__items .page-link:focus {
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.25) !important;
    outline: none !important;
}

p {
    line-height: 2;
}

/* Mobile */
@media (max-width: 768px) {
    ul.pagination.js-pager__items {
        gap: 2px !important;
    }

    ul.pagination.js-pager__items .page-link {
        min-width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    ul.pagination.js-pager__items .pager__item--first,
    ul.pagination.js-pager__items .pager__item--last {
        display: none !important;
    }
}


.pager__item--last {
    display: none !important;
}

.gin--navigation .gin-secondary-toolbar--frontend {
    position: fixed !important;
    inset: 0 0 auto 0 !important; /* top right bottom left — replaces top/left/right individually */
    width: 100% !important;
    margin-inline-start: 0 !important;
    margin: 0 !important;
    z-index: 9998 !important;
    transform: translateY(-100%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

body.gin-drawer-open .gin-secondary-toolbar--frontend {
    transform: translateY(0) !important;
}


/* ==========================================================
   EYERYS - TRENDING NOW
   ========================================================== */

#block-lumiris-views-block-trending-now-block-1 {
    background:#fff;
    margin-bottom:40px;
}

/* ----------------------------------------------------------
   Heading
---------------------------------------------------------- */

#block-lumiris-views-block-trending-now-block-1 h2 {
    margin:0 0 30px;
    font-size:2rem;
    font-weight:800;
    letter-spacing:-.04em;
    color:#111;
}

/* ----------------------------------------------------------
   Numbering
---------------------------------------------------------- */

#block-lumiris-views-block-trending-now-block-1 .view-content {
    counter-reset:trend;
}

#block-lumiris-views-block-trending-now-block-1 .views-row {
    counter-increment:trend;
    display:grid;
    grid-template-columns:
        42px
        1fr
        64px;
    grid-template-areas:
        "number title image"
        "number meta image";
    column-gap:18px;
    row-gap:8px;
    align-items:start;
    padding:22px 0;
    border-bottom:1px solid #ececec;
    transition:.25s;
}

#block-lumiris-views-block-trending-now-block-1 .views-row:last-child {
    border-bottom:none;
}

#block-lumiris-views-block-trending-now-block-1 .views-row:hover {
    transform:translateX(6px);
}

/* ----------------------------------------------------------
   Number
---------------------------------------------------------- */

#block-lumiris-views-block-trending-now-block-1 .views-row::before {
    grid-area:number;
    content:counter(trend, decimal-leading-zero);
    font-size:1.55rem;
    font-weight:700;
    color:#9f9f9f;
    line-height:1;
}

/* ----------------------------------------------------------
   TITLE
---------------------------------------------------------- */

#block-lumiris-views-block-trending-now-block-1 .views-field-title {
    grid-area:title;
    margin:0;
}

#block-lumiris-views-block-trending-now-block-1 .views-field-title a {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    overflow:hidden;
    min-height:2.9em;
    font-size:1.05rem;
    font-weight:700;
    line-height:1.45;
    color:#111;
    text-decoration:none;
    transition:.2s;
}

#block-lumiris-views-block-trending-now-block-1 .views-row:hover .views-field-title a {
    color:#009688;
}

/* ----------------------------------------------------------
   DATE / READTIME
---------------------------------------------------------- */

#block-lumiris-views-block-trending-now-block-1 .views-field-created {
    grid-area:meta;
    margin:0;
    font-size:.86rem;
    color:#888;
}

#block-lumiris-views-block-trending-now-block-1 .views-field-created::after {
    content:" • 6 min read";
    color:#999;
}

/* ----------------------------------------------------------
   IMAGE
---------------------------------------------------------- */

#block-lumiris-views-block-trending-now-block-1 .views-field-field-news-image {
    grid-area:image;
    width:64px;
    height:64px;
    margin:0;
}

#block-lumiris-views-block-trending-now-block-1 .views-field-field-news-image .field-content {
    width:100%;
    height:100%;
}

#block-lumiris-views-block-trending-now-block-1 .views-field-field-news-image img {
    display:block;
    width:64px;
    height:64px;
    object-fit:cover;
    border-radius:14px;
    transition:.25s;
}

#block-lumiris-views-block-trending-now-block-1 .views-row:hover img {
    transform:scale(1.05);
}

#block-lumiris-views-block-trending-now-block-1 .img-fluid {
    width:64px;
    height:64px;
    max-width:none;
}

/* ----------------------------------------------------------
   LINKS
---------------------------------------------------------- */

#block-lumiris-views-block-trending-now-block-1 a {
    text-decoration:none;
}

/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width:768px){

#block-lumiris-views-block-trending-now-block-1 .views-row {
    grid-template-columns:
        36px
        1fr
        54px;
    column-gap:14px;
}

#block-lumiris-views-block-trending-now-block-1 .views-field-field-news-image {
    width:54px;
    height:54px;
}

#block-lumiris-views-block-trending-now-block-1 .views-field-field-news-image img {
    width:54px;
    height:54px;
}

#block-lumiris-views-block-trending-now-block-1 h2 {
    font-size:1.7rem;
}

}

   
   /* ==========================================================
   Homepage Headlines Block
   ========================================================== */

#block-lumiris-views-block-headlines-block-1 {
    position: relative !important;

    width: 360px;
    max-width: 100%;

    margin-left: auto !important;
    margin-right: 40px !important;

    /* Pull the block upward so it sticks to the hero */
    margin-top: -540px !important;
    margin-bottom: 40px !important;

    z-index: 100 !important;

    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(30px) saturate(220%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(30px) saturate(220%) brightness(1.08) !important;

    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 24px !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;

    overflow: hidden;
}

#block-lumiris-views-block-headlines-block-1 {
    /* Liquid Glass Base Layers */
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
        position: absolute !important;
    /* Premium Rounded Box Geometry */
    border-radius: 22px !important; /* Authentic Apple corner radius ratio */
    border: 1px solid rgba(255, 255, 255, 0.45) !important; /* Liquid glass rim reflection */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05), 
                0 1px 3px rgba(0, 0, 0, 0.02) !important;
    
    /* Layout & Box Sizing */
    padding: 28px !important;
    margin-bottom: 40px;
    box-sizing: border-box;
}

/* ----------------------------------------------------------
   Heading
---------------------------------------------------------- */

#block-lumiris-views-block-headlines-block-1 h2 {
    margin: 0 0 24px;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #1d1d1f; /* Apple standard dark neutral charcoal text */
}

/* ----------------------------------------------------------
   Numbering Matrix
---------------------------------------------------------- */

#block-lumiris-views-block-headlines-block-1 .view-content {
    counter-reset: trend;
}

#block-lumiris-views-block-headlines-block-1 .views-row {
    counter-increment: trend;
    display: grid;
    grid-template-columns: 36px 1fr 56px;
    grid-template-areas:
        "number title image"
        "number meta image";
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* Clean, subtle frosted divider */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
}

#block-lumiris-views-block-headlines-block-1 .views-row:first-child {
    padding-top: 0;
}

#block-lumiris-views-block-headlines-block-1 .views-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Smooth Apple-like physics hover glide */
#block-lumiris-views-block-headlines-block-1 .views-row:hover {
    transform: translateX(4px);
}

/* ----------------------------------------------------------
   Dynamic Number Index
---------------------------------------------------------- */

#block-lumiris-views-block-headlines-block-1 .views-row::before {
    grid-area: number;
    content: counter(trend, decimal-leading-zero);
    font-size: 1.35rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.25); /* Subtle integrated tracking text node color */
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* ----------------------------------------------------------
   Title Typography
---------------------------------------------------------- */

#block-lumiris-views-block-headlines-block-1 .views-field-title {
    grid-area: title;
    margin: 0;
}

#block-lumiris-views-block-headlines-block-1 .views-field-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.8em;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1f;
    text-decoration: none;
    transition: color 0.2s ease;
}

#block-lumiris-views-block-headlines-block-1 .views-row:hover .views-field-title a {
    color: #00695c; /* Crisp Apple system link interaction blue */
}

/* ----------------------------------------------------------
   Metadata & Readtime
---------------------------------------------------------- */

#block-lumiris-views-block-headlines-block-1 .views-field-created {
    grid-area: meta;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: #86868b; /* Apple muted gray metadata tint */
}

#block-lumiris-views-block-headlines-block-1 .views-field-created::after {
    content: " • 5 min read";
    color: #a1a1a6;
}

/* ----------------------------------------------------------
   Frosted Media Thumbnail Image
---------------------------------------------------------- */

#block-lumiris-views-block-headlines-block-1 .views-field-field-news-image {
    grid-area: image;
    width: 56px;
    height: 56px;
    margin: 0;
}

#block-lumiris-views-block-headlines-block-1 .views-field-field-news-image .field-content {
    width: 100%;
    height: 100%;
}

#block-lumiris-views-block-headlines-block-1 .views-field-field-news-image img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 12px; /* Proportional nested clipping bounds */
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

#block-lumiris-views-block-headlines-block-1 .views-row:hover img {
    transform: scale(1.04);
}

#block-lumiris-views-block-headlines-block-1 .img-fluid {
    width: 56px;
    height: 56px;
    max-width: none;
}


/* ==========================================================
   EYERYS - FRESH UPDATES
   ========================================================== */

#block-lumiris-views-block-fresh-updates-block-1{

    margin-bottom:40px;

}

#block-lumiris-views-block-fresh-updates-block-1 h2{

    margin:0 0 28px;

    font-size:2rem;

    font-weight:800;

    letter-spacing:-.04em;

    color:#111;

}

/* ---------------------------------------------------------- */

#block-lumiris-views-block-fresh-updates-block-1 .views-row{

    display:grid;

    grid-template-columns:42px 1fr;
column-gap:18px;

    gap:18px;

    align-items:start;

    padding:20px 0;

    border-bottom:1px solid #ececec;

    transition:.25s;

}

#block-lumiris-views-block-fresh-updates-block-1 .views-row:last-child{

    border-bottom:none;

}

#block-lumiris-views-block-fresh-updates-block-1 .views-row:hover{

    transform:translateX(5px);

}

/* ----------------------------------------------------------
   IMAGE
---------------------------------------------------------- */

#block-lumiris-views-block-fresh-updates-block-1 .views-field-field-news-image{

    width:72px;

    height:72px;

}

#block-lumiris-views-block-fresh-updates-block-1 .views-field-field-news-image img{

    display:block;

    width:72px;

    height:72px;

    object-fit:cover;

    border-radius:16px;

    transition:.25s;

}

#block-lumiris-views-block-fresh-updates-block-1 .views-row:hover img{

    transform:scale(1.04);

}

/* ----------------------------------------------------------
   TITLE
---------------------------------------------------------- */

#block-lumiris-views-block-fresh-updates-block-1 .views-field-title{

    margin-bottom:8px;

}

#block-lumiris-views-block-fresh-updates-block-1 .views-field-title a{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    min-height:2.9em;

    font-size:1.1rem;

    line-height:1.45;

    font-weight:700;

    color:#111;

    text-decoration:none;

    transition:.2s;

}

#block-lumiris-views-block-fresh-updates-block-1 .views-row:hover .views-field-title a{

    color:#6C4CF1;

}

/* ----------------------------------------------------------
   UPDATED DATE
---------------------------------------------------------- */

#block-lumiris-views-block-fresh-updates-block-1 .views-field-created{

    margin-top:4px;

    font-size:.86rem;

    color:#888;

}

#block-lumiris-views-block-fresh-updates-block-1 .views-field-created::before{

    content:"↻ Updated ";

    font-weight:600;

    color:#666;

}

/* ---------------------------------------------------------- */

#block-lumiris-views-block-fresh-updates-block-1 a{

    text-decoration:none;

}

/* ---------------------------------------------------------- */

@media (max-width:768px){

#block-lumiris-views-block-fresh-updates-block-1 .views-row{

    grid-template-columns:60px 1fr;

}

#block-lumiris-views-block-fresh-updates-block-1 .views-field-field-news-image{

    width:60px;

    height:60px;

}

#block-lumiris-views-block-fresh-updates-block-1 .views-field-field-news-image img{

    width:60px;

    height:60px;

}

#block-lumiris-views-block-fresh-updates-block-1 h2{

    font-size:1.7rem;

}

}


/* ===========================================================
   EYERYS - FRESH UPDATES
   =========================================================== */

#block-lumiris-views-block-fresh-updates-block-1{
    margin:3rem 0;
}

/* Heading */
#block-lumiris-views-block-fresh-updates-block-1 h2{
    font-size:2rem;
    font-weight:700;
    color:#111;
    letter-spacing:-0.03em;
    margin:0 0 1.75rem;
}

/* Reset numbering */
#block-lumiris-views-block-fresh-updates-block-1 .view-content{
    counter-reset:fresh;
}

/* Each article */
#block-lumiris-views-block-fresh-updates-block-1 .views-row{
    counter-increment:fresh;

    display:grid;
    grid-template-columns:42px 72px 1fr;
    grid-template-areas:
        "number image title"
        "number image date";

    column-gap:18px;
    row-gap:8px;

    align-items:start;

    padding:18px 0;
    border-bottom:1px solid #ececec;

    transition:.25s ease;
}

#block-lumiris-views-block-fresh-updates-block-1 .views-row:last-child{
    border-bottom:none;
}

/* Number */
#block-lumiris-views-block-fresh-updates-block-1 .views-row::before{
    content:counter(fresh, decimal-leading-zero);

    grid-area:number;

    font-size:1.35rem;
    font-weight:700;
    color:#b7b7b7;
    line-height:1;

    margin-top:6px;
}

/* Thumbnail */
#block-lumiris-views-block-fresh-updates-block-1 .views-field-field-news-image{
    grid-area:image;
    margin:0;
}

#block-lumiris-views-block-fresh-updates-block-1 .views-field-field-news-image .field-content{
    display:block;
    width:72px;
    height:72px;
}

#block-lumiris-views-block-fresh-updates-block-1 .views-field-field-news-image img,
#block-lumiris-views-block-fresh-updates-block-1 .img-fluid{
    display:block;
    width:72px;
    height:72px;
    object-fit:cover;
    border-radius:14px;
}

/* Title */
#block-lumiris-views-block-fresh-updates-block-1 .views-field-title{
    grid-area:title;
    margin:0;
}

#block-lumiris-views-block-fresh-updates-block-1 .views-field-title a{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;

    overflow:hidden;
    text-overflow:ellipsis;

    font-size:1.06rem;
    font-weight:700;
    line-height:1.45;

    color:#111;
    text-decoration:none;

    transition:.2s;
}

/* Updated date */
#block-lumiris-views-block-fresh-updates-block-1 .views-field-changed{
    grid-area:date;

    margin:0;

    font-size:.88rem;
    color:#8a8a8a;
    line-height:1.4;
}

/* Hover */
#block-lumiris-views-block-fresh-updates-block-1 .views-row:hover{
    transform:translateX(6px);
}

#block-lumiris-views-block-fresh-updates-block-1 .views-row:hover .views-field-title a{
    color:#00695c;
}

/* Mobile */
@media (max-width:768px){

    #block-lumiris-views-block-fresh-updates-block-1 .views-row{

        grid-template-columns:34px 60px 1fr;

        column-gap:14px;

        padding:16px 0;

    }

    #block-lumiris-views-block-fresh-updates-block-1 h2{
        font-size:1.7rem;
    }

    #block-lumiris-views-block-fresh-updates-block-1 .views-field-field-news-image img,
    #block-lumiris-views-block-fresh-updates-block-1 .img-fluid{
        width:60px;
        height:60px;
        border-radius:12px;
    }

    #block-lumiris-views-block-fresh-updates-block-1 .views-field-title a{
        font-size:.98rem;
    }

}


@media (min-width:1400px){

.container{
    max-width:1500px;
}

}


/* ==========================================================================
   Drupal + Gin Admin Toolbar + Bootstrap Navbar (Desktop Lifted Only)
   ========================================================================== */

/* 1. Mobile State (< 768px): Kept exactly as it was (Comfortable spacing) */
@media (max-width: 768px) {
    header[role="banner"] nav.navbar .container-fluid, 
    header[role="banner"] nav.navbar .navbar-collapse, 
    header[role="banner"] nav.navbar {
        position: fixed;
        z-index: 500;
        margin: 0 auto;
        
        /* Keeps your mobile buffer spacing untouched */
        top: calc(8px + var(--gin-toolbar-y-offset, var(--drupal-displace-offset-top, 0px))) !important;
    }
}

/* 2. Desktop Adjustments (>= 769px): Pulled UP higher on the screen */
@media (min-width: 769px) {
    header[role="banner"] nav.navbar .container-fluid, 
    header[role="banner"] nav.navbar .navbar-collapse, 
    header[role="banner"] nav.navbar {
        position: fixed;
        z-index: 500;
    }

    /* --- CASE A: Gin is in VERTICAL Sidebar mode ---
       Pulled up higher to a sleek 8px gap from the top window ceiling */
    body.gin--vertical-toolbar header[role="banner"] nav.navbar {
        top: 8px !important;
        left: var(--gin-toolbar-x-offset, 0px) !important;
        width: calc(100% - var(--gin-toolbar-x-offset, 0px)) !important;
    }

    /* --- CASE B: Gin is in HORIZONTAL Top-bar mode ---
       Locks your navbar exactly 8px below the horizontal admin bar */
    body.gin--horizontal-toolbar header[role="banner"] nav.navbar {
        top: calc(8px + var(--gin-toolbar-y-offset, var(--drupal-displace-offset-top, 0px))) !important;
        left: 0 !important;
        width: 100% !important;
    }
    
    /* --- CASE C: Logged Out / Anonymous Visitors ---
       Maintains the matching, compact 8px float for public visitors */
    body:not(.logged-in) header[role="banner"] nav.navbar {
        top: 8px !important;
        left: 0 !important;
        width: 100% !important;
    }
}


/* ==========================================================
   Global Header System (Mobile-First Structure)
   ========================================================== */

header[role="banner"] nav.navbar .container-fluid, 
header[role="banner"] nav.navbar .navbar-collapse, 
header[role="banner"] nav.navbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    position: fixed;
    z-index: 10;
    
    /* Default Mobile State: No vertical margin so the bar sits flush at the top edge */
    margin: 0 auto; 
}

/* ---------- Desktop Enhancements Only ---------- */
@media (min-width: 769px) {
    header[role="banner"] nav.navbar .container-fluid, 
    header[role="banner"] nav.navbar .navbar-collapse, 
    header[role="banner"] nav.navbar {
        /* Automatically applies the floating 25px margin when screen space permits */
        margin: 25px auto; 
    }
}


/* Strip layout-breaking float or block behaviors from Drupal wrappers */
.lumiris_branding,
.lumiris_main_navigation,
.lumiris_acount_menu {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.lumiris_branding {
    flex-shrink: 0 !important;
}

.lumiris_main_navigation {
    flex-grow: 1 !important;
    justify-content: center !important;
}

.lumiris_acount_menu {
    flex-shrink: 0 !important;
    justify-content: flex-end !important;
}

/* Force inner item lists completely horizontal */
.lumiris_main_navigation ul,
.lumiris_main_navigation ul.menu,
.lumiris_acount_menu ul,
.lumiris_acount_menu ul.menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 24px !important;
}

.lumiris_branding .block,
.lumiris_main_navigation .block,
.lumiris_acount_menu .block {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
}


/* ==========================================================
   8. Fixed Layout Navbar + Absolute Gin Layout Sync
   ========================================================== */

/* 1. Prevent Drupal's multi-layered wrappers from creating blank bottom margins */
html, 
body, 
.dialog-off-canvas-main-canvas {
    overflow: visible !important;
    height: auto !important;
}

#typeface-wrapper {
    transform: translateY(-2px) !important; 
}

.taxonomy-page {
    max-width: 1600px;
    margin: 0 auto;
}

.taxonomy-hero {
    min-height: 420px;
    padding: 120px 8%;
    display: flex;
    align-items: center;
    background: linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url('/sites/default/files/assets/default-taxonomy.webp')
    center center / cover no-repeat;
    color: white;
}

.taxonomy-hero-inner {
    max-width: 700px;
}

.taxonomy-hero h1 {
    font-size: 64px;
    margin-bottom: 20px;
}

.taxonomy-description {
    font-size: 20px;
    opacity: .9;
    line-height: 1.7;
}

.taxonomy-content {
    width: min(1400px, 92%);
    margin: 60px auto;
}


/* ==========================================================
   3. Branding Logo Sizing Rules
   ========================================================== */
.lumiris_branding .navbar-brand img,
.navbar-brand img {
    height: 36px !important;       /* Clean max-height desktop setting */
    max-height: 36px !important;
    width: auto !important;        /* Prevent image warping */
    display: inline-block;
    vertical-align: middle;
}

/* ==========================================================
   3b. Eyerys Session Header Animation Integration
   ========================================================== */
#brand-container {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    height: 36px !important;     /* Locks layout track bounds seamlessly to logo rules */
}

.brand-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    flex-shrink: 0 !important;   /* Keeps logo locked strictly at its dimensions */
}

/* Constrain the raw image size inside the link container */
.brand-logo {
    height: 36px !important;     
    width: auto !important;      
    display: block !important;
}

#typeface-wrapper {
    /* FIX: Brought back into normal layout flow so it pushes the menu instead of overlapping */
    display: inline-block !important;
    vertical-align: middle !important;
    
    max-width: 0;                /* Deflates layout space completely when hidden */
    opacity: 0;
    white-space: nowrap !important;
    overflow: hidden !important;
    
    /* Handles the physics of smoothly shifting the menu elements sideways */
    transition: max-width 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease !important;
}

.brand-text-link {
    text-decoration: none !important;
    display: inline-block !important;
}

.brand-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: #1d1d1f !important;   /* Tracks Apple dark slate scheme */
    letter-spacing: -0.03em !important;
    padding-left: 8px !important;  /* Clean text padding against the logo icon */
    padding-right: 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 
   Trigger States:
   Expands width dynamically on hover or via JS animation, smoothly pushing 
   the navigation elements to the right.
*/
#brand-container:hover #typeface-wrapper,
#typeface-wrapper.animate-reveal {
    max-width: 140px !important; /* Allocates layout width seamlessly to shift the navbar items */
    opacity: 1 !important;
}


/* ==========================================================
   4. Apple Hero Section Utility Classes
   ========================================================== */

.homepage-hero-wrapper {
    position: relative !important;
    overflow: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding: 120px 5% 140px 5%;
    min-height: 720px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

h1.hero-headline {
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .homepage-hero-wrapper {
        width: calc(100vw - 32px);
        margin: 40px auto 20px;
        min-height: 520px;
    }
}

.block-views-blocklatest-stories-block-1 h2 {
    text-align: center;
    font-size: clamp(44px, 5vw, 78px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}


/* ==========================================
   Latest Stories (Taxonomy) - Fully Responsive
========================================== */

.view-latest-story-taxonomy {
    width: min(1500px, 92%);
    margin: 80px auto;
}

/* 1. Base Grid Setup (Desktop Default) */
.view-latest-story-taxonomy .view-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.view-latest-story-taxonomy .views-row {
    overflow: hidden;
    background: #fff;
    border-radius: 24px;
    transition: transform .3s ease, box-shadow .3s ease; /* Explicit transition attributes */
    box-shadow: 0 10px 35px rgba(0,0,0,.06);
    
    /* Responsive internal card engine */
    display: flex;
    flex-direction: column;
}

.view-latest-story-taxonomy .views-row:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(0,0,0,.12);
}

.view-latest-story-taxonomy img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
}

.view-latest-story-taxonomy .views-field {
    padding: 0 24px;
}

.view-latest-story-taxonomy .views-field-title {
    margin: 22px 0 12px;
}

.view-latest-story-taxonomy .views-field-title a {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: #111;
    text-decoration: none;
}

.view-latest-story-taxonomy .views-field-body {
    color: #666;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.view-latest-story-taxonomy .views-field-created {
    color: #999;
    font-size: 14px;
    padding-bottom: 24px;
    margin-top: auto; /* CRITICAL DESKTOP FIX: Pushes dates cleanly to the bottom of shorter cards */
}


/* ==========================================
   Responsive Adaptations
   ========================================== */

/* Laptop & Tablet Layout Breakpoint (< 1100px) */
@media (max-width: 1100px) {
    .view-latest-story-taxonomy {
        margin: 50px auto; /* Tighter layout breathing space */
    }
    
    .view-latest-story-taxonomy .view-content {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns for cleaner text blocks */
        gap: 24px;
    }
    
    .view-latest-story-taxonomy .views-field-title a {
        font-size: 24px; /* Slightly scaled down text size */
    }
}

/* Mobile Phone Layout Breakpoint (< 680px) */
@media (max-width: 680px) {
    .view-latest-story-taxonomy {
        width: 90%; /* Let the layout fill out the screens with safe edge spacing */
        margin: 32px auto;
    }

    .view-latest-story-taxonomy .view-content {
        grid-template-columns: repeat(1, minmax(0, 1fr)); /* Clean single-row stack flow */
        gap: 28px;
    }

    .view-latest-story-taxonomy .views-row {
        border-radius: 20px; /* Marginally subtler card corners on narrow viewports */
    }
    
    /* Dial down violent tracking movements on thumb taps */
    .view-latest-story-taxonomy .views-row:hover {
        transform: translateY(-4px); 
    }

    .view-latest-story-taxonomy img {
        aspect-ratio: 16/9; /* Standard cinematic image proportion profile for smartphones */
    }

    .view-latest-story-taxonomy .views-field {
        padding: 0 20px; /* Slightly tighter internal padding handles narrow screens gracefully */
    }

    .view-latest-story-taxonomy .views-field-title {
        margin: 18px 0 10px;
    }

    .view-latest-story-taxonomy .views-field-title a {
        font-size: 22px; /* Perfect legibility standard for long headlines on mobile */
    }

    .view-latest-story-taxonomy .views-field-body {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .view-latest-story-taxonomy .views-field-created {
        padding-bottom: 20px;
    }
}


/* ==========================================================
   FEATURED STORY
========================================================== */

.view-featured-story-taxonomy{
    width:min(1500px,92%);
    margin:60px auto 100px;
}

.view-featured-story-taxonomy .views-row{
    display:grid;
    grid-template-columns:1.45fr 1fr;
    overflow:hidden;
    background:#fff;
    border-radius:32px;
    box-shadow:
        0 15px 45px rgba(0,0,0,.08);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.view-featured-story-taxonomy .views-row:hover{
    transform:translateY(-8px);
    box-shadow:
        0 25px 70px rgba(0,0,0,.12);
}


/* ==========================================================
   IMAGE
========================================================== */

.view-featured-story-taxonomy .views-field-field-image{
    position:relative;
    overflow:hidden;
}

.view-featured-story-taxonomy .views-field-field-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.22),
            rgba(0,0,0,0)
        );
    pointer-events:none;
}

.view-featured-story-taxonomy img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}

.view-featured-story-taxonomy .views-row:hover img{
    transform:scale(1.05);
}


/* ==========================================================
   CONTENT
========================================================== */

.view-featured-story-taxonomy .views-field:not(.views-field-field-image){
    padding:60px;
}


/* ==========================================================
   TITLE
========================================================== */

.view-featured-story-taxonomy .views-field-title{
    margin-top:0;
}

.view-featured-story-taxonomy .views-field-title::before{
    content:"FEATURED";
    display:inline-block;
    margin-bottom:22px;
    padding:.5rem 1rem;
    border-radius:999px;
    background:
        linear-gradient(
            135deg,
            #ff7a18,
            #ffb347
        );
    color:#fff;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.15em;
}

.view-featured-story-taxonomy .views-field-title a{
    display:block;
    text-decoration:none;
    color:#111;
    font-size:clamp(3rem,4vw,4.5rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-2px;
    transition:color .25s ease;
}

.view-featured-story-taxonomy .views-field-title a:hover{
    color:#ff7a18;
}


/* ==========================================================
   BODY
========================================================== */

.view-featured-story-taxonomy .views-field-body{
    margin-top:26px;
    font-size:1.15rem;
    line-height:1.9;
    color:#666;
}


/* ==========================================================
   DATE
========================================================== */

.view-featured-story-taxonomy .views-field-created{
    display:inline-flex;
    align-items:center;
    margin-top:36px;
    padding:.55rem 1rem;
    border-radius:999px;
    background:#f5f5f5;
    color:#666;
    font-size:.9rem;
    font-weight:600;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:991px){

    .view-featured-story-taxonomy .views-row{

        grid-template-columns:1fr;

    }

    .view-featured-story-taxonomy img{

        aspect-ratio:16/9;

    }

    .view-featured-story-taxonomy .views-field:not(.views-field-field-image){

        padding:40px;

    }

}

@media (max-width:768px){

    .view-featured-story-taxonomy{

        width:94%;

    }

    .view-featured-story-taxonomy .views-field-title a{

        font-size:2.3rem;

    }

    .view-featured-story-taxonomy .views-field-body{

        font-size:1rem;

    }

    .view-featured-story-taxonomy .views-field:not(.views-field-field-image){

        padding:28px;

    }

    .view-featured-story-taxonomy .views-row{

        border-radius:24px;

    }

}















/* ==========================================================
   EXPLORE TOPICS
========================================================== */
#block-lumiris-views-block-explore-topics-block-1{
    width:min(1500px,92%);
    margin:90px auto;
}
/* ==========================================================
   TITLE
========================================================== */
#block-lumiris-views-block-explore-topics-block-1>h2{
    font-size:2.4rem;
    font-weight:800;
    color:#111;
    margin-bottom:35px;
}
/* ==========================================================
   GRID (horizontally scrollable)
========================================================== */
#block-lumiris-views-block-explore-topics-block-1 .view-content{
    display:flex;
    flex-wrap:nowrap;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:14px;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}
/* thin custom scrollbar (webkit browsers) */
#block-lumiris-views-block-explore-topics-block-1 .view-content::-webkit-scrollbar{
    height:6px;
}
#block-lumiris-views-block-explore-topics-block-1 .view-content::-webkit-scrollbar-thumb{
    background:#ddd;
    border-radius:999px;
}
#block-lumiris-views-block-explore-topics-block-1 .view-content::-webkit-scrollbar-track{
    background:transparent;
}
/* ==========================================================
   EACH ROW
========================================================== */
#block-lumiris-views-block-explore-topics-block-1 .views-row{
    margin:0;
    flex:0 0 auto;
    scroll-snap-align:start;
}
/* ==========================================================
   PILL
========================================================== */
#block-lumiris-views-block-explore-topics-block-1 .views-row a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 22px;
    margin-top: 5px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid #ececec;
    text-decoration:none;
    color:#222;
    font-weight:600;
    white-space:nowrap;
    transition:.25s;
    box-shadow:
        0 5px 15px rgba(0,0,0,.04);
}
/* dot */
#block-lumiris-views-block-explore-topics-block-1 .views-row a:before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#18c5d8;
}
/* hover */
#block-lumiris-views-block-explore-topics-block-1 .views-row a:hover{
    transform:translateY(-4px);
    background:#111;
    color:#fff;
    border-color:#111;
    box-shadow:
        0 18px 35px rgba(0,0,0,.18);
}
/* keep dot visible */
#block-lumiris-views-block-explore-topics-block-1 .views-row a:hover:before{
    background:#18c5d8;
}
/* ==========================================================
   COUNT
========================================================== */
#block-lumiris-views-block-explore-topics-block-1 .views-field-nid{
    display:inline-block;
    margin-left:10px;
    font-size:.8rem;
    color:#999;
    font-weight:700;
}
/* ==========================================================
   MOBILE
========================================================== */
@media(max-width:768px){
#block-lumiris-views-block-explore-topics-block-1{
    width:94%;
}
#block-lumiris-views-block-explore-topics-block-1 .view-content{
    gap:10px;
}
#block-lumiris-views-block-explore-topics-block-1 .views-row a{
    padding:10px 18px;
    font-size:.9rem;
}
}

/* ==========================================================
   GRID (horizontally scrollable)
========================================================== */
#block-lumiris-views-block-explore-topics-block-1 .view-content{
    display:flex;
    flex-wrap:nowrap;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:14px;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;      /* Firefox */
    -ms-overflow-style:none;   /* IE/Edge legacy */
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
/* hide scrollbar (Chrome, Safari, Opera) */
#block-lumiris-views-block-explore-topics-block-1 .view-content::-webkit-scrollbar{
    display:none;
}



#block-lumiris-views-block-explore-topics-block-1 .view-content{
    cursor:grab;
    user-select:none;
}
#block-lumiris-views-block-explore-topics-block-1 .view-content.dragging{
    cursor:grabbing;
}


















/* ==========================================================
   TAXONOMY TAGS (SMALL VERSION)
========================================================== */

.field.field--name-field-tags.field--type-entity-reference.field--label-hidden.field__items{

    display:flex;
    flex-wrap:wrap;
    gap:8px; /* tighter than explore topics */
    margin-top:10px;

}

/* ==========================================================
   EACH ITEM
========================================================== */

.field.field--name-field-tags.field--type-entity-reference.field--label-hidden.field__items .field__item{
    margin:0;
}

/* ==========================================================
   PILL STYLE
========================================================== */

.field.field--name-field-tags.field--type-entity-reference.field--label-hidden.field__items .field__item a{

    display:flex;
    align-items:center;
    gap:6px;

    padding:7px 14px;   /* smaller than your current 13px 22px */
    font-size:.82rem;
    font-weight:600;

    border-radius:999px;

    background:#fff;
    border:1px solid #eee;

    color:#222;
    text-decoration:none;

    transition:.2s ease;

    box-shadow:0 3px 10px rgba(0,0,0,.04);

}

/* ==========================================================
   DOT (SMALLER)
========================================================== */

.field.field--name-field-tags.field--type-entity-reference.field--label-hidden.field__items .field__item a:before{

    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#18c5d8;

}

/* ==========================================================
   HOVER
========================================================== */

.field.field--name-field-tags.field--type-entity-reference.field--label-hidden.field__items .field__item a:hover{

    background:#111;
    color:#fff;
    border-color:#111;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,.15);

}

/* keep dot color */
.field.field--name-field-tags.field--type-entity-reference.field--label-hidden.field__items .field__item a:hover:before{
    background:#18c5d8;
}

/* ==========================================================
   REMOVE ANY COUNT / NUMBER (SAFETY NET)
========================================================== */

.field.field--name-field-tags.field--type-entity-reference.field--label-hidden.field__items .views-field-nid,
.field.field--name-field-tags.field--type-entity-reference.field--label-hidden.field__items .field__item .count,
.field.field--name-field-tags.field--type-entity-reference.field--label-hidden.field__items .field__item .views-counter{
    display:none !important;
}


















/* ==========================================================
   Floating Gin Toolbar Drawer (Frontend Only)
   ========================================================== */

/* 1. Strip the toolbar out of layout flow entirely */
.gin--navigation .gin-secondary-toolbar--frontend {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9998 !important;

    transform: translateY(-100%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

/* 2. Reveal state, toggled via JS */
body.gin-drawer-open .gin-secondary-toolbar--frontend {
    transform: translateY(0) !important;
}

/* 3. No more layout padding hacks needed — content never shifts */
.gin--navigation main,
.gin--navigation #main-content,
.gin--navigation .layout-content {
    padding-top: 0 !important;
}

/* 4. The floating trigger button */
#gin-drawer-trigger {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;

    width: 52px;
    height: 52px;
    border-radius: 50%;

    background: #111;
    color: #fff;
    border: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s ease;
}

#gin-drawer-trigger:hover {
    transform: scale(1.08);
    background: #1d1d1f;
}

#gin-drawer-trigger svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

/* Rotate icon when drawer is open */
body.gin-drawer-open #gin-drawer-trigger svg {
    transform: rotate(180deg);
}

/* Hide trigger entirely for anonymous visitors (handled by Drupal access already, but extra safety) */
body:not(.toolbar-tray-open):not(.user-logged-in) #gin-drawer-trigger {
    display: none;
}

@media (max-width: 768px) {
    #gin-drawer-trigger {
        bottom: 16px;
        right: 16px;
        width: 46px;
        height: 46px;
    }
}











/* ----------------------------------------------------------
   Heading
---------------------------------------------------------- */
#block-lumiris-views-block-headlines-block-1 h2 {
    margin: 0 0 24px;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #1d1d1f; 
}

/* ----------------------------------------------------------
   Numbering Matrix Content Roll
---------------------------------------------------------- */
#block-lumiris-views-block-headlines-block-1 .view-content {
    counter-reset: trend;
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
    scrollbar-width: thin;
}

#block-lumiris-views-block-headlines-block-1 .view-content::-webkit-scrollbar {
    width: 4px;
}

#block-lumiris-views-block-headlines-block-1 .view-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

#block-lumiris-views-block-headlines-block-1 .views-row {
    counter-increment: trend;
    display: grid;
    grid-template-columns: 36px 1fr 56px;
    grid-template-areas:
        "number title image"
        "number meta image";
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06); 
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
}

#block-lumiris-views-block-headlines-block-1 .views-row:first-child {
    padding-top: 0;
}

#block-lumiris-views-block-headlines-block-1 .views-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#block-lumiris-views-block-headlines-block-1 .views-row:hover {
    transform: translateX(4px);
}

/* Dynamic Number Index */
#block-lumiris-views-block-headlines-block-1 .views-row::before {
    grid-area: number;
    content: counter(trend, decimal-leading-zero);
    font-size: 1.35rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.25); 
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Title Typography */
#block-lumiris-views-block-headlines-block-1 .views-field-title {
    grid-area: title;
    margin: 0;
}

#block-lumiris-views-block-headlines-block-1 .views-field-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.8em;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1d1d1f;
    text-decoration: none;
    transition: color 0.2s ease;
}

#block-lumiris-views-block-headlines-block-1 .views-row:hover .views-field-title a {
    color: #00695c; 
}

/* Metadata */
#block-lumiris-views-block-headlines-block-1 .views-field-created {
    grid-area: meta;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: #86868b; 
}

#block-lumiris-views-block-headlines-block-1 .views-field-created::after {
    content: " • 5 min read";
    color: #a1a1a6;
}

/* Thumbnails */
#block-lumiris-views-block-headlines-block-1 .views-field-field-news-image {
    grid-area: image;
    width: 56px;
    height: 56px;
    margin: 0;
}

#block-lumiris-views-block-headlines-block-1 .views-field-field-news-image .field-content {
    width: 100%;
    height: 100%;
}

#block-lumiris-views-block-headlines-block-1 .views-field-field-news-image img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 12px; 
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

#block-lumiris-views-block-headlines-block-1 .views-row:hover img {
    transform: scale(1.04);
}

#block-lumiris-views-block-headlines-block-1 .img-fluid {
    width: 56px;
    height: 56px;
    max-width: none;
}

/* ----------------------------------------------------------
   RESPONSIVE SCALING BREAKPOINTS
---------------------------------------------------------- */
@media (max-width: 1024px) {
    #block-lumiris-views-block-headlines-block-1 {
        position: relative !important;
        top: auto !important;
        margin-top: 40px !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    #block-lumiris-views-block-headlines-block-1 {
        padding: 20px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.85) !important; 
    }

    #block-lumiris-views-block-headlines-block-1 .views-row {
        grid-template-columns: 32px 1fr 50px;
        column-gap: 12px;
    }

    #block-lumiris-views-block-headlines-block-1 .views-field-field-news-image,
    #block-lumiris-views-block-headlines-block-1 .views-field-field-news-image img,
    #block-lumiris-views-block-headlines-block-1 .img-fluid {
        width: 50px;
        height: 50px;
    }

    #block-lumiris-views-block-headlines-block-1 h2 {
        font-size: 1.35rem;
        margin-bottom: 18px;
    }
}



















/* ==========================================================
   5. Dynamic Micro-Interactions & JS Components
   ========================================================== */
#rotating-word {
    color: #009688; 
    display: inline-block;
}

#rotating-word.changing {
    animation: appleWordPop 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes appleWordPop {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-pill {
    font-size: 0.9rem;
    font-weight: 500;
    color: #86868b;
    margin-bottom: 1.5rem;
}
.greeting-icon {
    font-size: 1.1rem;
    margin-right: 5px;
}

/* ==========================================================
   6. Responsive Tuning Breakpoints (Strict Layout Mirroring)
   ========================================================== */
@media (max-width: 992px) { 
    /* Hero scaling */
    .homepage-hero-wrapper {
        width: calc(100vw - 48px); /* Drops to 24px side margins */
        margin: 24px auto;
        padding: 100px 32px;
    }
    /* Logo tracking alignment match */
    header[role="banner"] nav.navbar .container-fluid {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 768px) {
    /* Hero scaling */
    .homepage-hero-wrapper {
        width: calc(100vw - 32px); /* Tightens to 16px side margins */
        margin: 16px auto;
        padding: 80px 24px;
        min-height: 500px;
    }
    /* Logo tracking alignment match */
    header[role="banner"] nav.navbar .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}



/* ==========================================================
   Articles Archive
   View: articles (Masonry-Preserved & Responsive)
   ========================================================== */

.view-articles {
    width: min(1500px, 92%);
    margin: 80px auto 120px;
}

/* ---------- Masonry Core (DO NOT TOUCH) ---------- */

/* Masonry container */
.view-articles .view-content {
    position: relative;
    width: 100%;
}

/* Masonry items (3 Columns Desktop) */
.view-articles .views-row {
    width: calc((100% - 72px) / 3); /* Kept exactly for your script calculations */
    margin-bottom: 36px;
    
    /* Internal Card Engineering */
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    display: inline-flex !important; /* Helps JS calculate block volumes smoothly */
    flex-direction: column !important;
    
    transition: transform .35s cubic-bezier(.16,1,.3,1),
                box-shadow .35s ease;
    box-shadow: 0 8px 30px rgba(0,0,0,.05);
}

.view-articles .views-row:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(0,0,0,.12);
}

/* ---------- Image ---------- */

.view-articles img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
}

/* ---------- Content ---------- */

.view-articles .views-field {
    padding: 0 28px;
}

.view-articles .views-field-title {
    margin: 26px 0 14px;
}

.view-articles .views-field-title a {
    color: #111;
    text-decoration: none;
    font-size: 30px;
    font-weight: 750;
    line-height: 1.2;
    transition: color .25s;
}

.view-articles .views-field-title a:hover {
    color: #666;
}

/* ---------- Excerpt ---------- */

.view-articles .views-field-body {
    color: #6e6e73;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 24px;
}

/* ---------- Date ---------- */

.view-articles .views-field-created {
    color: #8e8e93;
    font-size: 14px;
    padding-bottom: 28px;
}

/* ---------- Optional taxonomy ---------- */

.view-articles .views-field-field-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.view-articles .views-field-field-tags a {
    padding: 7px 14px;
    background: #f5f5f7;
    border-radius: 999px;
    text-decoration: none;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    transition: .25s;
}

.view-articles .views-field-field-tags a:hover {
    background: #111;
    color: #fff;
}

/* ---------- Pager spacing ---------- */

.view-articles + nav.pager,
.view-articles .pager {
    margin-top: 70px;
}




/* ==========================================================
   Responsive Articles Archive
========================================================== */

/* ---------- Tablet (≤ 1200px) ---------- */

@media (max-width: 1200px) {

    .view-articles {
        width: min(95%, 1200px);
        margin: 60px auto 100px;
    }

    .view-articles .views-row {
        width: calc((100% - 36px) / 2) !important;
        margin-bottom: 28px;
    }

    .view-articles .views-field {
        padding: 0 24px;
    }

    .view-articles .views-field-title a {
        font-size: 24px;
    }

    .view-articles .views-field-body {
        font-size: 16px;
        line-height: 1.7;
    }

    .view-articles img {
        aspect-ratio: 16 / 10;
    }

}

/* ---------- Mobile (≤ 768px) ---------- */

@media (max-width: 768px) {

    .view-articles {
        width: 94%;
        margin: 40px auto 80px;
    }

    .view-articles .views-row {

        width: 100% !important;

        margin-bottom: 24px;

        border-radius: 22px;

        box-shadow: 0 6px 22px rgba(0,0,0,.08);

    }

    .view-articles .views-row:hover {

        transform: none;

        box-shadow: 0 8px 24px rgba(0,0,0,.10);

    }

    .view-articles img {

        width: 100%;

        aspect-ratio: 16 / 9;

        object-fit: cover;

    }

    .view-articles .views-field {

        padding: 0 20px;

    }

    .view-articles .views-field-title {

        margin: 20px 0 12px;

    }

    .view-articles .views-field-title a {

        font-size: 22px;

        line-height: 1.3;

    }

    .view-articles .views-field-body {

        font-size: 15px;

        line-height: 1.65;

        margin-bottom: 18px;

    }

    .view-articles .views-field-created {

        font-size: 13px;

        padding-bottom: 20px;

    }

    .view-articles .views-field-field-tags {

        gap: 6px;

        margin-bottom: 16px;

    }

    .view-articles .views-field-field-tags a {

        padding: 6px 12px;

        font-size: 12px;

    }

}

/* ---------- Small Phones (≤ 480px) ---------- */

@media (max-width: 480px) {

    .view-articles {

        width: 92%;

        margin: 30px auto 60px;

    }

    .view-articles .views-row {

        border-radius: 18px;

        margin-bottom: 20px;

    }

    .view-articles .views-field {

        padding: 0 16px;

    }

    .view-articles .views-field-title {

        margin: 18px 0 10px;

    }

    .view-articles .views-field-title a {

        font-size: 20px;

    }

    .view-articles .views-field-body {

        font-size: 14px;

        line-height: 1.6;

    }

    .view-articles .views-field-created {

        font-size: 12px;

        padding-bottom: 18px;

    }

    .view-articles .views-field-field-tags a {

        padding: 5px 10px;

        font-size: 11px;

    }

}













/* ==========================================================
   Trending Stories Block ONLY
   ========================================================== */

#block-lumiris-views-block-trending-story-taxonomy-block-1{

    margin:4rem 0;

}

#block-lumiris-views-block-trending-story-taxonomy-block-1 > h2{

    font-size:2rem;
    font-weight:800;

    margin-bottom:2rem;

    letter-spacing:-.5px;

}



















/* ==========================================================
   Featured
   ========================================================== */

#block-lumiris-views-block-featured-story-taxonomy-block-1 > h2::after{

    content:"";

    display:block;

    width:180px;
    height:4px;

    margin-top:14px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #ff7a18,
        #ffb347
    );

}







#block-lumiris-page-title h1 {
    font-size: clamp(44px, 5vw, 78px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #111;
    width: min(1500px, 92%);
    position: relative;
}

/* target Drupal field wrapper inside H1 */
#block-lumiris-page-title h1 .field--name-name {
    display: inline-block;
    position: relative;
}

/* H1 underline (based on your H2 style) */
#block-lumiris-page-title h1 .field--name-name::after {
    content: "";
    display: block;

    width: 85%;
    height: 6px;
    margin-top: 18px;

    border-radius: 999px;
    background: linear-gradient(90deg, #18c5d8, rgba(24,197,216,0.2));

    transform-origin: left;
    transform: scaleX(0.6);
    transition: transform 0.4s ease;
}

/* hover animation (premium feel) */
#block-lumiris-page-title h1:hover .field--name-name::after {
    transform: scaleX(1);
}





/* ==========================================================
   Latest (largest underline)
========================================================== */
#block-lumiris-views-block-latest-story-taxonomy-block-1 > h2::after {
    content:"";
    display:block;

    width:50%;          /* biggest */
    height:4px;
    margin-top:14px;

    border-radius:999px;
    background:#f06624;
}


/* ==========================================================
   Trending (medium underline)
========================================================== */
#block-lumiris-views-block-trending-story-taxonomy-block-1 > h2::after {
    content:"";
    display:block;

    width:30%;          /* smaller */
    height:4px;
    margin-top:14px;

    border-radius:999px;
    background:#f06624;
}


/* ==========================================================
   Explore (smallest underline)
========================================================== */
#block-lumiris-views-block-explore-topics-block-1 > h2::after {
    content:"";
    display:block;

    width:10%;          /* smallest */
    height:5px;
    margin-top:15px;

    border-radius:999px;

    background:#f06624;
}















/* ==========================================================
   3 COLUMN GRID
   ========================================================== */

#block-lumiris-views-block-trending-story-taxonomy-block-1 .view-content{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:28px;

}



/* ==========================================================
   CARD
   ========================================================== */

#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-row{

    background:#f7fafc;

    border:1px solid #e8edf2;

    border-radius:22px;

    overflow:hidden;

    transition:.25s;

    display:flex;

    flex-direction:column;

    height:100%;

}

#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-row:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.08);

}



{`/* FORCE 16:9 CROP */ #block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-news-image{ width:100%; } #block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-news-image a{ display:block; } #block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-news-image img{ width:100% !important; height:auto !important; aspect-ratio:16/9 !important; object-fit:cover !important; display:block; }`}



/* ==========================================================
   CONTENT
   ========================================================== */

#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-title,
#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-body,
#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-created,
#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-counter{

    padding-left:20px;
    padding-right:20px;

}

#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-title{

    padding-top:18px;
    padding-bottom:10px;

}

#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-title a{

    text-decoration:none;

    color:#222;

    font-size:1.15rem;

    font-weight:700;

    line-height:1.45;

}

#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-title a:hover{

    color:#0aa79d;

}



/* ==========================================================
   BODY
   ========================================================== */

#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-body{

    color:#666;

    line-height:1.7;

    font-size:.95rem;

    flex-grow:1;

}



/* ==========================================================
   META
   ========================================================== */

#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-created,
#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field-counter{

    font-size:.82rem;

    color:#888;

    padding-top:12px;
    padding-bottom:20px;

}



/* ==========================================================
   REMOVE EXTRA FIELD MARGINS
   ========================================================== */

#block-lumiris-views-block-trending-story-taxonomy-block-1 .views-field{

    margin:0;

}



/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:991px){

#block-lumiris-views-block-trending-story-taxonomy-block-1 .view-content{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:767px){

#block-lumiris-views-block-trending-story-taxonomy-block-1 .view-content{

    grid-template-columns:1fr;

}

}









































/* ==========================================================
   Latest Stories (Eyerys-style)
   ========================================================== */

.views-element-container:has(.view-latest-stories) {
    max-width: 1440px;
    margin: 80px auto;
    padding-inline: 40px;
}

/* Section title */
.view-latest-stories h2 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #111;
    margin-bottom: 2rem;
}

/* Grid */
.view-latest-stories ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Card */
.view-latest-stories li {
    display: flex;
    flex-direction: column;
}

/* Image */
.view-latest-stories img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;

    border-radius: 16px;

    margin-bottom: 1rem;

    transition:
        transform .35s ease,
        filter .35s ease;
}

.view-latest-stories li:hover img {
    transform: scale(1.03);
}

/* Category */

.view-latest-stories .field--name-field-category,
.view-latest-stories .field--name-field-category a {
    display: inline-block;

    font-size: .68rem;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;

    color: #7c3aed !important;

    margin-bottom: .65rem;
}

/* Title */

.view-latest-stories h2.node__title {
    margin: 0 0 .6rem;
    line-height: 1.2;
}

.view-latest-stories h2.node__title a {
    color: #111 !important;

    font-size: 1.45rem;
    font-weight: 700;

    letter-spacing: -.03em;

    text-decoration: none;
}

.view-latest-stories h2.node__title a:hover {
    color: #00695c !important;
}

/* Meta */

.view-latest-stories .node__meta,
.view-latest-stories .field--name-created {

    font-size: .9rem;

    color: #8a8a8a;

    display: flex;
    gap: .6rem;
}

/* Nice underline removal */

.view-latest-stories a:hover {
    text-decoration: none;
}

/* Responsive */

@media (max-width:1200px){

    .view-latest-stories ul{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .views-element-container:has(.view-latest-stories){
        padding-inline:20px;
    }

    .view-latest-stories ul{
        grid-template-columns:1fr;
    }

}






.field--name-field-news-image img {
    display: block;
    width: 100%;
    max-width: 800px; /* Constrains the width frame */
    height: 450px;    /* Forces the height frame */
    
}

























/* ==========================================================
   EYERYS - COMPACT EXPANDABLE EXPOSED SEARCH ENGINE (CLICK FIX)
   ========================================================== */

/* The outer form container wrapper */
#views-exposed-form-search-content-page-1 {
    display: inline-block !important;
    position: relative !important;
    vertical-align: middle;
}

/* Hide the native text label accessibly */
#views-exposed-form-search-content-page-1 label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

/* Base structural layout for the interactive input wrapper */
#views-exposed-form-search-content-page-1 .form-item {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: block !important;
}

/* THE EXPANDABLE INPUT LAYER */
#views-exposed-form-search-content-page-1 input[type="search"],
#views-exposed-form-search-content-page-1 input[type="text"] {
    width: 40px !important; 
    height: 40px !important;
    padding: 0 0 0 38px !important; 
    font-size: 14px !important;
    color: transparent !important; 
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 20px !important; 
    cursor: pointer !important;
    outline: none !important;
    box-sizing: border-box !important;
    
    /* Crucial: Ensure the input itself sits on top of everything to catch clicks */
    position: relative !important;
    z-index: 5 !important;
    
    -webkit-appearance: none !important;
    appearance: none !important;
    
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease,
                color 0.2s ease,
                background-color 0.4s ease !important;
}

/* Hover style context while collapsed */
#views-exposed-form-search-content-page-1:not(.search-expanded):hover input[type="search"],
#views-exposed-form-search-content-page-1:not(.search-expanded):hover input[type="text"] {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* THE ACTIVE EXPANDED STATE */
#views-exposed-form-search-content-page-1.search-expanded input[type="search"],
#views-exposed-form-search-content-page-1.search-expanded input[type="text"] {
    width: 240px !important;
    padding-right: 16px !important;
    cursor: text !important;
    color: #1d1d1f !important;      /* Apple dark text */
    background-color: #f5f5f7 !important;
    border-color: rgba(0,0,0,.1) !important;
}

.ui-autocomplete {
    z-index: 999999 !important;
}


/* MAGNIFYING GLASS PIXELS (Moved below the z-index of the input) */
#views-exposed-form-search-content-page-1 .form-item::before {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    top: 11px !important; 
    width: 14px !important;
    height: 14px !important;
    border: 2px solid #000 !important; 
    border-radius: 50% !important;
    z-index: 2 !important; /* Kept behind the input layer so click passes straight to it */
    transition: border-color 0.3s ease !important;
    box-sizing: border-box !important;
}

#views-exposed-form-search-content-page-1 .form-item::after {
    content: "" !important;
    position: absolute !important;
    left: 23px !important;
    top: 23px !important; 
    width: 6px !important;
    height: 2px !important;
    background-color: #000 !important; 
    transform: rotate(45deg) !important;
    transform-origin: left top !important;
    z-index: 2 !important;
}

#views-exposed-form-search-content-page-1.search-expanded .form-item::before {
    border-color: #00695c !important; 
}
#views-exposed-form-search-content-page-1.search-expanded .form-item::after {
    background-color: #00695c !important;
}

/* Core Autocomplete and Throbber Cleanups */
#views-exposed-form-search-content-page-1 input.form-autocomplete,
#views-exposed-form-search-content-page-1 input.ui-autocomplete-input,
#views-exposed-form-search-content-page-1 input.form-autocomplete.throbbing,
#views-exposed-form-search-content-page-1 input.ui-autocomplete-loading,
#views-exposed-form-search-content-page-1 input::-webkit-search-cancel-button,
#views-exposed-form-search-content-page-1 input::-webkit-search-decoration {
    background-image: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Hide the native Drupal "Search" submit button block */
#views-exposed-form-search-content-page-1 .form-actions {
    display: none !important;
}



.mobile-injected-utilities {
  display: flex !important;
  flex-direction: row !important; /* Forces items side-by-side */
  align-items: center !important;  /* Centers them vertically */
  gap: 12px !important;            /* Adds a clean space between the two classes */
  position: fixed;
  top: 0;
  right: 0;
}











.breadcrumb {
    gap: 10px;
    margin: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;

    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.breadcrumb-item a {
    color: #6e6e73;
    text-decoration: none;
    transition:
        color .25s ease,
        opacity .25s ease;
}

.breadcrumb-item a:hover {
    color: #1d1d1f;
}




/* ==========================================================
   CURRENT PAGE
========================================================== */

.breadcrumb-item.active,
.breadcrumb-item:last-child {
    color: #1d1d1f;
    font-weight: 600;
}

/* ==========================================================
   SEPARATOR
========================================================== */

.breadcrumb-item + .breadcrumb-item::before {

    content: "\203A";
    padding: 0px 10px;
    color: #b5b5b7;
}

/* Remove Bootstrap slash */
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){


    .breadcrumb{

        padding:8px 14px;

        font-size:13px;

        overflow-x:auto;
        white-space:nowrap;

        scrollbar-width:none;

    }

    .breadcrumb::-webkit-scrollbar{
        display:none;
    }

}

.breadcrumb-item:last-child{
    color:#18c5d8;
    font-weight:600;
}








/* ==========================================================
   10. Front Page: Latest Stories Grid Layout (Responsive)
   ========================================================== */

/* 1. Base Grid Setup (Desktop Default) */
.view-id-latest_stories .view-content {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 4 identical columns on desktop */
    gap: 24px !important; 
    width: 100% !important;
    max-width: 1200px !important; 
    margin: 40px auto !important; 
    padding: 0 20px !important; /* CRITICAL MOBILE FIX: Adds safe side padding so cards don't touch screen edges */
}

/* 2. Style the layout spacing inside each card */
.view-id-latest_stories .views-row {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* 3. Style the image element with modern rounded corners & fit styling */
.view-id-latest_stories .views-field-field-news-image img,
.view-id-latest_stories .views-content img {
    display: block !important;
    width: 100% !important;
    height: 180px !important; 
    object-fit: cover !important; 
    
    border-radius: 12px !important; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; 
    margin-bottom: 12px !important;
    
    /* Micro-interaction animation curve */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 4. Interactive card hover response */
.view-id-latest_stories .views-row:hover img {
    transform: translateY(-4px) !important; 
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important; 
}

/* 5. Clean styling for the typography titles */
.view-id-latest_stories .views-field-title a {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #111111;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.view-id-latest_stories .views-field-title a:hover {
    color: #00695c !important;
}

.view-id-latest_stories .views-field-field-label {
    color: #00695c !important;
    font-weight: 700;
}


/* ==========================================================
   Responsive Adaptations
   ========================================================== */

/* Tablet Optimization (< 1024px) */
@media (max-width: 1024px) {
    .view-id-latest_stories .view-content {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Shift from 4 columns to 2 */
        gap: 20px !important; /* Tighten up spacing a bit */
        margin: 24px auto !important;
    }
    
    .view-id-latest_stories .views-field-field-news-image img,
    .view-id-latest_stories .views-content img {
        height: 200px !important; /* Slightly taller image fills the wider column beautifully */
    }
}

/* Mobile Phone Optimization (< 600px) */
@media (max-width: 600px) {
    .view-id-latest_stories .view-content {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important; /* Full width 1-column stack */
        gap: 28px !important; /* More vertical space between stacked stories */
    }

    .view-id-latest_stories .views-field-field-news-image img,
    .view-id-latest_stories .views-content img {
        height: 220px !important; /* Perfect modern cinematic aspect ratio for mobile viewports */
    }
    
    .view-id-latest_stories .views-field-title a {
        font-size: 18px !important; /* Slightly larger typography on mobile for crisp legibility */
    }
}







.article-bottom{
    border-top:1px solid #ececec;
    background:#fff;
}





@media (min-width:1400px){

.container{
    max-width:1500px;
}

}


@media (min-width:992px){

.region-sidebar-first{

    position:sticky;

    top:110px;

    align-self:flex-start;

}

}




/* Mobile */
@media (max-width:768px){

.midpic{
    display:block !important;
    width:100vw !important;
    max-width:100vw !important;
    height:auto !important;
    border-radius: 0 !important;
    margin:2rem calc(50% - 50vw) !important;
}

}

@media (max-width:768px){

.midpic img{
    display:block;
    width:100%;
    height:auto;
    border-radius: 0 !important;
}

}



/* ==========================================================
   Drupal Local Tasks (View / Edit / Delete / Revisions)
   ========================================================== */

#block-lumiris-local-tasks{
    margin:1rem 0 2rem;
}

/* Remove the ugly full-width border */
#block-lumiris-local-tasks .nav-tabs{
    display:inline-flex;
    gap:.45rem;
    border:0;
    width:auto;
    flex-wrap:wrap;
}

/* Remove Bootstrap borders */
#block-lumiris-local-tasks .nav-item,
#block-lumiris-local-tasks .nav-link{
    border:none !important;
    margin:0;
}

/* Modern pills */
#block-lumiris-local-tasks .nav-link{
    display:flex;
    align-items:center;

    padding:.55rem 1rem;

    border-radius:999px;

    background:#f6f6f7;

    color:#555;

    font-size:.92rem;
    font-weight:600;

    transition:.2s ease;

    box-shadow:none;
}

/* Hover */
#block-lumiris-local-tasks .nav-link:hover{
    background:#ececec;
    color:#111;
    transform:translateY(-1px);
}

/* Current tab */
#block-lumiris-local-tasks .nav-link.active{
    background:#111;
    color:#fff;
}

/* Remove Bootstrap active border */
#block-lumiris-local-tasks .nav-link.active,
#block-lumiris-local-tasks .nav-link.active:hover{
    border:none !important;
}

/* Focus */
#block-lumiris-local-tasks .nav-link:focus{
    box-shadow:0 0 0 3px rgba(108,76,241,.18);
}

/* Mobile */
@media (max-width:768px){

#block-lumiris-local-tasks .nav-tabs{
    gap:.4rem;
}

#block-lumiris-local-tasks .nav-link{
    padding:.45rem .8rem;
    font-size:.85rem;
}

}











/* ==========================================================
   Opinions Slideshow - Full-Bleed Edge-to-Edge Fix
   ========================================================== */

.opinions-slideshow-container {
    display: flex;
    gap: 1.5rem;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Stretch flawlessly across the entire screen viewport */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 2rem !important;
    box-sizing: border-box !important;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    
    /* Interactive Drag Cursor States */
    cursor: grab;
}

.opinions-slideshow-container::-webkit-scrollbar {
    display: none;
}

.opinions-slideshow-container.dragging {
    cursor: grabbing;
    user-select: none;
}

/* Each slide card */
.opinions-slides {
    flex: 0 0 min(90vw, 900px);
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: #111;
}

/* Link area */
.opinions-slides a {
    display: block;
    position: relative;
    color: #fff;
    text-decoration: none;
}

/* Image framing */
.opinions-slides img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform .45s ease;
}

/* Premium gradient overlay overlay layer */
.opinions-slides::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.85) 0%,
        rgba(0,0,0,.35) 35%,
        rgba(0,0,0,0) 70%
    );
    pointer-events: none;
}

/* Text title overlay positioning */
.opinions-slides .wt {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    z-index: 2;
}

.opinions-slides .wt h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.4rem, 2vw, 2.3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 18px rgba(0,0,0,.5);
}

/* Active Hover Scale engine */
.opinions-slides:hover img {
    transform: scale(1.05);
}

/* Mobile Breakpoint Tweaks */
@media (max-width: 768px) {
    .opinions-slides {
        flex: 0 0 88vw; /* Leaves a sleek side peak at upcoming slide items */
        border-radius: 16px;
    }

    .opinions-slides .wt {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1.25rem;
    }

    .opinions-slides .wt h2 {
        font-size: 1.35rem;
    }
}

/* ==========================================================
   GLOBAL SAFETY VALVE (Nukes Right-Side Browser Blowouts)
   ========================================================== */
html,
body, 
main, 
#main-wrapper,
.region-content {
    overflow-x: hidden !important;
}








/* 1. Force the person and occupation fields to become inline text elements */
.node__content .field--name-field-person,
.node__content .field--name-field-occupation {
    display: inline !important;
    width: auto !important;
    float: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* 2. Automatically insert a comma and space right after the name */
.node__content .field--name-field-person::after {
    content: ",\00a0" !important; /* Decodes to a comma and a non-breaking space */
}

/* 3. Force the main body text field to break down onto a fresh line */
.node__content .field--name-body {
    display: block !important;
    clear: both !important;
    margin-top: 15px !important; /* Creates spacing between the author line and the text */
}










#block-lumiris-views-block-timeline-block-1,
.block-views-blocktimeline-block-1,
.view-id-timeline,
.history-viral-timeline {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
/* --- 2. THE UNLOCK TRANSITION --- */
body.timeline-active #block-lumiris-views-block-timeline-block-1,
body.timeline-active .block-views-blocktimeline-block-1,
body.timeline-active .view-id-timeline {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    background-color: #121214 !important;
    border-radius: 16px !important;
}
body.timeline-active .view-id-timeline {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0px auto !important;
    box-sizing: border-box !important;
}
/* --- 3. THE DEEP DIVE PREMIUM CARD CORE GRAPHICS --- */
.deep-dive-card {
    background: linear-gradient(135deg, #0f0f11 0%, #16161a 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    margin: 40px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.dd-content {
    max-width: 45%;
    z-index: 2;
}
.dd-tag {
    color: #00695c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 16px;
}
.dd-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px 0;
    color: #ffffff !important;
    letter-spacing: -0.02em;
}
.dd-description {
    color: #9a9a9e !important;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 36px 0;
}
/* FORCES PERFECT ROW ALIGNMENT AND PREVENTS LINE BREAKS */
.dd-action-area {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 32px !important;
    flex-wrap: nowrap !important;
}
/* --- APPLE INSPIRED WHITE CTA TRIGGER BUTTON --- */
.cta-button {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    border-radius: 24px !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease !important;
    outline: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.cta-button:hover {
    background-color: #f5f5f7 !important;
    transform: scale(1.02) !important;
}
.cta-button:active {
    transform: scale(0.98) !important;
}
.cta-arrow {
    transition: transform 0.2s ease;
}
.cta-button:hover .cta-arrow {
    transform: translateX(2px);
}
.dd-counter {
    color: #4e4e52;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
    display: inline-block !important;
}
/* --- ISOMETRIC FLOATING GRAPHICS COMPONENT CONTAINER --- */
.dd-graphics-mockup {
    flex: 1;
    position: relative;
    height: 300px;
    margin-left: 40px;
    z-index: 1;
}
.mockup-isometric-track {
    position: absolute;
    width: 140%;
    height: 100%;
    top: 10%;
    left: -10%;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: perspective(800px) rotateX(55deg) rotateZ(-25deg);
    opacity: 0.4;
    mask-image: linear-gradient(to right, transparent, #fff 40%, #fff 80%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #fff 40%, #fff 80%, transparent);
}
/* Responsive Structural Fallbacks */
@media (max-width: 992px) {
    .deep-dive-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px;
    }
    .dd-content {
        max-width: 100%;
    }
    .dd-graphics-mockup {
        width: 100%;
        margin-left: 0;
        margin-top: 40px;
        height: 150px;
    }
}





.node-type-news .spic img, .node-type-sponsored-posts-news .spic img {
    width: 100%;
    height: 450px !important;
    margin: 0;
    z-index: -10;
    object-fit: cover;
    border-radius: 10px;
}





/* ==========================================================
   EYERYS - DYNAMIC MODERN LABEL PILL STYLE
   ========================================================== */

.field--name-field-label {
    margin-top: 10px !important;
    margin-bottom: 24px !important;
    display: block !important;
}

.field--name-field-label .field__item a {
    /* 1. Structural Flex Shape */
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    
    /* 2. Apple Typographic Refinement */
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-decoration: none !important;
    
    /* 3. Deep Teal Theme Matrix */
    color: #00695c !important;
    background-color: rgba(0, 105, 92, 0.07) !important; /* Soft 7% opacity tint */
    border-radius: 20px !important; /* Perfect pill architecture */
    
    /* 4. Fluid Interaction Hardware Engine */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform, background-color;
}

/* Premium Hover State Response */
.field--name-field-label .field__item a:hover {
    color: #ffffff !important;
    background-color: #00695c !important; /* Solid block fill on hover */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 105, 92, 0.2) !important;
}






/* ==========================================================
   Lumiris Theme: Customized Timeline & Year Jump Selector
   ========================================================== */

/* 1. Target your exact view block wrapper to force the dark canvas background */
#block-lumiris-views-block-timeline-block-1 {
    background-color: #0B0B0F !important;
    padding: 60px 40px !important;
    color: #FFFFFF !important;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 2. Exposed Year Jump Menu Dropdown Wrapper */
#block-lumiris-views-block-timeline-block-1 .views-exposed-form {
    background-color: #121218 !important;
    padding: 20px 24px !important;
    border-radius: 12px !important;
    margin-bottom: 50px !important;
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Jump Menu Text Label */
#block-lumiris-views-block-timeline-block-1 .views-exposed-form label {
    color: #A3A3A3 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Dropdown Selector Input Box */
#block-lumiris-views-block-timeline-block-1 .views-exposed-form select {
    background-color: #1A1A24 !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    outline: none !important;
    cursor: pointer !important;
    min-width: 140px !important;
}

/* Filter Submit Button */
#block-lumiris-views-block-timeline-block-1 .views-exposed-form .form-submit {
    background-color: #7A3BFF !important; /* Lumiris Timeline Purple Accent */
    color: #FFFFFF !important;
    border: none !important;
    padding: 11px 24px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

#block-lumiris-views-block-timeline-block-1 .views-exposed-form .form-submit:hover {
    background-color: #6126E6 !important;
}

/* 3. The Central Vertical Line Track */
#block-lumiris-views-block-timeline-block-1 .view-content {
    position: relative !important;
    max-width: 800px !important;
    margin: 40px auto !important;
    padding-left: 60px !important; 
    border-left: 2px solid #00695c !important; /* Subtle timeline spine track line */
}

/* 4. Individual Content Entry Rows */
#block-lumiris-views-block-timeline-block-1 .views-row {
    position: relative !important;
    margin-bottom: 56px !important;
}

/* 5. The Timeline Connecting Dot Node Layer */
#block-lumiris-views-block-timeline-block-1 .views-row::before {
    content: '' !important;
    position: absolute !important;
    left: -68px !important; /* Centers dot over your 2px border line */
    top: 6px !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background-color: #00695c !important;
    z-index: 10 !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

/* Glow highlight state when hovering near an era node item */
#block-lumiris-views-block-timeline-block-1 .views-row:hover::before {
    background-color: #FFFFFF !important;
    transform: scale(1.4) !important;
}

/* 6. Typography Formatting Structure */
#block-lumiris-views-block-timeline-block-1 .timeline-time-node {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #7A3BFF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 6px !important;
}

#block-lumiris-views-block-timeline-block-1 .timeline-title,
#block-lumiris-views-block-timeline-block-1 .timeline-title a {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    margin: 0 0 12px 0 !important;
}

#block-lumiris-views-block-timeline-block-1 .timeline-body-content {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #A3A3A3 !important; /* Soft gray for seamless dark reading readability */
    margin: 0 !important;
}




.midpic {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.cap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    /* SF Pro style tracked typography: slight letter expansion */
    letter-spacing: -0.01em !important; 
    /* Subdued, premium mid-gray text tone */
    color: #8E8E93 !important; 
    text-transform: uppercase !important;
    transition: color 0.3s ease !important;
    margin-bottom: 2rem !important;
}

.midpic + .cap {
    margin-top: -2rem !important;  /* Cancels the image's bottom margin */
}




.quotes {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
    font-size: 15px !important; /* Huge scale drop */
    font-style: italic;
    line-height: 1.15 !important;
    font-weight: 700 !important; /* Extra heavy weight */
    letter-spacing: -0.04em !important; /* Tight display spacing */
    margin-bottom: 16px !important;
}

article.node .node__content,
.layout-content main .block-system-main-block {
    max-width: 800px !important;
    
    /* Centers the entire text field column within its parent Bootstrap container grid */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Padding maintains a safety margin on mobile viewports so text doesn't touch screen edges */
    padding-left: 20px !important;
    padding-right: 20px !important;
    
    width: 100% !important;
}

/* Hide Drupal Views default RSS feed icon link completely */
.feed-icon, 
.views-data-feed,
[class*="feed-icon"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}









/* =========================================================================
   Universal Media & Embed Containment System (800px Max)
   ========================================================================= */

/* 1. Force Inline Images, Media Elements, and Fluid Layout Boxes */
article.node .node__content img,
article.node .node__content video,
article.node .node__content figure,
article.node .node__content .media {
    max-width: 800px !important;
    width: 100% !important;
    height: auto !important; /* Prevents skewed/stretched aspect ratios */
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    border-radius: 16px !important; /* Smoothly rounds the newly cropped 800x450 boundary */
}





/* ==========================================================
   EYERYS - NON-DESTRUCTIVE 16:9 DYNAMIC HERO CROP
   ========================================================== */

/* Target the news image block securely using your layout classes from image_bcb03c.jpg */
.field--name-field-news-image img,
.field--name-field-news-image .img-fluid {
    display: block !important;
    width: 100% !important;
    max-width: 800px !important; /* Locks the maximum upscale boundary */
    
    /* 1. Force the new geometric box proportions */
    aspect-ratio: 16 / 9 !important; /* Converts the box directly to a 450px height profile */
    height: auto !important; /* Instructs browser to disregard the hardcoded height="800" attribute */
    
    /* 2. Act as a dynamic lens canvas (The magic fix) */
    object-fit: cover !important; /* Center-crops the file natively without stretching pixels */
    object-position: center center !important; /* Pins the cropping focal point directly in the middle */
    
    /* 3. Rounded Corner Architecture & Depth */
    border-radius: 16px !important; /* Smoothly rounds the newly cropped 800x450 boundary */
    overflow: hidden !important; /* Forces the image pixels to clip neatly to the radius curve */
    
}





/* 2. Force Video/Map Embed iFrames and Object Blocks */
article.node .node__content iframe,
article.node .node__content embed,
article.node .node__content object {
    max-width: 800px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* 3. Pro-Tip: Preserve Aspect Ratio for Responsive iFrame Video Embeds */
/* If your YouTube/Vimeo iframes look too squished or flat, wrap them in this container */
.responsive-embed-wrapper {
    max-width: 800px !important;
    width: 100% !important;
    position: relative !important;
    padding-bottom: 56.25% !important; /* Perfect 16:9 Aspect Ratio widescreen layout box */
    height: 0 !important;
    overflow: hidden !important;
    margin: 32px auto !important;
}

.responsive-embed-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important; /* Overrides global rules inside this wrapper */
}






/* ==========================================================
   Drupal Contextual Links Layout Fix (Self-Hiding)
   ========================================================== */
/* Force the admin button container to stay tightly pinned to its corner */
.contextual-region .contextual {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 999 !important;
}

/* Fix the list width without forcing it to show when it shouldn't */
.contextual-region .contextual-links {
    width: auto !important;             /* Collapses the massive width completely */
    min-width: 0 !important;
    max-width: 200px !important;        /* Strict width boundary */
    padding: 8px !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Maintain Drupal's native hiding mechanisms for non-hovered menus */
.contextual-region .contextual [hidden],
.contextual-region .contextual .visually-hidden,
.contextual-region .contextual ul[hidden] {
    display: none !important;           /* Re-hides them instantly unless triggered */
}

/* Format the layout of the drop-down elements cleanly when active */
.contextual-region .contextual-links li {
    display: block !important;          
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.contextual-region .contextual-links li a {
    display: block !important;
    white-space: nowrap !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    width: auto !important;
}










/* ==========================================================
   Homepage-Isolated Editorial Block Layout
   ========================================================== */

/* Structure & Layout Framework */
.eyerys-homepage-only-section {
    width: 100% !important; 
    clear: both !important; 
    display: block !important; 
    box-sizing: border-box !important;
}

.eyerys-flex-container {
    width: 100% !important; 
    max-width: 1140px !important; 
    margin: 40px auto !important; 
    padding: 0 !important; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
    display: flex !important; 
    flex-direction: row !important; 
    flex-wrap: wrap !important; 
    align-items: flex-start !important; 
    justify-content: space-between !important; 
    box-sizing: border-box !important;
}

/* Columns Constraints */
.eyerys-heading-column {
    flex: 0 0 35% !important; 
    min-width: 280px !important; 
    box-sizing: border-box !important; 
    padding-right: 30px !important; 
    margin-bottom: 24px !important;
}

.eyerys-content-column {
    flex: 0 0 60% !important; 
    min-width: 320px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 20px !important; 
    box-sizing: border-box !important;
}

/* Typography & Visual Styles */
.eyerys-heading-column h2 {
    font-size: 3rem !important; 
    font-weight: 800 !important; 
    line-height: 1.1 !important; 
    letter-spacing: -0.04em !important; 
    color: #1d1d1f; 
    margin: 0 !important;
}

.eyerys-content-column .eyerys-lead-text {
    font-size: 1.35rem !important; 
    font-weight: 600 !important; 
    line-height: 1.4 !important; 
    letter-spacing: -0.02em !important; 
    color: #1d1d1f !important; 
    margin: 0 !important;
}

.eyerys-content-column p {
    font-size: 1.05rem !important; 
    line-height: 1.6 !important; 
    color: #515154; 
    margin: 0 !important;
}

.eyerys-link-wrapper {
    margin-top: 8px !important;
}

.eyerys-link-wrapper a {
    display: inline-flex !important; 
    align-items: center !important; 
    font-weight: 600 !important; 
    color: #009688 !important; 
    text-decoration: none !important; 
    font-size: 1.05rem !important;
}

/* ==========================================================
   Strict Scope Logic (Targets Only Homepage Teaser Shell)
   ========================================================== */
/* Erases the rogue green node title exclusively on the frontpage view */
.view-frontpage article.node--view-mode-teaser > h2 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Forces the narrow system container to stretch safely out to full horizontal range */
.view-frontpage article.node--view-mode-teaser,
.view-frontpage article.node--view-mode-teaser .node__content {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}



/* ==========================================================
   Apple-Inspired Premium Site Navigation Stylizing
   ========================================================== */

/* Main navigation list container */
ul.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 28px !important; /* Elegant spacing between nav links */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Individual list items */
ul.navbar-nav .nav-item {
    position: relative !important; /* Anchors the absolute hover underline position */
}

/* Base style for nav link items */
ul.navbar-nav .nav-link {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important; /* Clean, intentional medium weight */
    color: #1d1d1f !important; /* Apple premium dark text slate */
    letter-spacing: -0.01em !important; /* Tight professional tracking */
    padding: 8px 0 !important; /* Vertical room with zero horizontal padding to protect the underline width */
    text-decoration: none !important;
    opacity: 0.8 !important;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Subtle link opacity fade on hover */
ul.navbar-nav .nav-link:hover {
    opacity: 1 !important;
}

/* ==========================================================
   Smooth Animated Underline Reveal Effect
   ========================================================== */
/* Create a hidden underline element dynamically beneath each link item */
ul.navbar-nav .nav-item::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important; /* Crisp thin underline line weight */
    background-color: #009688 !important; /* Matches your premium brand green accent color */
    
    /* Animation settings: Start collapsed from the center/left scale */
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Animate the underline outwards on item hover states */
ul.navbar-nav .nav-item:hover::after {
    transform: scaleX(1) !important; /* Expands line smoothly out to full text width */
}

/* Keep the underline active permanently if on the current active page */
ul.navbar-nav .nav-item.active::after,
ul.navbar-nav .nav-link.is-active::after {
    transform: scaleX(1) !important;
    background-color: #1d1d1f !important; /* Active indicator subdues to minimal slate gray */
}








/* ==========================================================
   Premium Footer Override & Structural Reset
   ========================================================== */
/* Strip away the hardcoded dark Bootstrap parameters visible in image_6fff5d.jpg */
footer[role="contentinfo"].footer-dark.bg-secondary {
    background-color: #ffffff !important; /* Forces background container to pure white canvas */
    color: #1d1d1f !important;            /* Globally switches default fallback texts to slate dark */
    border-top: 1px solid #f2f2f7 !important; /* Soft minimal separation rule */
    padding: 60px 0 40px 0 !important;
}

/* Clear standard constraints from interior block utility classes */
footer[role="contentinfo"] .container,
footer[role="contentinfo"] .region-footer {
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}

/* Interior Component Grid Constraints */
.eyerys-footer-container {
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

/* Brand Column Representation Styling */
.eyerys-footer-brand {
    flex: 0 0 25% !important;
    min-width: 200px !important;
    margin-bottom: 30px !important;
}

.eyerys-footer-brand .footer-logo {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    color: #1d1d1f !important;
    margin: 0 0 12px 0 !important;
}

.eyerys-footer-brand .footer-tagline {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #86868b !important;
    margin: 0 !important;
}

/* Links Columns Grid Architecture */
.eyerys-footer-links-grid {
    flex: 0 0 45% !important;
    min-width: 300px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

.footer-column h4 {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    color: #1d1d1f !important;
    margin: 0 0 16px 0 !important;
}

.footer-column ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-column ul li {
    margin-bottom: 10px !important;
}

.footer-column ul li a {
    font-size: 13px !important;
    color: #515154 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.footer-column ul li a:hover {
    color: #009688 !important;
}

/* Metadata & Social Actions Stack */
.eyerys-footer-meta {
    flex: 0 0 20% !important;
    min-width: 180px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    margin-bottom: 30px !important;
}

.footer-socials {
    display: flex !important;
    gap: 8px !important; /* Kept tight so 5 icons fit comfortably across the block */
    margin-bottom: 24px !important;
}

/* --- Integrated Sprite Sheet System --- */
.footer-socials .social1, 
.footer-socials .social2, 
.footer-socials .social3, 
.footer-socials .social4, 
.footer-socials .social5 {
    width: 40px !important;
    height: 40px !important;
    display: inline-block !important;
    background: url(https://www.eyerys.com/sites/default/files/assets/socialmedia-icons_sprite-min.png) no-repeat !important;
    transition: opacity 0.2s ease !important;
}

/* Subtle visual hover effect since color filters won't work on background sprites */
.footer-socials a:hover {
    opacity: 0.8 !important;
}

/* Precise Sprite Positions */
.footer-socials .social1 { background-position: 0 0 !important; }
.footer-socials .social2 { background-position: -41px 0 !important; }
.footer-socials .social3 { background-position: -82px 0 !important; }
.footer-socials .social4 { background-position: -123px 0 !important; }
.footer-socials .social5 { background-position: -164px 0 !important; }

.footer-copyright {
    font-size: 12px !important;
    color: #86868b !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Responsive Viewport Grid Collapsing */
@media (max-width: 768px) {
    .eyerys-footer-container {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .eyerys-footer-brand, .eyerys-footer-links-grid, .eyerys-footer-meta {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    .eyerys-footer-meta {
        align-items: flex-start !important;
    }
}











/* ==========================================================
   EYERYS 404 PAGE
========================================================== */

.eyerys-404{

    width:min(900px,92%);
    margin:120px auto 160px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

}

.eyerys-404-number{

    font-size:clamp(6rem,18vw,12rem);

    font-weight:700;

    line-height:.9;

    letter-spacing:-.05em;

    color:#f06624;

    margin-bottom:24px;

}

.eyerys-404 h1{

    font-size:clamp(2rem,5vw,3rem);

    font-weight:600;

    letter-spacing:-.03em;

    color:#f06624;

    margin:0;

}

.eyerys-404 p{

    margin:28px auto 50px;

    max-width:640px;

    font-size:1.15rem;

    line-height:1.8;

    color:#6e6e73;

}

.eyerys-404-actions{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

}

.eyerys-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 34px;

    border-radius:999px;

    background:#000;

    color:#fff;

    text-decoration:none;

    font-weight:500;

    transition:.25s;

}


@media (max-width:768px){

    .eyerys-404{

        margin:80px auto;

    }

    .eyerys-404-actions{

        flex-direction:column;

        width:100%;

    }

    .eyerys-btn{

        width:100%;

    }

}