/*
Theme Name: SKT CoWorking
Theme URI: https://www.sktthemes.org/shop/skt-coworking/
Author: sonalsinha21
Author URI: https://wordpress.org/themes/author/sonalsinha21/
Description: SKT Coworking Theme is Responsive. It is designed for coworking spaces, shared workspaces, business hubs, and collaborative offices. It helps entrepreneurs, startups, freelancers, and remote professionals create a strong online presence with ease. The theme includes responsive layouts, service sections, pricing tables, booking options, and team showcases to highlight your workspace community. Whether you manage a flexible workspace, communal office, innovation hub, or professional collaboration center, SKT CoWorking offers customization options to match your brand. Built with SEO-friendly coding and fast performance, it supports business growth while creating a welcoming and productive digital environment. Documentation : 
Template: skt-consulting
Version: 1.0
Requires at least: 5.6
Tested up to: 7.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skt-coworking
Tags: two-columns, right-sidebar, full-width-template, custom-background, custom-colors, custom-menu, sticky-post, theme-options, threaded-comments, featured-images, footer-widgets, translation-ready, rtl-language-support, custom-logo, editor-style, custom-header, blog, e-commerce

SKT CoWorking is a child theme of SKT Consulting. SKT Consulting is based on Underscores, which is distributed under the terms of the GNU GPL v2 or later.

SKT CoWorking WordPress Theme, Copyright 2026 SKT Themes (sktthemes.org)
SKT CoWorking is distributed under the terms of the GNU GPL v2 or later.
*/

/* ==========================================================================
   TABLE OF CONTENTS
   01. Design Tokens & Reset
   02. Typography
   03. Layout (container, content, sidebar)
   04. Header & Navigation
   05. Inner Page Banner
   06. Buttons & Links
   07. Forms & Inputs
   08. Blog (lists, single post, post meta)
   09. Pagination & Post Navigation
   10. Sidebar & Widgets
   11. Comments
   12. Footer & Copyright
   13. Block Editor / Gutenberg
   14. WooCommerce essentials
   15. Tables, Code, Blockquote
   16. Accessibility & Utilities
   17. RTL
   ========================================================================== */


/* ==========================================================================
   01. Design Tokens & Reset
   --------------------------------------------------------------------------
   "Warm Studio" — a soft, rounded, human aesthetic. Cream paper, terracotta
   coral primary, sage-teal links, honey highlights. Diffuse layered shadows,
   pill buttons, editorial serif display over a humanist sans body.
   ========================================================================== */
:root {
    /* Surfaces */
    --sps-paper: #f7f2ea;
    --sps-paper-2: #efe7da;
    --sps-surface: #ffffff;
    --sps-surface-soft: #fbf8f3;

    /* Ink / text */
    --sps-ink: #2a241f;
    --sps-ink-soft: #4a4138;
    --sps-text: #4a4138;
    --sps-text-dark: #2a241f;
    --sps-muted: #8f8478;
    --sps-text-invert: #fffaf3;
	--sps-text-black: #000000;
	--sps-text-meta: #f4f4f4;
	

    /* Brand accents */
    --sps-accent: #a0ce4e;         
    --sps-accent-deep: #2f7d6c;
    --sps-accent-soft: #f6dccf;
    --sps-accent-tint: #f8ffeb;
    --sps-secondary: #2f7d6c;       /* sage-teal — links */
    --sps-secondary-deep: #245d51;
    --sps-honey: #e6a93c;           /* warm honey highlight */
	--sps-lights: #09b4c1;

    /* Lines */
    --sps-line: #e3e3e3;
    --sps-line-strong: #cecccc;

    /* Footer */
    --sps-footer-bg: #221d18;
    --sps-footer-bg-2: #2b251f;
    --sps-text-footer: #ffffff;
    --sps-footer-heading: #fffaf3;
    --sps-footer-line: rgba(255, 250, 243, 0.12);
    --sps-copyright-bg: #ffffff;
	--sps-button-bg: #a0ce4e;
	--sps-footerlight-bg: #54c1c4;

    /* Social */
    --sps-icon-size: 46px;

    /* Geometry — soft & rounded everywhere */
    --sps-radius-sm: 10px;
    --sps-radius: 16px;
    --sps-radius-lg: 14px;
    --sps-radius-pill: 6px;

    /* Soft, diffuse, layered elevation */
    --sps-shadow-xs: 0 2px 6px rgba(42, 36, 31, 0.06);
    --sps-shadow-sm: 0 8px 22px -10px rgba(42, 36, 31, 0.18);
    --sps-shadow: 0 18px 44px -18px rgba(42, 36, 31, 0.26);
    --sps-shadow-lg: 0 34px 70px -28px rgba(42, 36, 31, 0.34);
    --sps-ring: 0 0 0 4px rgba(224, 96, 60, 0.20);

    --sps-border-w: 1px;
    --sps-transition: 0.28s cubic-bezier(0.22, 0.61, 0.25, 1);

    --sps-container: 1200px;
    --sps-gap: 42px;

    /* Type — editorial serif display + humanist sans body (no external fonts) */
    --sps-font-body: "Avenir Next", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
    --sps-font-heading: "Poppins";
    --sps-font-display: var(--sps-font-heading);
    --sps-font-menu: var(--sps-font-body);
    --sps-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--sps-font-footer-heading: "Anton";
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--sps-surface);
    color: var(--sps-text);
    font-family: var(--sps-font-body);
    font-size: 16.5px;
    line-height: 1.72;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

