/* ==========================================================================
   SKT Laboratory — Responsive Stylesheet   
   --------------------------------------------------------------------------
   Breakpoints
     >= 1025px ............ Desktop: keep horizontal menu, hide hamburger
     <= 1200px ............ Large laptop: container gutter + tighter sidebar
     <= 1024px ............ Tablet / iPad: collapsed nav, stacked content
      768px – 1024px ...... iPad portrait fine-tuning
     <= 767px ............. Phones: single column everywhere
     <= 479px ............. Small phones
     landscape ........... Phone landscape tweaks
   ========================================================================== */
body { overflow-x: hidden; }

img, picture, video, canvas, svg, iframe { max-width: 100%; }


/* ==========================================================================
   Desktop fine-tuning ( >= 1025px )
   ========================================================================== */
@media screen and (min-width: 1025px) {

    /* Keep the primary menu horizontal and the hamburger / carets hidden. */
    .menu-toggle,
    .main-navigation .dropdown-toggle {
        display: none !important;
    }

    .main-navigation > ul {
        display: flex !important;
    }
}


/* ==========================================================================
   Large laptop container squeeze ( <= 1200px )
   --------------------------------------------------------------------------
   style.css gives .container `padding: 0`, so below the 1200px max-width the
   content would touch the viewport edges. Add a consistent gutter here and
   carry it down through the smaller breakpoints.
   ========================================================================== */
@media screen and (max-width: 1200px) {

    :root { --sps-gap: 34px; }

    .container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }
    .head-bar > .container,
    .header-topbar .container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }
    #sidebar {
        flex-basis: 290px;
        width: 290px;
        max-width: 290px;
    }
    .header-topbar .left {
        margin: 0 0 0 200px;
    }
    .header-topbar .adrtp,
    .header-topbar .phntp,
    .header-topbar .emltp {
        padding: 14px 14px 14px 0;
        margin-right: 14px;
    }
    .main-navigation a { padding: 28px 13px; }
    .header > .container,
    .head-bar > .container {
        flex-wrap: nowrap;
    }
}


/* ==========================================================================
   Tablet and below ( <= 1024px ) — collapsed navigation
   ========================================================================== */
