/**
 * Theme Name: JobScout Child
 * Author: Rara Theme
 * Template: jobscout
 * Text Domain: jobscout-child
 * Description: JobScout free WordPress theme - Global styles only
 * NOTE: ALL job listing styles are in includes/job-manager/job-styling.php
 */

/* ========================================
   BASE OVERRIDES - Site Structure
   ======================================== */
.single_job_listing .company .company_header {
    margin: auto;
}
.single-job_listing .site-main .single_job_listing .company {
    display: none;
}
.header-main {
    padding: 5px 0 !important;
    min-height: 78px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.footer-t {
    background: #0F4CFF;
}
.site-header,
.header-main {
    /* !important wins over the plain `background:#fff` below because this was
       originally merged in later from the Customizer "Additional CSS" box */
    background-color: #002DF2 !important;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 76, 255, 0.1);
}
.page-template-default figure.post-thumbnail {
    margin-bottom: 2px;
}
.page-template-default figure.post-thumbnail a.post-thumbnail {
    outline-offset: 2px;
}

/* ========================================
   GLOBAL FONT SETTINGS
   ======================================== */
body {
    font-family: "Hind Siliguri", Georgia, "Times New Roman", Times, serif !important;
    background-color: #f9fbfff7;
}
.site-main article .entry-content {
    margin: 10px 7px;
}
ul, ol {
    margin: 0 0 1.5em;}
    
p, li, ol, ul {
    font-size: 16px !important;
    font-family: "Times New Roman", "Hind Siliguri", serif !important;
    margin-bottom: .5em;
}
img {
    height: auto;
    max-width: 100%;
    vertical-align: top;
    border-radius: 10px;
}
.wp-block-media-text,
.wp-block-cover {
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}
.widget {
    margin: 10px;
}

/* ========================================
   LIST STYLE UPDATES - SQUARE FILLED BOX
   ======================================== */
.entry-content ul li,
.post-content ul li,
article.post .entry-content ul li,
article.page .entry-content ul li,
.single .site-main .entry-content ul li {
    position: relative !important;
    list-style: none !important;
    padding-left: 25px !important;
}
.entry-content ul li:before,
.post-content ul li:before,
article.post .entry-content ul li:before,
article.page .entry-content ul li:before{
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #0F4CFF !important;
    border-radius: 50% !important;
    background-image: none !important;
    transform: translateY(-50%) !important;
}
.single .site-main .entry-content ul li:before {
    left: 15px !important;
}

.single-job .site-content .site-main .entry-content ul {
    padding-left: 7px;
}
/* Remove bullets from Select2 and Job Type filters */
.select2-selection__choice,
li.select2-selection__choice,
ul.job_types li,
.job_types li {
    list-style: none !important;
    padding-left: 0 !important;
}
.select2-selection__choice:before,
li.select2-selection__choice:before,
ul.job_types li:before,
.job_types li:before,
.job_filters .select2-selection__rendered li::before,
.job_filters .select2-selection__choice::before {
    content: none !important;
    display: none !important;
    background: none !important;
}
.entry-content ol li,
.post-content ol li {
    position: relative !important;
    padding-left: 10px !important;
}
.entry-content ol li:before,
.post-content ol li:before {
    content: none !important;
}

/* ========================================
   SINGLE POST STYLING (Blog Posts)
   ======================================== */
.single-post .entry-header,
.single-post .entry-content,
.single-post .post-header,
.single-post .post-content {
    padding: 0 20px;
    color: #111827;
}
.single .site-main article .entry-content,
.single .site-main article .entry-content p,
.single .site-main article .entry-content div,
.single .site-main article .entry-content li {
    color: #111827;
    text-align: justify;
}
.single .site-main article .entry-content li {
    margin-bottom: 10px;
}
.single-job .site-content .site-main .entry-content ul li {
    padding-left: 40px !important;
    margin-bottom: 10px;
}
.entry-content a {
    color: #0F4CFF;
    text-decoration: bold;
}
.entry-content a:hover {
    color: #2159E5;
    text-decoration: none;
}
/* SEO: hide default title/page header in favor of theme's own display */
.page h1.entry-title,
.site-content > header.page-header {
    display: none;
}

/* ========================================
   PWA & ADVERTISEMENT
   ======================================== */
.pwaforwp-footer-prompt {
    display: none;
    width: 90%;
    max-width: 500px;
    line-height: 1.5em;
    color: #333;
    text-align: center;
    text-decoration: none;
    padding: 25px;
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
    animation-duration: 1s;
    animation-fill-mode: both;
    bottom: auto !important;
}
.quads-location::after {
    content: none !important;
}
.quads-location::before {
    content: "Advertisement";
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
}
.quads-location img {
    display: block;
    margin: 0 auto;
    border: 2px solid #BCCFFF;
    border-radius: 6px;
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 12px rgba(15, 76, 255, 0.08);
}

/* ========================================
   BLOG ARCHIVE LISTING - MODERN GRID
   ======================================== */
.blog .site-main,
.archive .site-main,
.search .site-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 20px 0;
}
.blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 76, 255, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(15, 76, 255, 0.12);
}
.blog .site-main article,
.archive .site-main article,
.search .site-main article {
    margin: 0 !important;
    padding: 0 !important;
}
.blog-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
}
.blog-card-thumbnail {
    width: 100%;
    height: 220px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: transparent;
    position: relative;
}
.blog-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    transition: transform 0.4s ease;
    padding: 0; /* no padding on image */
    box-sizing: border-box;
}
.blog-card:hover .blog-card-image {
    transform: scale(1.05);
}
.blog-card-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}
.blog-card-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #111827;
    margin: 0 0 5px 0;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card:hover .blog-card-title {
    color: #0F4CFF;
}
.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
}
.blog-card-comments {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: #83829A;
    font-weight: 500;
}
.blog-card-comments svg {
    width: 10px;
    height: 18px;
    color: #777;
    flex-shrink: 0;
}
.comment-count {
    white-space: nowrap;
}
/* Hide default elements */
.blog .site-main article .entry-meta,
.archive .site-main article .entry-meta,
.blog .site-main article .entry-header,
.archive .site-main article .entry-header,
.blog .site-main article .entry-footer,
.archive .site-main article .entry-footer,
.blog .site-main article .entry-content,
.archive .site-main article .entry-content,
.blog .site-main article .content-wrap,
.archive .site-main article .content-wrap,
.blog .site-main article .post-thumbnail,
.archive .site-main article .post-thumbnail {
    display: none !important;
}
/* Show custom structure */
.blog-card .blog-card-thumbnail,
.blog-card .blog-card-content {
    display: flex !important;
}
/* Sidebar adjustments */
.blog #primary.content-area,
.archive #primary.content-area {
    width: 100%;
}
body.blog:not(.full-width) .site-main,
body.archive:not(.full-width) .site-main {
    grid-template-columns: repeat(2, 1fr);
}