iframe { max-width: 100%; }

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sps-line-strong), transparent);
    margin: 40px 0;
}

::selection {
    background-color: var(--sps-accent);
    color: var(--sps-text-invert);
}


/* ==========================================================================
   02. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sps-font-heading);
    color: var(--sps-text-dark);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    text-wrap: balance;
}

h1 { font-size: clamp(34px, 4.6vw, 50px); }
h2 { font-size: clamp(28px, 3.4vw, 38px); }
h3 { font-size: clamp(23px, 2.4vw, 28px); }
h4 { font-size: 22px; }
h5 { font-size: 19px; }
h6 {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--sps-font-body);
    color: var(--sps-accent-deep);
}

p { margin: 0 0 20px; }

a {
    color: var(--sps-skin);
    text-decoration: none;
    transition: color var(--sps-transition), background-size var(--sps-transition);
}

a:hover,
a:focus {
    color: var(--sps-accent-deep);
}

a:focus-visible {
    outline: 2px solid var(--sps-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

strong, b { font-weight: 700; color: var(--sps-text-dark); }
em, i { font-style: italic; }
small { font-size: 0.82em; color: var(--sps-muted); }


/* ==========================================================================
   03. Layout
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--sps-container);
    margin: 0 auto;
    padding: 0;
    position: relative;
}

#main-set { position: relative; z-index: 999; }

#content_navigator { width: 100%; }

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

.page_content {
    padding: 45px 0 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
	gap: 0 25px;
}

body.tax-product_cat .page_content { display: inherit; }

.site-main {
    flex: 1 1 0;
    min-width: 0;
    float: none;
    width: auto;
}

#sitefull,
.full-main {
    flex: 0 1 100%;
    width: 100% !important;
    float: none;
}

.clear { clear: both; }


/* ==========================================================================
   04. Header & Navigation
   --------------------------------------------------------------------------
   Floating rounded "pill" bar that rests on the paper with a soft shadow.
   ========================================================================== */

/* ---------- Top bar ---------- */
.header-topbar {
    width: 100%;
    font-family: var(--sps-font-body);
    font-size: 15px;
	background-color:#1a1a1a;
	position: relative;
	z-index: 99;
	overflow: hidden;
}

.header-topbar .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: var(--sps-container);
    margin: 0 auto;
	min-height: 50px;
    padding: 0;    
    color: var(--sps-text-invert);
    box-shadow: var(--sps-shadow-sm);
}

.header-topbar .left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
	position: relative;
	margin:0 0 0 240px;
}

.header-topbar .left span:last-child {
    border-right: none !important;
}

.header-topbar .adrtp,
.header-topbar .phntp,
.header-topbar .emltp {
    display: inline-flex;
    align-items: center;
    color: var(--sps-text-invert);
	font-family: var(--sps-font-display);
    font-size: 17px;
    line-height: 1.2;
    float: none;
	border-right: solid 1px #313131;
	padding:15px 30px 15px 0;
}

.header-topbar .adrtp img,
.header-topbar .phntp img,
.header-topbar .emltp img {
    margin-right: 8px;
    vertical-align: middle;
    max-height: 15px;
    width: auto; 
}

.header-topbar .emltp a {
    color: var(--sps-text-invert);
    background: none;
    display: inline-flex;
    align-items: center;
    transition: opacity var(--sps-transition);
}