@media (max-width: 1024px) {
    .header-topbar .container {
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 0;
        min-height: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .header-topbar .left {
        margin-left: 0;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 18px;
    }
    .header-topbar .adrtp,
    .header-topbar .phntp,
    .header-topbar .emltp {
        border-right: 0;
        padding: 4px 0;
        margin-right: 0;
        font-size: 14px;
    }
    .header-topbar .right { margin-left: auto; }

    .social-icons {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 0px;
    }
    .social-icons a {
        width: 36px;
        height: 36px;
    }
	
	.rfl-row{margin:50px 0 0 0;}

    /* Clean, chip-free logo on small screens. */
    .logo,
    body.wp-custom-logo .logo {
        margin-top: 0;
        margin-right: auto;
        width: auto;
        max-width: 220px;
        min-height: 0;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
    }
    .logo::before { display: none; }

    /* ---------- Header row wraps; logo left, hamburger / CTA right ---------- */
    .header > .container,
    .head-bar > .container,
    .header-inner {
        flex-wrap: wrap;
        gap: 14px;
        padding-top: 14px;
        padding-bottom: 14px;
        min-height: 0;
    }

    .srcrt {
        order: 2;
        flex: 0 0 auto;
    }

    #navigation {
        flex: 0 0 auto;
        justify-content: flex-end;
        order: 3;
    }

    #navigation,
    .main-navigation { position: static; }

    .menu-toggle { display: inline-flex; }

    /* ---------- Slide-down panel ---------- */
    .main-navigation > ul {
        display: none;
        position: absolute;
        top: calc(100% + 12px);
        left: 24px;
        right: 24px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--sps-surface);
        border: 1px solid var(--sps-line);
        border-top: 3px solid var(--sps-accent);
        border-radius: var(--sps-radius);
        box-shadow: var(--sps-shadow);
        padding: 12px;
        max-height: 72vh;
        overflow-y: auto;
        z-index: 999;
    }

    .main-navigation.toggled > ul { display: flex; }

    .main-navigation > ul > li,
    .main-navigation li { width: 100%; }
    .main-navigation > ul > li + li { border-top: 1px solid var(--sps-line); }

    .main-navigation a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
        border-radius: var(--sps-radius-sm);
        padding: 11px 14px;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        background-image: none;
		color:#000000 !important;
    }

    .main-navigation a:hover,
    .main-navigation a:focus,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_item > a {
        background: var(--sps-accent-tint);
        color: var(--sps-accent-deep);
        background-size: 0 0;
    }

    /* Sub-menus expand inline beneath their parent on tap. */
    .main-navigation ul ul,
    .main-navigation ul ul ul {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        min-width: 0;
        width: 100%;
        margin: 2px 0 2px 12px;
        padding: 4px 0 4px 12px;
        border: 0;
        border-left: 2px solid var(--sps-accent);
        border-radius: 0;
        box-shadow: none;
        display: none;
        background: transparent;
    }

    .main-navigation li.dropdown-open > ul { display: block; }

    .main-navigation ul ul a { min-height: 42px; font-size: 14.5px; color: var(--sps-text-black);}
    .main-navigation ul ul a:hover,
    .main-navigation ul ul a:focus {
        background: var(--sps-accent-tint);
        color: var(--sps-accent-deep);
    }

    .main-navigation .dropdown-toggle { display: flex; }

    .primary-menu > .menu-item-has-children > a::after,
    .main-navigation > div > ul > .menu-item-has-children > a::after,
    .main-navigation > ul > .menu-item-has-children > a::after,
    .main-navigation ul ul .menu-item-has-children > a::after {
        display: none;
    }

    /* ---------- Content + sidebar stack into one column ---------- */
    .page_content,
    body.home .page_content {
        flex-direction: column;
        gap: 0;
        padding: 40px 0 50px;
    }

    .site-main,
    #sidebar {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    #sidebar { margin: 10px 0 0; }

    /* ---------- Footer: four columns become two ---------- */
    .rfl-row .cols-3 {
        flex: 1 1 calc(30% - 15px);
        min-width: 0;
    }

    .footerlight.container {
        padding: 48px 32px 0;
    }

    #footer { margin-top: 40px; }
}


/* ==========================================================================
   iPad portrait ( 768px – 1024px )
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    .inner-banner-thumb, body.transheader .inner-banner-thumb{ min-height: 220px; }
	.inner-banner-thumb .banner-container h1{position:relative; top:30px;}
    .inner-banner-thumb .banner-container { padding: 48px 24px; }

    /* Roomier post cards on tablet. */
    .blog-post article,
    .site-main > article { padding: 12px 0 35px; }
    .post-thumb { margin: -28px -30px 22px; }
	.o-footer__container .container, .footerinfobox{padding-top:0px;}
}


/* ==========================================================================
   Phones ( <= 767px ) — single column everywhere
   ========================================================================== */