/* ========================================
   BLOG CAROUSEL (Front Page) - scroll-snap peek carousel
   ======================================== */
.blog-carousel-wrap {
    position: relative;
    margin-bottom: 30px;
    padding: 0; /* arrows removed, no side gutters needed */
}
.frontpage-blog-carousel {
    display: flex;
    gap: 20px;
    margin-bottom: 0;
    padding: 5px 0 10px; /* keeps hover lift + shadow from clipping */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.frontpage-blog-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
/* 1.8 cards on mobile/tablet - widened from the previous 2.0-card
   divisor (2.0 -> 1.8) so each card reads noticeably larger. Desktop
   sizing is unaffected and widens/narrows separately via the
   min-width:1024px override below. */
.frontpage-blog-carousel .blog-card {
    flex: 0 0 calc((100% - (20px * 2)) / 1.8);
    max-width: calc((100% - (20px * 2)) / 1.8);
    height: auto;
    scroll-snap-align: start;
    margin: 0;
}
.blog-carousel-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}
.blog-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e0e4f5;
    cursor: pointer;
    transition: all 0.3s ease;
}
.blog-carousel-dot.is-active,
.blog-carousel-dot:hover {
    background: #0F4CFF;
    width: 22px;
    border-radius: 5px;
}
/* Safety: hide any leftover Owl arrows/dots in this section */
.blog-carousel-wrap .owl-nav,
.blog-carousel-wrap .owl-dots {
    display: none !important;
}