.header-topbar .emltp a:hover {color:#fda700;}

.header-topbar .right {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.social-icons a {
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background-color: #fda700;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    transition: background-color var(--sps-transition), transform var(--sps-transition);
}

.social-icons a:hover {
    background-color: var(--sps-text-invert);
}

.social-icons a.fb    { background-image: url('images/icon-fb.png'); }
.social-icons a.tw    { background-image: url('images/icon-tw.png'); }
.social-icons a.in    { background-image: url('images/icon-in.png'); }
.social-icons a.ytb   { background-image: url('images/icon-youtube.png'); }
.social-icons a.insta { background-image: url('images/icon-insta.png'); }
/* ---------- Main header bar ---------- */
.header {
    width: 100%;
    background: transparent;
    position: relative;
    z-index: 100;
    border: 0;
    margin: 0;
    padding: 0;
}

body.blog .header { border: 0; }

.head-bar { width: 100%;}

.head-bar > .container {
    max-width: var(--sps-container);
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.header > .container,
.head-bar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px;
    min-height: 76px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    min-height: 76px;
}

/* Transparent header (front-page hero overlay) */
.transheaderhome {
    position: absolute !important;
    border: none !important;
    background-color: transparent !important;
    top: 0; left: 0; right: 0;
    z-index: 999 !important;
}
.transheaderhome .header { background: transparent !important; }

.transheader {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    background: transparent;
}

/* ---------- Logo ---------- */
.logo {
  background: #54c1c4;
  background-color: rgb(84, 193, 196);
  margin-top: -53px;
  width: 200px;
  height: 145px;
  align-content: center;
  position:relative;
  z-index:99999;	
  
}

.logo:before {
  background-color: #54c1c4;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  left: -999998px;
  top: 0;
  width: 999999px;
}

.logo img,
.custom-logo { max-height: 58px; width: auto; margin-top:45px;}

.hdbr .logo img, .hdbr .custom-logo{
	margin-top:0px;
}

.site-title{
	padding:45px 0 0 0;
}

.hdbr .site-title{
	padding:0;
}

#logo-main { display: flex; flex-direction: column; text-align: left;}
#logo-main a { background: none; color: inherit; }

.site-title {
    font-family: var(--sps-font-display);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    letter-spacing: -0.02em;
}
.logo p.site-title { font-size: 27px; }

.site-title a {
    color: var(--sps-text-dark);
    background: none;
}
.site-title a:hover { color: var(--sps-accent-deep); }

.site-description {
    font-size: 14px;
    color: var(--sps-surface);
    margin: 5px 0 0 0;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ---------- Primary navigation ---------- */
#navigation {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    font-family: var(--sps-font-heading);
	position: relative;
}

.leftnavig { margin-right: auto; }

.main-navigation {
    display: flex;
    align-items: center;
    position: relative;
}

.primary-menu,
.main-navigation > div > ul,
.main-navigation > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

.main-navigation li {
    position: relative;
    list-style: none;
}

.main-navigation a {
    display: flex;
    align-items: center;
    padding: 15px 16px;
    color: var(--sps-text-dark);
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    background: none;
    transition: background-color var(--sps-transition), color var(--sps-transition);
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
    color: var(--sps-lights);
}

/* Dropdowns — rounded soft card */
.main-navigation ul ul {
    position: absolute;
    top: calc(100% + 16px);
    left: 0;
    min-width: 240px;
    background-color: var(--sps-surface);
    display: block;
    margin: 0;
    padding:0;
    list-style: none;
    box-shadow: var(--sps-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--sps-transition), transform var(--sps-transition), visibility var(--sps-transition);
    z-index: 9999;
}

.main-navigation ul ul::before {
    content: "";
    position: absolute;
    top: -16px; left: 0; right: 0;
    height: 16px;
    background: transparent;
}

.main-navigation ul ul li { width: 100%; }

.main-navigation li:hover > ul,
.main-navigation li.focus > ul,
.main-navigation li.dropdown-open > ul,
.main-navigation li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Top-level caret — first-level items with a dropdown (added) */
.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 {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg); /* points down */
    transition: transform var(--sps-transition);
}

/* Child submenu carets — any nested item with a further submenu (added) */
.main-navigation ul ul .menu-item-has-children > a {
    justify-content: space-between; /* pushes caret to the far right of the full-width link */
}

.main-navigation ul ul .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); /* points right */
    transition: transform var(--sps-transition);
}

.main-navigation ul ul a {
    padding: 8px 14px;
    color: var(--sps-text-dark);
    border: 0;
    width: 100%;
    font-size: 18px;
	font-weight:400;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
    background-color: var(--sps-lights);
    color: var(--sps-text-invert);
}