@media screen and (max-width: 767px) {

    body { font-size: 16px; }

    .container,
    .head-bar > .container,
    .header-topbar .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* ---------- TOP BAR: stack into a clean column ---------- */
    .header-topbar { padding-top: 0; }
    .header-topbar .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        min-height: 0;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .header-topbar .left {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        margin-left: 0;
    }
    .header-topbar .adrtp,
    .header-topbar .phntp,
    .header-topbar .emltp {
        border-right: 0;
        padding: 2px 0;
        font-size: 14.5px;
    }
    .header-topbar .right {
        width: 100%;
        margin-left: 0;
    }

    /* ---------- SOCIAL ICONS: full-width row ---------- */
    .social-icons,
    .header-topbar .social-icons {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-right: 0;
    }
    .social-icons a {
        width: 36px;
        height: 36px;
    }

    /* ---------- Header ---------- */
    .header { padding: 0; }
    .head-bar > .container,
    .header-inner {
        padding: 14px 16px;
    }
    .logo { max-width: 180px; }
    .logo img,
    .custom-logo { max-height: 46px; }
    .site-title,
    .logo p.site-title { font-size: 23px; }
    .srcrt {
        order: 4;
        width: 100%;
        margin-left: 0;
    }
    .skt-header-button {
        width: 100%;
        justify-content: center;
    }

    /* ---------- Banner ---------- */
    .inner-banner-thumb { min-height: 168px; }
    .inner-banner-thumb .banner-container { padding: 40px 18px; }

    /* ---------- Post cards ---------- */
    .blog-post article,
    .site-main > article {
        padding: 22px 20pxpadding: 22px 0 24px;
    }
    .post-thumb { margin: -22px -20px 18px; }
    #sitefull article.hentry { padding: 0; }

    .page_content,
    body.home .page_content { padding: 30px 0 42px; }

    .page-header,
    .no-results,
    .error-404,
    .comments-area {
        padding: 22px 20px;
    }

    /* Comment form: single column. */
    .comment-form .comment-form-author,
    .comment-form .comment-form-email { flex: 1 1 100%; }
    .comment-list .children { margin-left: 14px; padding-left: 12px; }

    /* Pagination shrinks. */
    .page-numbers,
    .post-page-numbers {
        min-width: 42px;
        height: 42px;
        padding: 0 12px;
    }
    .post-navigation .nav-links { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* ---------- Footer: single column, centered ---------- */
    .footerinfobox,
    .o-footer__container .container {
        flex-direction: column;
        text-align: center;
        gap: 16px;
		padding:0;
		margin:0;
    }
    .footer .social-icons,
    .c-social-icons {
        justify-content: center;
        flex-wrap: wrap;
    }
    .footer ul li,
    .footer ul li::before { text-align: left; }
    .rfl-row { gap: 22px; }
    .rfl-row .cols-3 { flex: 1 1 100%; min-width: 0; }
    .footer.ftr-widg { padding: 36px 0 26px; }
    .footerlight.container {
        padding: 34px 20px 0;
    }

    /* Alignments collapse on narrow screens. */
    .alignleft,
    .alignright {
        float: none;
        display: block;
        margin: 16px auto;
    }
    .alignwide {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .cols-3 { margin-bottom: 0; }
	.blog-post{margin-top:0px;}
}

/* ==========================================================================
   Small phones ( <= 479px )
   ========================================================================== */
@media screen and (max-width: 479px) {

    .container,
    .head-bar > .container,
    .header-topbar .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    h1 { font-size: 30px; }
    h2 { font-size: 25px; }

    .header-topbar { font-size: 14px; }
    .header-topbar .adrtp,
    .header-topbar .phntp,
    .header-topbar .emltp { font-size: 14px; }

    .social-icons a {
        width: 34px;
        height: 34px;
    }

    .logo { max-width: 160px; }
    .site-title,
    .logo p.site-title { font-size: 21px; }

    .blog-post article,
    .site-main > article { padding: 20px 0 22px; }
    .post-thumb { margin: -20px -16px 16px; }

    .entry-title { font-size: 22px; }
    .single-post .entry-content { font-size: 16px; }

    .inner-banner-thumb, body.transheader .inner-banner-thumb{ min-height: 200px; }
    .inner-banner-thumb .banner-container { padding: 34px 16px; }
    .inner-banner-thumb .banner-container h1 { font-size: 26px; position:relative; top:25px;}
    .search-form,
    .wp-block-search__inside-wrapper { flex-direction: column; }
    .search-submit,
    .wp-block-search__button { width: 100%; margin:0;}
}

/* ==========================================================================
   Phone landscape
   ========================================================================== */
@media screen and (max-width: 900px) and (orientation: landscape) {

    .main-navigation > ul { max-height: 64vh; }
}