/* ========================================
   BLOG SECTION HEADER (left label / right "See all" link)
   Shown above the desktop carousel. On mobile this is hidden and
   replaced by the mobile banner's own header (see below).
   ======================================== */
.blog-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 5px;
}
.blog-section-label {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}
.blog-section-viewall {
    font-size: 15px;
    font-weight: 600;
    color: #0F4CFF;
    text-decoration: none;
    white-space: nowrap;
}
.blog-section-viewall:hover,
.blog-section-viewall:focus {
    color: #2159E5;
    text-decoration: underline;
}

/* ========================================
   MOBILE BLOG BANNER SLIDER (Front Page)
   - Hidden everywhere by default so desktop is 100% untouched.
   - Fully styled only inside the ≤767px mobile media query below.
   ======================================== */
.mobile-blog-banner {
    display: none;
}

/* ========================================
   HEADER & NAVIGATION CUSTOMIZATION
   ======================================== */
.header-main .main-navigation .toggle-btn {
    background-color: rgba(255, 255, 255, 0.15);
    border: 0;
    border-radius: 10px;
}
.header-main .main-navigation .toggle-btn .toggle-bar {
    background-color: #ffffff;
}
.header-main .main-navigation .toggle-btn .toggle-bar:hover {
    background-color: #4277E0;
    color: #fff !important;
}

.header-main .main-navigation ul#primary-menu > li > a,
.header-main .main-navigation ul,
.header-main .site-title a,
.header-main .site-description {
    color: #ffffff !important;
}
.site-header ul {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 4px;
}
.site-header ul li a {
    font-size: 13px;
    padding: 4px 8px;
}
/* Reset dropdown - don't inherit the nowrap flex */
.main-navigation ul ul {
    display: block;
    flex-wrap: unset;
    overflow-x: unset;
    white-space: normal;
    width: auto;
    min-width: 180px;
}
.main-navigation ul ul li {
    width: 100%;
    white-space: nowrap;
}
.main-navigation ul ul li a {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-size: 14px;
    white-space: nowrap;
}
.main-menu-modal ul.nav-menu li a,
.main-menu-modal .site-title a,
.main-menu-modal .close-main-nav-toggle {
    color: #ffffff !important;
}
.main-menu-modal ul.nav-menu li a:hover,
.main-menu-modal ul.nav-menu li.current-menu-item > a,
.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current-menu-ancestor > a,
.main-navigation ul li.current_page_ancestor > a {
    color: #F0F4FF !important;
}
.single_job_listing .application .application_button {
    color: #111827;
}
form.search-form input.search-submit {
    background: #222322;
}

/* ========================================
   SEARCH BLOCK FIXES (Gutenberg search widget)
   ======================================== */
/* Fix: Gutenberg's inline `style="width:341px"` on the search wrapper
   overflows narrow viewports and pushes the block out of its area.
   align-items:stretch keeps input/button the same height. */
.wp-block-search__inside-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
}
.wp-block-search__input {
    height: 50px !important;
    border-radius: 5px 0 0 5px !important;
}
/* Fix: icon color is independent of button background - set explicitly
   so it stays white against the blue button */
.wp-block-search__button {
    background: #2159E5 !important;
    color: #fff !important;
}
/* Fix: the icon svg was sizing itself with em units relative to an
   oversized button font, so it grew bigger than the button box and
   visually overflowed out to the right as a separate pale square.
   Force the button to a fixed square, center + clip its contents, and
   pin the icon to a fixed px size so it always sits inside the button. */