.main-navigation ul ul ul {
    top: 0px;
    left: calc(100% + 0px);
    transform: translateX(8px);
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul,
.main-navigation ul ul li.dropdown-open > ul,
.main-navigation ul ul li:focus-within > ul { transform: translateX(0); }

.main-navigation ul li a { line-height: inherit; }

/* Dropdown caret button (mobile, injected by navigation.js) */
.main-navigation .dropdown-toggle {
    display: none;
    position: absolute;
    top: 3px;
    right: 3px;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.main-navigation .dropdown-icon {
    display: block;
    width: 11px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--sps-transition);
    color: var(--sps-text-dark);
}
.main-navigation .dropdown-open > .dropdown-toggle .dropdown-icon { transform: rotate(225deg); }

/* Hamburger */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--sps-accent-tint);
    border: 1px solid var(--sps-line);
    border-radius: 14px;
    cursor: pointer;
}
.menu-toggle:hover,
.menu-toggle:focus { background: var(--sps-accent); }
.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--sps-text-dark);
    border-radius: 2px;
    transition: transform var(--sps-transition), opacity var(--sps-transition), background var(--sps-transition);
}
.menu-toggle:hover span,
.menu-toggle:focus span { background: var(--sps-text-invert); }
.toggled .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.toggled .menu-toggle span:nth-child(2) { opacity: 0; }
.toggled .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header CTA button */
.srcrt { flex-shrink: 0; }
.skt-header-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    background: var(--sps-button-bg);
    color: var(--sps-text-invert) !important;
    font-family: var(--sps-font-heading);
    font-weight: normal;
    font-size: 17px;
    text-decoration: none;
    transition: transform var(--sps-transition), background var(--sps-transition), box-shadow var(--sps-transition);
    background-image: none;
}
.skt-header-button:hover,
.skt-header-button:focus {
    color: var(--sps-text-black) !important;
}


/* ==========================================================================
   05. Inner Page Banner
   --------------------------------------------------------------------------
   Soft rounded hero card with a warm gradient scrim and centered title.
   ========================================================================== */
.inner-banner-thumb {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
	background-color:#404141;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-banner-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.inner-banner-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(42, 36, 31, 0.18) 0%, rgba(42, 36, 31, 0.62) 100%);
    z-index: 1;
}

.inner-banner-thumb .banner-container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 60px 24px;
    width: 100%;
}

.inner-banner-thumb .banner-container h1 {
    color: var(--sps-text-invert);
    margin: 0;
    font-size: clamp(30px, 4vw, 46px);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}


/* ==========================================================================
   06. Buttons & Links
   ========================================================================== */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.read-more-btn,
.aboutmore,
.ReadMore,
.rdmore a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sps-font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    padding: 13px 28px;
    color: var(--sps-text-invert);
    background: var(--sps-secondary);
    background-image: none;
    border: 0;
    border-radius: var(--sps-radius-pill);
    text-decoration: none;
    cursor: pointer; 
    transition: transform var(--sps-transition), background var(--sps-transition), box-shadow var(--sps-transition), color var(--sps-transition);
}

.button:hover, .button:focus,
button:hover, button:focus,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
input[type="submit"]:focus,
.wp-block-button__link:hover,
.read-more-btn:hover,
.aboutmore:hover,
.ReadMore:hover,
.rdmore a:hover {
    background: var(--sps-lights);
    color: var(--sps-text-invert);
}

/* Read-more pill on cards */
.rdmore { margin: 25px 0 0; }
.rdmore a { padding: 10px 22px; font-size: 14px; }


/* ==========================================================================
   07. Forms & Inputs
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    font-family: var(--sps-font-body);
    font-size: 15.5px;
    color: var(--sps-text-dark);
    background: var(--sps-surface);
    border: 1px solid var(--sps-line-strong);
    border-radius: var(--sps-radius-sm);
    padding: 6px 16px;
    line-height: 1.5;
    transition: border-color var(--sps-transition), box-shadow var(--sps-transition);
}

textarea { min-height: 150px; resize: vertical; }

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--sps-accent);
    box-shadow: var(--sps-ring);
}

::placeholder { color: var(--sps-muted); opacity: 1; }

label { font-weight: 600; color: var(--sps-text-dark); }

/* Search form */
.search-form,
.wp-block-search__inside-wrapper {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.search-form .search-field,
.wp-block-search__input { flex: 1 1 auto; }

.search-submit,
.wp-block-search__button {
    width: auto;
    flex: 0 0 auto;
    background: var(--sps-accent);
    color: var(--sps-text-invert);
    border: 0;
    border-radius: var(--sps-radius-pill);
    padding: 6px 24px;
    font-weight: 600;
    cursor: pointer;
}
.search-submit:hover,
.wp-block-search__button:hover { background: var(--sps-accent-deep); }


/* ==========================================================================
   08. Blog
   --------------------------------------------------------------------------
   Each post is a soft rounded card with a coral accent rail and a featured
   image that gently zooms on hover.
   ========================================================================== */
.blog-post { width: 100%; }
.blogpost-wrap-wsb { display: block; }

article.hentry,
.blog-post article,
.site-main > article {
    position: relative;
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius-lg);
    box-shadow: var(--sps-shadow-sm);
    padding: 30px 34px 34px;
    margin: 0 0 34px;
    overflow: hidden;
    transition: transform var(--sps-transition), box-shadow var(--sps-transition);
}

