/* ==========================================================================
   SKT Coworking — 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 220px;
	}
	.header-topbar .adrtp, .header-topbar .phntp, .header-topbar .emltp{
		padding:15px 10px 15px 0;
	}
	.header > .container, .head-bar > .container{
		flex-wrap: nowrap;
	}
	body.wp-custom-logo .logo{
		padding-bottom:0px !important;
	}
}


/* ==========================================================================
   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;
        font-size: 15px;
    }
    .header-topbar .right { margin-left: auto; }

    .social-icons {
        flex-wrap: wrap;
        gap: 8px;
        margin-left: 20px;
    }
    .social-icons a {
        width: 40px;
        height: 40px;
    }
	body.wp-custom-logo .logo{padding: 14px 20px !important;}
    .logo {
        margin-top: 0;
        margin-right: auto;    
        width: auto;
        max-width: 220px;
        height: auto;
        min-height: 0;
        padding: 8px 14px;
        border-radius: var(--sps-radius);
        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: 12px;
        padding-bottom: 12px;
        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% + 10px);
        left: 24px;
        right: 24px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--sps-surface);
        border: 1px solid var(--sps-line);
        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: 17px;
    }

    .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);
    }

    /* 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-soft);
        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: 15.5px; }
    .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: 36px 0 46px;
    }

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

    /* Reset the desktop negative right margin so the sidebar can't overflow. */
    #sidebar {
        margin: 10px 0 0;
    }

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

    .footerlight.container {
        padding: 44px 32px 0;
        border-radius: 22px;
    }
	
	#footer{margin:16px 16px 0 16px;}
}


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

    .inner-banner-thumb { min-height: 220px; }
    .inner-banner-thumb .banner-container { padding: 48px 24px; }

    /* Roomier post cards on tablet. */
    .blog-post article,
    .site-main > article { padding: 28px 30px 30px; }
    .post-thumb { margin: -28px -30px 22px; }
}


/* ==========================================================================
   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;
        border-radius: var(--sps-radius);
    }
    .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: 15px;
    }
    .header-topbar .right {
        width: 100%;
        margin-left: 0;
    }

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

    /* ---------- Header card ---------- */
    .header { padding: 0; }
    .head-bar > .container,
    .header-inner {
        padding: 12px 16px;
        border-radius: var(--sps-radius);
    }
    .logo {
        max-width: 180px;
        padding: 12px 22px;
    }
    .logo img,
    .custom-logo { max-height: 48px; }
    .site-title,
    .logo p.site-title { font-size: 22px; }

    #navigation { order: 2; width:100%}
    .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: tighter padding, matching thumb bleed ---------- */
    .blog-post article,
    .site-main > article {
        padding: 22px 20px 24px;
        border-radius: var(--sps-radius);
    }
    .post-thumb { margin: -22px -20px 18px; }
    #sitefull article.hentry { padding: 0; }

    .page_content,
    body.home .page_content { padding: 28px 0 40px; }

    .page-header,
    .no-results,
    .error-404,
    .comments-area {
        padding: 22px 20px;
        border-radius: var(--sps-radius);
    }

    /* 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;
    }
    .footer .social-icons,
    .c-social-icons {
        justify-content: center;
        flex-wrap: wrap;
    }
    .rfl-row { gap: 22px; }
    .rfl-row .cols-3 { flex: 1 1 100%; min-width: 0; }
    .footer.ftr-widg { padding: 34px 0 22px; }
    .footerlight.container {
        padding: 30px 20px 0;
        border-radius: 18px;
    }

    /* 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: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: 35px;
        height: 35px;
    }

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

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

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

    .inner-banner-thumb { min-height: 150px; }
    .inner-banner-thumb .banner-container { padding: 34px 16px; }
    .inner-banner-thumb .banner-container h1 { font-size: 26px; }
    .search-form,
    .wp-block-search__inside-wrapper { flex-direction: column; }
    .search-submit,
    .wp-block-search__button { width: 100%; }
}
/* ==========================================================================
   Phone landscape
   ========================================================================== */
@media screen and (max-width: 900px) and (orientation: landscape) {

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