.wp-block-search__button.has-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border-radius: 0 5px 5px 0 !important;
}
.wp-block-search__button svg,
.wp-block-search__button svg use {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    fill: #fff !important;
}
/* Fix: post navigation links were inheriting a theme-default green
   instead of the site's blue accent */
.post-navigation .nav-links a {
    color: #0F4CFF !important;
}
.post-navigation .nav-links a:hover {
    color: #2159E5 !important;
}
/* Fix: nested flex containers don't collapse margins like normal block
   flow, so stacked margin-top/bottom values on .ix-auth-wall's ancestors
   were adding up into one large empty gap above the login prompt */
.ix-auth-wall,
.ix-auth-wall > * {
    margin-top: 0 !important;
}
#content.site-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.menu-wrap .btn-wrap {
    width: 150px;
    text-align: center;
}
.bg-cta-section {
    border-radius: 30px;
    padding: 5px 0 5px 0;
    background-color: #fff;
    margin: 15px 0;
}

/* ========================================
   TOP JOB SECTION / LOAD MORE / BUTTONS
   ======================================== */
.top-job-section div.job_listings .load_more_jobs {
    display: table;
    margin: 20px auto 0 auto;
    font-size: 0.8888em;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #0F4CFF;
    border-radius: 5px;
    color: #fff;
    padding: 12px 20px 12px 45px;
    border: 1px solid #0F4CFF;
    position: relative;
}
.top-job-section div.job_listings .load_more_jobs:hover {
    background: #2159E5;
    border-color: #2159E5;
}
.top-job-section div.job_listings .load_more_jobs::before {
    content: "";
    background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23fff" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>');
    background-repeat: no-repeat;
    width: 11px;
    height: 12px;
    position: absolute;
    top: 17px;
    left: 20px;
}
a.btn {
    display: inline-block;
    background: white;
    border: 1px solid #0F4CFF;
    color: #0F4CFF;
    font-weight: 700;
    font-size: 0.888em;
    border-radius: 5px;
}
a.btn:hover,
a.btn:focus {
    background: #2159E5;
    color: #fff;
    border-color: #2159E5;
}
div.job_listings .load_more_jobs {
    display: table;
    border: 1px solid #0F4CFF;
    text-transform: uppercase;
    font-size: 0.7778em;
    font-weight: 400;
    background: #0F4CFF;
    color: #fff;
    padding: 15px 20px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}
div.job_listings .load_more_jobs:hover {
    border: 0;
    background: #4277E0;
    color: #fff;
}
.list-view .site-main article {
    box-shadow: 0 2px 8px rgba(15, 76, 255, 0.05);
    border: none;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    display: inline-block;
    background: #fff;
    border: 1px solid #0F4CFF;
    color: #333 !important;
    font-weight: 700;
    font-size: 0.888em;
    border-radius: 5px;
    padding: 10px 18px;
    cursor: pointer;
    transition: all ease 0.35s;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    background: #0F4CFF;
    color: #fff !important;
    border-color: #0F4CFF;
}
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
    outline: thin dotted #0F4CFF;
    outline-offset: 2px;
}

/* ==========================================================================
   PREMIUM ULTIMATE MEMBER TABBED PORTAL CARD DESIGN (COMPACT)
   ========================================================================== */
.um-auth-card {
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08), 0 0 1px rgba(15, 23, 42, 0.08) !important;
    max-width: 400px;
    margin: 40px auto !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.um-auth-tabs {
    display: flex !important;
    background: #f1f5f9 !important;
    padding: 6px !important;
    gap: 4px !important;
    border-bottom: none !important;
}
.um-tab-btn {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    cursor: pointer !important;
    text-align: center !important;
    border-radius: 8px !important;
    transition: none !important;
}
.um-tab-btn.active {
    color: #2563eb !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}
.um-tab-btn:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px #2563eb !important;
    border-radius: 8px !important;
}
.um-tab-content {
    display: none;
    padding: 24px;
}
.um-tab-content.active {
    display: block !important;
    animation: none !important;
}