.blog-post article::before,
.site-main > article::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, var(--sps-secondary), var(--sps-lights));
    opacity: 0.9;
}

/* Full-width template article: clean, no card chrome */
#sitefull article.hentry {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}
#sitefull article.hentry::before { display: none; }

.post-thumb {
    margin: -30px -34px 24px;
    overflow: hidden;
    border-bottom: 1px solid var(--sps-line);
}
.post-thumb img {
    width: 100%;
    height: auto;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.25, 1);
}

.entry-header { margin-bottom: 14px; }

.entry-title {
    font-size: clamp(24px, 2vw, 28px);
    line-height: 1.18;
    margin: 0 0 12px;
	font-weight:700;
}
.entry-title a {
    color: var(--sps-text-dark);
    background: none;
}
.entry-title a:hover { color: var(--sps-lights); }

/* Post meta — small warm chips */
.postmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
    font-family: var(--sps-font-body);
    font-size: 13px;
    color: var(--sps-muted);
    margin: 0 0 6px;
}
.postmeta .post-date {
    display: inline-flex;
    align-items: center;
    background: var(--sps-text-meta);
    color: var(--sps-text-black);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--sps-radius-pill);
}
.postmeta .post-comment a { color: var(--sps-muted); background: none; }
.postmeta .post-comment a:hover { color: var(--sps-accent-deep); }
.postmeta .post-tags a {
    display: inline-block;
    background: var(--sps-paper-2);
    color: var(--sps-text);
    padding: 3px 11px;
    margin: 3px 4px 0 0;
    border-radius: var(--sps-radius-pill);
    font-size: 12.5px;
}
.postmeta .post-tags a:hover { background: var(--sps-accent); color: var(--sps-text-invert); }

.entry-content { color: var(--sps-text); }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-summary { color: var(--sps-text); }

.single-post .entry-content { font-size: 17px; }

/* Page links (paged posts) */
.page-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 24px 0;
    font-weight: 600;
}
.page-links .page-links-title { color: var(--sps-muted); font-weight: 600; }
.page-links a,
.page-links > span:not(.page-links-title) {
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--sps-paper-2);
    color: var(--sps-text-dark);
}
.page-links a { background: var(--sps-surface); border: 1px solid var(--sps-line-strong); }
.page-links a:hover { background: var(--sps-accent); color: var(--sps-text-invert); border-color: var(--sps-accent); }

/* Page header (search / 404 / archive title blocks) */
.page-header {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius-lg);
    box-shadow: var(--sps-shadow-sm);
    padding: 26px 30px;
    margin: 0 0 30px;
}
.page-title { margin: 0; font-size: clamp(24px, 3vw, 32px); }
.page-title span { color: var(--sps-accent-deep); }

/* No results / 404 inner copy */
.no-results,
.error-404 {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius-lg);
    box-shadow: var(--sps-shadow-sm);
    padding: 36px 34px;
}
.no-results .page-header,
.error-404 .page-header { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 14px; }

.edit-link a {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    background: var(--sps-paper-2);
    padding: 6px 14px;
    border-radius: var(--sps-radius-pill);
    color: var(--sps-text);
}
.entry-meta { margin-top: 6px; }


/* ==========================================================================
   09. Pagination & Post Navigation
   ========================================================================== */
.pagination,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
}

.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.page-numbers,
.post-page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 16px;
    background: var(--sps-surface);
    border: 1px solid var(--sps-line-strong);
    border-radius: var(--sps-radius-pill);
    color: var(--sps-text-dark);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--sps-transition);
}
.page-numbers:hover,
.post-page-numbers:hover {
    background: var(--sps-accent-tint);
    border-color: var(--sps-accent);
    color: var(--sps-accent-deep);
}
.page-numbers.current {
    background: var(--sps-accent);
    border-color: var(--sps-accent);
    color: var(--sps-text-invert);
    box-shadow: 0 10px 22px -12px rgba(224, 96, 60, 0.8);
}
.page-numbers.dots { background: none; border: 0; }

/* prev/next single post nav */
.post-navigation {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius-lg);
    box-shadow: var(--sps-shadow-sm);
    padding: 18px 24px;
    margin: 0 0 30px;
}
.post-navigation .nav-links { justify-content: space-between; }
.post-navigation a { font-weight: 600; color: var(--sps-text-dark); background: none; }
.post-navigation a:hover { color: var(--sps-accent-deep); }


/* ==========================================================================
   10. Sidebar & Widgets
   ========================================================================== */
#sidebar {
    flex: 0 0 322px;
    max-width: 322px;
    width: 322px;
	margin:0 -25px 0 0;
}

#sidebar .widget,
.widget {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius-lg);
    box-shadow: var(--sps-shadow-sm);
    padding: 24px 24px 26px;
    margin: 0 0 26px;
}

#sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6, #sidebar .widget-title, #sidebar .wp-block-search__label, #sidebar label {
  color: var(--sps-text-dark);
  font-family: var(--sps-font-heading);
  font-size: 22px;
  font-weight: 700;
}

#sidebar ol{margin:0; padding:0;}

.widget-title,
#sidebar .widget-title,
.widget .widget-title {
    position: relative;
    font-family: var(--sps-font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--sps-text-dark);
    margin: 0 0 18px;
    padding: 0 0 12px;
}
.widget-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sps-accent), var(--sps-honey));
}
.titleborder span:after {
    content: "";
    display: inline-block;
    border-bottom: 3px solid var(--sps-accent);
}

.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li {
    padding: 9px 0;
    border-bottom: 1px solid var(--sps-line);
}
.widget ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget ul li a { color: var(--sps-text); background: none; }
.widget ul li a:hover { color: var(--sps-accent-deep); }
.widget ul li .children,
.widget ul li .sub-menu { margin-top: 8px; padding-left: 14px; }

/* Tag cloud */
.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tagcloud a {
    display: inline-block;
    font-size: 13px !important;
    background: var(--sps-paper-2);
    color: var(--sps-text) !important;
    padding: 6px 14px;
    border-radius: var(--sps-radius-pill);
}
.tagcloud a:hover { background: var(--sps-accent); color: var(--sps-text-invert) !important; }

/* Calendar widget */
.widget_calendar table { width: 100%; border-collapse: collapse; font-size: 14px; }
.widget_calendar caption { font-weight: 700; padding-bottom: 10px; color: var(--sps-text-dark); }
.widget_calendar th { background: var(--sps-paper-2); padding: 6px; text-align: center; }
.widget_calendar td { padding: 6px; text-align: center; border: 1px solid var(--sps-line); }
.widget_calendar td#today { background: var(--sps-accent); color: var(--sps-text-invert); border-radius: 4px; }
.widget_calendar a { background: none; font-weight: 700; color: var(--sps-accent-deep); }

#sidebar .wp-block-search__label { font-weight: 700; margin-bottom: 8px; display: block; }
/* ==========================================================================
   11. Comments
   ========================================================================== */
.comments-area {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    padding: 30px 34px;
    margin: 0 0 30px;
}
.comments-title,
.comment-reply-title { font-size: 24px; margin-bottom: 22px; }
.comments-title span,
.comment-reply-title span { color: var(--sps-accent-deep); }

.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list ol,
.comment-list ul { list-style: none; }
.comment-list .children { margin-left: 28px; padding-left: 22px; border-left: 2px solid var(--sps-line); }

.comment-body {
    background: var(--sps-surface-soft);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius);
    padding: 20px 22px;
    margin: 0 0 20px;
}
.comment-author { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.comment-author .avatar { border-radius: 50%; }
.comment-author .fn { font-family: var(--sps-font-heading); font-size: 17px; color: var(--sps-text-dark); }
.comment-metadata { font-size: 12.5px; color: var(--sps-muted); margin: 4px 0 10px; }
.comment-metadata a { color: var(--sps-muted); background: none; }

.reply { margin-top: 8px; }
.comment-reply-link {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    background: var(--sps-accent-tint);
    color: var(--sps-accent-deep) !important;
    border-radius: var(--sps-radius-pill);
}
.comment-reply-link:hover { background: var(--sps-accent); color: var(--sps-text-invert) !important; }

#respond { margin-top: 8px; }
.comment-form { display: flex; flex-wrap: wrap; gap: 16px; }
.comment-form p { margin: 0; flex: 1 1 100%; }
.comment-form .comment-form-author,
.comment-form .comment-form-email { flex: 1 1 calc(50% - 8px); }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.comment-form-cookies-consent input { width: auto; margin-top: 5px; }
.comment-form-cookies-consent label { font-weight: 400; font-size: 14px; }
#submit { width: auto; }
.no-comments { color: var(--sps-muted); font-style: italic; }


/* ==========================================================================
   12. Footer & Copyright
   ========================================================================== */
#footer {
    color: var(--sps-text-footer);
    margin-top: 50px;
}

#footer-wrapper { width: 100%; }

#footer .container { max-width: var(--sps-container); }
.footerlight.container{background-color:var(--sps-footerlight-bg); padding: 60px 60px 0px; border-radius:30px;}

/* Footer info bar (logo + social) */
.o-footer { background: transparent; }
.o-footer__container .container,
.footerinfobox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
	padding:0 0 40px 0;
}
.c-footer-logo img { max-height: 60px; width: auto; }