/* ==========================================================================
   INTERNAL ULTIMATE MEMBER FIELD & BUTTON OVERRIDES
   ========================================================================== */
.um-auth-panels .um-form {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}
.um-field-label label {
    font-weight: 500 !important;
    color: #475569 !important;
    font-size: 12px !important;
    margin-bottom: 6px !important;
}
.um-field {
    margin-bottom: 16px !important;
    padding: 0 !important;
}
.um .um-form input[type="text"],
.um .um-form input[type="password"] {
    background-color: #f8fafc !important;
    border: none !important;
    border-radius: 8px !important;
    color: #0f172a !important;
    padding: 0 14px !important;
    height: 44px !important;
    font-size: 16px !important;
    transition: none !important;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
}
.um .um-form input[type="text"]:focus,
.um .um-form input[type="password"]:focus,
.um .um-form input[type="text"]:focus-visible,
.um .um-form input[type="password"]:focus-visible {
    background-color: #ffffff !important;
    outline: none !important;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.35), inset 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
.um .um-button,
input[type=submit].um-button,
.um-button.um-alt {
    background: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 20px !important;
    text-transform: none !important;
    transition: none !important;
    box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.25) !important;
    margin-top: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
}
.um .um-button:focus-visible,
input[type=submit].um-button:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 6px 16px -4px rgba(37, 99, 235, 0.25) !important;
    border-radius: 8px !important;
}
.um-login .um-col-alt, .um-register .um-col-alt {
    margin-top: 16px !important;
    padding: 0 !important;
}
.um-login .um-link-alt, .um-register .um-link-alt {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: none !important;
    padding: 2px 0 !important;
    outline: none !important;
}
.um-login .um-link-alt:focus-visible,
.um-register .um-link-alt:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 1px #2563eb !important;
    border-radius: 3px !important;
    color: #2563eb !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE BRANDING (logo + site title, all breakpoints)
   -------------------------------------------------------------------------- */
.site-branding {
    float: none;
    margin: 0;
    padding: 0;
}
.site-branding .site-logo,
.site-branding .custom-logo-link {
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
    display: block;
}
.site-branding .custom-logo-link img {
    margin: 0;
    padding: 0;
    display: block;
    width: auto;
}
.site-branding .site-title-wrap {
    margin: 0 !important;
    padding: 0 !important;
}
.site-branding .site-title,
.site-branding .site-description {
    margin: 0;
    padding: 0;
    display: block;
}
.site-branding .site-title a {
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
}
.site-branding .site-description {
    white-space: nowrap;
    color: #fff9 !important;
    font-size: 10px !important;
}

/* ========================================================================
   CONSOLIDATED MEDIA QUERIES
   ======================================================================== */

/* Desktop (>1024px) */
@media (min-width: 1025px) {
    .site-branding {
        display: flex;
        align-items: center;
        gap: 0;
    }
    .site-branding .custom-logo-link img {
        max-height: 48px;
    }
    .site-branding .site-title a {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.1;
    }
    .site-branding .site-description {
        line-height: 1.1;
        margin-top: 1px !important;
    }
}

/* Desktop carousel - width & height reduced 15% vs the original 3.5-card
   divisor (3.5 / 0.85 ≈ 4.118). Height tracks width automatically via
   the aspect-ratio rule on .blog-card-thumbnail below, so it shrinks
   proportionally without a separate height rule. */
@media (min-width: 1024px) {
    .frontpage-blog-carousel {
        gap: 25px;
    }
    .frontpage-blog-carousel .blog-card {
        flex: 0 0 calc((100% - (25px * 3)) / 4.118);
        max-width: calc((100% - (25px * 3)) / 4.118);
    }
}

/* ≤1024px: header height, article section spacing, tablet header layout,
   blog card image sizing (all merged into a single max-width:1024px block) */