/* Footer social — rounded soft chips using existing PNG icons */
.c-social-icons,
.footer .social-icons {
    display: inline-flex;
    gap: 10px;
}
.c-social-icons__link {
    width: var(--sps-icon-size);
    height: var(--sps-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.20) !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    transition: transform var(--sps-transition), background-color var(--sps-transition);
}
.c-social-icons__link:hover {
    background-color: var(--sps-accent) !important;
}
.c-social-icons__link--fb    { background-image: url(images/icon-fb.png); }
.c-social-icons__link--tw    { background-image: url(images/icon-tw.png); }
.c-social-icons__link--in    { background-image: url(images/icon-in.png); }
.c-social-icons__link--insta { background-image: url(images/icon-insta.png); }
.c-social-icons__link--yt    { background-image: url(images/icon-youtube.png); }

/* Footer widget columns */
.copyright-area { width: 100%; }
.footerarea { width: 100%; }
.footer.ftr-widg { padding: 0 0 30px; }
.footer-all { width: 100%; }
.rfl-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.rfl-row .cols-3 {
    flex: 1 1 calc(25% - 23px);
    min-width: 200px;
}

.footer aside.widget {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.footer h1, .footer h2, .footer h3,
.footer h4, .footer h5, .footer h6,
.footer .widget-title {
    color: var(--sps-footer-heading);
	font-weight:600;
    margin-bottom: 8px;
    padding-bottom: 12px;
	font-family: var(--sps-font-footer-heading);
}
.footer .widget-title::after { background: var(--sps-accent); }

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li {
    padding: 4px 0;
    border-bottom: none;
}
.footer ul li:last-child { border-bottom: 0; }
.footer ul li a,
.footer-row ul li a,
.footer-row .cols-3 ul li a {
    color: var(--sps-text-footer) !important;
    background: none;
}
.footer ul li a:hover,
.footer-row ul li a:hover,
.footer-row .cols-3 ul li a:hover { color: var(--sps-text-black) !important; }
.footer p { color: var(--sps-text-footer); }
.footer a { color: var(--sps-text-footer); background: none; }
.footer a:hover { color: var(--sps-accent); }

/* Copyright strip */
.copyright-wrapper { background: var(--sps-copyright-bg); }
.copyright-wrapper .container {
    padding-top: 22px;
    padding-bottom: 22px;
}
.copyright-txt {
    text-align: center;
    font-size: 14px;
    color: var(--sps-text-footer);
}
.copyright-txt a { color: var(--sps-accent); background: none; font-weight: 600; }
.copyright-txt a:hover { color: var(--sps-honey); }


/* ==========================================================================
   13. Block Editor / Gutenberg
   ========================================================================== */
.entry-content > .alignwide { width: 100%; }
.alignwide { margin-left: -40px; margin-right: -40px; width: calc(100% + 80px); max-width: none; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignleft { float: left; margin: 6px 28px 18px 0; }
.alignright { float: right; margin: 6px 0 18px 28px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; }

.wp-block-image img,
.wp-caption img { border-radius: var(--sps-radius); }
.wp-block-image figcaption,
.wp-caption-text {
    font-size: 13.5px;
    color: var(--sps-muted);
    text-align: center;
    margin-top: 8px;
}
.wp-caption {
    max-width: 100%;
    background: var(--sps-surface-soft);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius);
    padding: 8px;
}

.wp-block-quote,
.is-style-skt-coworking-plain {
    border-left: 4px solid var(--sps-accent);
    background: var(--sps-accent-tint);
    border-radius: 0 var(--sps-radius) var(--sps-radius) 0;
    margin: 28px 0;
    padding: 22px 26px;
    font-family: var(--sps-font-heading);
    font-style: italic;
    font-size: 19px;
    color: var(--sps-text-dark);
}
.wp-block-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 14px; color: var(--sps-muted); }

.wp-block-pullquote {
    border-top: 3px solid var(--sps-accent);
    border-bottom: 3px solid var(--sps-accent);
    padding: 28px 0;
    text-align: center;
    font-family: var(--sps-font-heading);
    font-style: italic;
}

.wp-block-button__link { color: var(--sps-text-invert); }

.wp-block-separator {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sps-line-strong), transparent);
    max-width: 120px;
}
.wp-block-separator.is-style-wide { max-width: 100%; }

.wp-block-table table { width: 100%; }
.wp-block-table figcaption { font-size: 13.5px; color: var(--sps-muted); text-align: center; }

.wp-block-search__label { font-weight: 700; }


/* ==========================================================================
   14. WooCommerce essentials
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius-lg);
    box-shadow: var(--sps-shadow-sm);
    padding: 16px;
    text-align: center;
    transition: transform var(--sps-transition), box-shadow var(--sps-transition);
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--sps-shadow);
}
.woocommerce ul.products li.product img { border-radius: var(--sps-radius); margin-bottom: 12px; }
.woocommerce ul.products li.product .price {
    color: var(--sps-accent-deep);
    font-weight: 700;
    font-size: 18px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--sps-font-heading);
    font-size: 18px;
    padding: 6px 0;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-cart__submit-button,
.wc-block-checkout__submit-button,
.woocommerce-product-search button[type="submit"] {
    background: var(--sps-accent);
    color: var(--sps-text-invert);
    border: 0;
    border-radius: var(--sps-radius-pill);
    padding: 12px 26px;
    font-weight: 600;
    box-shadow: 0 10px 24px -12px rgba(224, 96, 60, 0.8);
    transition: all var(--sps-transition);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--sps-accent-deep);
    transform: translateY(-2px);
}

.woocommerce .price,
.woocommerce span.price { color: var(--sps-accent-deep); font-weight: 700; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--sps-radius);
    border: 1px solid var(--sps-line);
    border-top: 3px solid var(--sps-accent);
    background: var(--sps-surface);
    padding: 16px 20px;
}
.woocommerce-error { border-top-color: var(--sps-accent-deep); }

.woocommerce-product-search { display: flex; gap: 8px; }
.woocommerce-product-search input[type="search"] { flex: 1; }


/* ==========================================================================
   15. Tables, Code, Blockquote (base elements)
   ========================================================================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    background: var(--sps-surface);
    border-radius: var(--sps-radius);
    overflow: hidden;
    box-shadow: var(--sps-shadow-xs);
}
th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--sps-line);
}
thead th { background: var(--sps-paper-2); font-family: var(--sps-font-body); font-weight: 700; color: var(--sps-text-dark); }
tbody tr:last-child td { border-bottom: 0; }

blockquote {
    margin: 28px 0;
    padding: 20px 26px;
    border-left: 4px solid var(--sps-accent);
    background: var(--sps-accent-tint);
    border-radius: 0 var(--sps-radius) var(--sps-radius) 0;
    font-family: var(--sps-font-heading);
    font-style: italic;
    color: var(--sps-text-dark);
}

code, kbd, samp {
    font-family: var(--sps-font-mono);
    font-size: 0.9em;
    background: var(--sps-paper-2);
    padding: 2px 7px;
    border-radius: 6px;
    color: var(--sps-accent-deep);
}
pre {
    font-family: var(--sps-font-mono);
    background: var(--sps-ink);
    color: #f3ece1;
    padding: 20px 22px;
    border-radius: var(--sps-radius);
    overflow: auto;
    line-height: 1.6;
    margin: 0 0 24px;
}
pre code { background: none; color: inherit; padding: 0; }


/* ==========================================================================
   16. Accessibility & Utilities
   ========================================================================== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px; width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: var(--sps-surface);
    border-radius: var(--sps-radius-sm);
    box-shadow: var(--sps-shadow);
    clip: auto !important;
    clip-path: none;
    color: var(--sps-accent-deep);
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 6px; top: 6px;
    padding: 14px 22px;
    width: auto;
    z-index: 100000;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
}
.skip-link:focus {
    left: 6px; top: 6px;
    background: var(--sps-accent);
    color: var(--sps-text-invert);
    padding: 12px 20px;
    border-radius: var(--sps-radius-sm);
    box-shadow: var(--sps-shadow);
}

.alignnone { margin: 6px 0 18px; }

.sticky {
    display: block;
}

.gallery-caption {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}


/* ==========================================================================
   17. RTL
   ========================================================================== */
.rtl .header-topbar .right { margin-left: 0; margin-right: auto; }
.rtl .postmeta .post-tags a { margin: 3px 0 0 4px; }
.rtl .alignleft { float: right; margin: 6px 0 18px 28px; }
.rtl .alignright { float: left; margin: 6px 28px 18px 0; }
.rtl .wp-block-quote,
.rtl blockquote,
.rtl .is-style-skt-coworking-plain {
    border-left: 0;
    border-right: 4px solid var(--sps-accent);
    border-radius: var(--sps-radius) 0 0 var(--sps-radius);
}
.rtl .widget-title::after { left: auto; right: 0; }
.rtl .blog-post article::before,
.rtl .site-main > article::before { left: auto; right: 0; }
.rtl .comment-list .children { margin-left: 0; margin-right: 28px; padding-left: 0; padding-right: 22px; border-left: 0; border-right: 2px solid var(--sps-line); }
.rtl #navigation { justify-content: flex-start; }
.rtl .main-navigation ul ul { left: auto; right: 0; }
.rtl .main-navigation ul ul ul { left: auto; right: calc(100% + 10px); }