@media (max-width: 1024px) {
    .header-main {
        min-height: 42px;
    }
    section.article-section {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Tablet header layout — logo + title centered; notification left;
       hamburger menu on right.
       Layout: [Notification] [Logo+Title] [Hamburger] */
    .header-main .container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 15px;
        gap: 50px;
        padding-right: 100px;
        position: relative;
    }

    .header-main .main-navigation {
        display: contents !important;
    }
    .header-main .main-navigation > ul,
    .header-main .main-navigation .nav-menu {
        display: none !important;
    }
    /* Hamburger is back – positioned absolute right for a clean layout */
    .header-main .main-navigation .toggle-btn {
        display: block !important;
        position: absolute !important;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }
    .site-branding {
        display: inline-flex !important;
        flex-direction: row;
        align-items: center;
        flex: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left;
    }
    .site-branding .custom-logo-link img {
        max-height: 42px;
    }
    .site-branding .site-title a {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.1;
    }
    .site-branding .site-description {
        line-height: 1.1;
        margin-top: 0 !important;
    }
    /* Notification bell stays exactly where it is (left) */
    .jnb-bell-wrap {
        position: absolute !important;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    .site-branding.logo-text {
        padding-left: 100px !important;
    }

    /* Blog card image — mobile + tablet (grid/archive cards only).
       Full width of the card, fixed shorter height, object-fit: cover. */
    .blog .site-main .blog-card-thumbnail,
    .archive .site-main .blog-card-thumbnail,
    .search .site-main .blog-card-thumbnail {
        width: 100%;
        height: 100px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background: transparent;
        position: relative;
    }
    .blog .site-main .blog-card-image,
    .archive .site-main .blog-card-image,
    .search .site-main .blog-card-image {
        width: 100% !important;
        height: 100px !important;
        object-fit: cover !important;
        display: block;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

/* ========================================
   FRONTPAGE CAROUSEL CARD IMAGE
   The carousel's image size must always track the carousel card's own
   width (which changes per breakpoint: mobile/tablet vs desktop),
   NOT a separate fixed size. Using percentage width + aspect-ratio keeps
   the image and its card in sync at every breakpoint automatically -
   including the mobile/tablet and desktop width changes made above.
   ======================================== */
.frontpage-blog-carousel .blog-card-thumbnail {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: transparent;
    position: relative;
}
.frontpage-blog-carousel .blog-card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Tablet only (768–1023px): blog grid + blog card sizing */
@media (min-width: 768px) and (max-width: 1023px) {
    .blog .site-main,
    .archive .site-main,
    .search .site-main {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}
/* Card padding/title size reduction — applies tablet AND mobile
   (was tablet-only before; phones were falling back to the larger
   desktop default of padding:20px / font-size:18px) */
@media (max-width: 1023px) {
    .blog-card-content {
        padding: 8px;
    }
    .blog-card-title {
        font-size: 14px;
    }
}

/* ≤768px: UM auth card container padding + branding font sizes */
@media (max-width: 768px) {
    .widget_raratheme_companion_cta_widget .right .raratheme-cta-container {
        padding-left: 0;
        padding-right: 0;
    }
    .site-branding .custom-logo-link img {
        max-height: 38px;
    }
    .site-branding .site-title a {
        font-size: 18px;
        line-height: 1.1;
    }
    .site-branding .site-description {
        line-height: 1.1;
        margin-top: 0 !important;
    }
}
section.article-section {
    text-align: left;
}
.ixnav-trigger svg {
    width: 24px;
    height: 24px;
    stroke: #fff !important;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
    transition: stroke 0.3s ease;
}
.ixnav-trigger  {
    background:#0F4CFF !important;
    display:none !important;
}

.responsive-nav{
    background: #0f4cff !important;
}
.responsive-nav .main-navigation ul li a, .responsive-nav .secondary-nav ul li a {
    padding: 7px 20px;
    border-bottom:none;
}
.widget-area .widget ul li a:hover, .widget-area .widget ol li a:hover, .site-footer .widget ul li a:hover {
    color: #000 !important;}