/* ==========================================================================
 * skin.css — SaaS content skin (Blog / Content Skin = "SaaS").
 *
 * Gated by body.skin-saas (set from the Blog/Content Skin option via the
 * fcs_site_skin_body_class() body_class filter). Skins EVERY native reader
 * view — blog index, single post, category/tag/date archives, search, plain
 * pages, FAQ (archive/category/single), and 404 — as the citAEOtion /
 * itsmylinks SaaS look: no hero (gated in home.php), card/list layouts on the
 * site's own dark background, accent hover states, real crawlable links.
 * Classic sites never receive this body class, so they are untouched — no fork.
 *
 * main.css (the legal base) still loads and styles these views for Classic
 * (serif headings, gold H2 underline, maroon buttons, dark body text). Every
 * rule here RESETS those base properties explicitly (font-family, border,
 * background, padding, color), or the legal treatment bleeds through. skin.css
 * prints after main.css/cae.css (source-order win) and the body.skin-saas
 * prefix wins on specificity. Enqueued with filemtime ?ver so edits bust cache.
 *
 * All colors come from the --sk-* tokens below. Every text/background pair
 * clears WCAG AA and AAA on the default palette; a light site (itsmylinks)
 * redefines the tokens and inherits the same passing structure.
 * ========================================================================== */

body.skin-saas {
	--sk-bg:        #081320;
	--sk-bg2:       #0c1c2e;
	--sk-ink:       #eef5fa;
	--sk-mut:       #94abbd;
	--sk-card:      rgba(255,255,255,.03);
	--sk-card-hover:rgba(255,255,255,.05);
	--sk-line:      rgba(255,255,255,.09);
	--sk-accent:    #fa903e;
	--sk-accent2:   #37d6f0;
	--sk-rad:       16px;
	--sk-font:      Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Site background — set on BOTH body and .site-main so short views never
 * reveal a white gap above the footer. */
body.skin-saas { background: var(--sk-bg); }
body.skin-saas .site-main { background: var(--sk-bg); }

/* ---------- Breadcrumb bar (between header and <main>) ---------- */
body.skin-saas .fcs-breadcrumbs { background: var(--sk-bg2); border-bottom: 1px solid var(--sk-line); }
body.skin-saas .fcs-breadcrumb-trail,
body.skin-saas .fcs-breadcrumb-item { color: var(--sk-mut); }
body.skin-saas .fcs-breadcrumb-item a { color: var(--sk-accent2); }
body.skin-saas .fcs-breadcrumb-item a:hover,
body.skin-saas .fcs-breadcrumb-item a:focus { color: var(--sk-accent); }
body.skin-saas .fcs-breadcrumb-item [aria-current="page"],
body.skin-saas .fcs-breadcrumb-sep { color: var(--sk-mut); }

/* ---------- Shared reader prose (light on dark) ---------- */
body.skin-saas .post-body,
body.skin-saas .page-content,
body.skin-saas .faq-single .faq-body,
body.skin-saas .faq-category .faq-excerpt,
body.skin-saas .faq-category .intro { font-family:var(--sk-font); font-size:17px; line-height:1.75; color:var(--sk-mut); }
body.skin-saas .post-body > :first-child,
body.skin-saas .page-content .page-header + *,
body.skin-saas .faq-single .faq-body > :first-child { margin-top:0; }
body.skin-saas .post-body p,
body.skin-saas .page-content p,
body.skin-saas .faq-single .faq-body p,
body.skin-saas .faq-category .faq-excerpt p,
body.skin-saas .faq-category .intro p { margin:0 0 18px; color:var(--sk-mut); }
body.skin-saas .post-body h2, body.skin-saas .post-body h3, body.skin-saas .post-body h4,
body.skin-saas .page-content h2, body.skin-saas .page-content h3, body.skin-saas .page-content h4,
body.skin-saas .faq-single .faq-body h2, body.skin-saas .faq-single .faq-body h3, body.skin-saas .faq-single .faq-body h4 { margin:34px 0 12px; padding:0; border:0; font-family:var(--sk-font); line-height:1.25; color:var(--sk-ink); }
body.skin-saas .post-body h2, body.skin-saas .page-content h2, body.skin-saas .faq-single .faq-body h2 { font-size:27px; font-weight:800; letter-spacing:-.01em; }
body.skin-saas .post-body h3, body.skin-saas .page-content h3, body.skin-saas .faq-single .faq-body h3 { font-size:21px; font-weight:700; }
body.skin-saas .post-body a, body.skin-saas .page-content a, body.skin-saas .faq-single .faq-body a,
body.skin-saas .faq-category .faq-excerpt a, body.skin-saas .faq-category .intro a { color:var(--sk-accent2); text-decoration:underline; text-decoration-color:rgba(55,214,240,.5); text-underline-offset:3px; }
body.skin-saas .post-body a:hover, body.skin-saas .page-content a:hover, body.skin-saas .faq-single .faq-body a:hover { text-decoration-color:var(--sk-accent2); }
body.skin-saas .post-body strong, body.skin-saas .post-body b,
body.skin-saas .page-content strong, body.skin-saas .page-content b,
body.skin-saas .faq-single .faq-body strong { color:var(--sk-ink); }
body.skin-saas .post-body ul, body.skin-saas .post-body ol,
body.skin-saas .page-content ul, body.skin-saas .page-content ol,
body.skin-saas .faq-single .faq-body ul, body.skin-saas .faq-single .faq-body ol { margin:0 0 18px 22px; color:var(--sk-mut); }
body.skin-saas .post-body li, body.skin-saas .page-content li, body.skin-saas .faq-single .faq-body li { margin:0 0 8px; }
body.skin-saas .post-body blockquote, body.skin-saas .page-content blockquote, body.skin-saas .faq-single .faq-body blockquote { margin:0 0 18px; padding:12px 20px; border-left:3px solid var(--sk-accent); background:var(--sk-card); color:var(--sk-ink); border-radius:0 8px 8px 0; }
body.skin-saas .post-body img, body.skin-saas .page-content img, body.skin-saas .faq-single .faq-body img { max-width:100%; height:auto; border-radius:10px; }
body.skin-saas .post-body code, body.skin-saas .page-content code, body.skin-saas .faq-single .faq-body code { background:rgba(255,255,255,.06); border:1px solid var(--sk-line); border-radius:6px; padding:2px 7px; font-family:ui-monospace,Menlo,monospace; font-size:14.5px; color:var(--sk-accent2); }

/* ---------- Blog index (home.php) ---------- */
body.skin-saas .fcs-blog-archive { max-width:1180px; margin:0 auto; padding:56px 28px 84px; background:transparent; }
body.skin-saas .fcs-blog-header { text-align:center; margin:0 0 40px; padding:0; border:0; }
body.skin-saas .fcs-blog-header h1 { color:var(--sk-ink); font-family:var(--sk-font); font-size:44px; font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:0; padding:0; border:0; }
body.skin-saas .fcs-blog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
body.skin-saas .fcs-blog-card { position:relative; display:flex; flex-direction:column; margin:0; background:var(--sk-card); border:1px solid var(--sk-line); border-radius:var(--sk-rad); overflow:hidden; font-family:var(--sk-font); transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease; }
body.skin-saas .fcs-blog-card:hover { border-color:var(--sk-accent); background:var(--sk-card-hover); transform:translateY(-3px); box-shadow:0 0 0 1px var(--sk-accent), 0 24px 50px -26px rgba(250,144,62,.55); }
body.skin-saas .fcs-blog-card__title a::after { content:""; position:absolute; inset:0; z-index:1; }
body.skin-saas .fcs-blog-card__media { display:block; aspect-ratio:16/10; overflow:hidden; margin:0; background:#0b1a2b; }
body.skin-saas .fcs-blog-card__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
body.skin-saas .fcs-blog-card:hover .fcs-blog-card__media img { transform:scale(1.04); }
body.skin-saas .fcs-blog-card__media-placeholder { display:block; width:100%; height:100%; background:linear-gradient(135deg,#0c1c2e,#081320); }
body.skin-saas .fcs-blog-card__body { display:flex; flex-direction:column; flex:1; padding:22px 22px 24px; }
body.skin-saas .fcs-blog-card__meta { order:-1; margin:0 0 10px; font-family:var(--sk-font); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sk-mut); }
body.skin-saas .fcs-blog-card__title { margin:0 0 10px; padding:0; border:0; font-family:var(--sk-font); font-size:20px; line-height:1.28; font-weight:800; letter-spacing:-.01em; }
body.skin-saas .fcs-blog-card__title a { color:var(--sk-ink); text-decoration:none; border:0; }
body.skin-saas .fcs-blog-card__excerpt { flex:1; margin:0 0 18px; font-family:var(--sk-font); font-size:14.5px; line-height:1.6; color:var(--sk-mut); }
body.skin-saas .fcs-blog-card__excerpt p { margin:0; }
body.skin-saas .fcs-blog-card__more { position:relative; z-index:2; align-self:flex-start; margin-top:auto; padding:0; border:0; border-radius:0; background:none; box-shadow:none; font-family:var(--sk-font); color:var(--sk-accent2); font-weight:700; font-size:14.5px; text-decoration:none; }
body.skin-saas .fcs-blog-card__more:hover { background:none; color:var(--sk-accent); transform:none; }

/* ---------- Single post (single.php) ---------- */
body.skin-saas .single-post-content { max-width:820px; margin:0 auto; padding:56px 28px 84px; background:transparent; color:var(--sk-ink); font-family:var(--sk-font); }
body.skin-saas .single-post-content .post-header { margin:0 0 24px; padding:0; border:0; }
body.skin-saas .single-post-content .post-header h1 { margin:0 0 12px; padding:0; border:0; font-family:var(--sk-font); font-size:40px; line-height:1.14; font-weight:800; letter-spacing:-.02em; color:var(--sk-ink); }
body.skin-saas .single-post-content .post-meta { margin:0; font-family:var(--sk-font); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--sk-mut); }
body.skin-saas .single-post-content .post-thumbnail { margin:0 0 28px; border-radius:var(--sk-rad); overflow:hidden; }
body.skin-saas .single-post-content .post-thumbnail img { display:block; width:100%; height:auto; }

/* ---------- Archives (archive.php: category/tag/date) ---------- */
body.skin-saas .archive-listing { max-width:900px; margin:0 auto; padding:56px 28px 84px; background:transparent; }
body.skin-saas .archive-header { margin:0 0 28px; }
body.skin-saas .archive-header h1 { margin:0 0 10px; padding:0; border:0; font-family:var(--sk-font); font-size:40px; line-height:1.14; font-weight:800; letter-spacing:-.02em; color:var(--sk-ink); }
body.skin-saas .archive-description { color:var(--sk-mut); font-family:var(--sk-font); font-size:16px; line-height:1.7; }
body.skin-saas .post-list { display:flex; flex-direction:column; gap:0; }
body.skin-saas .post-summary { margin:0; padding:24px 0; border-bottom:1px solid var(--sk-line); }
body.skin-saas .post-summary h2 { margin:0 0 8px; padding:0; border:0; font-family:var(--sk-font); font-size:22px; line-height:1.25; font-weight:800; letter-spacing:-.01em; }
body.skin-saas .post-summary h2 a { color:var(--sk-ink); text-decoration:none; }
body.skin-saas .post-summary h2 a:hover { color:var(--sk-accent2); }
body.skin-saas .post-summary .post-meta { margin:0 0 10px; font-family:var(--sk-font); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sk-mut); }
body.skin-saas .post-summary p { margin:0; color:var(--sk-mut); font-family:var(--sk-font); line-height:1.65; }

/* ---------- Plain page (page.php) ---------- */
body.skin-saas .page-content { max-width:820px; margin:0 auto; padding:56px 28px 84px; background:transparent; }
body.skin-saas .page-content .page-header { margin:0 0 20px; }
body.skin-saas .page-content .page-header h1 { margin:0; padding:0; border:0; font-family:var(--sk-font); font-size:40px; line-height:1.14; font-weight:800; letter-spacing:-.02em; color:var(--sk-ink); }

/* ---------- Search results (index.php fallback under is_search) ---------- */
body.skin-saas.search .site-main > .fcs-container { max-width:820px; margin:0 auto; padding:56px 28px 84px; color:var(--sk-mut); font-family:var(--sk-font); }
body.skin-saas.search .site-main > .fcs-container article { margin:0; padding:24px 0; border-bottom:1px solid var(--sk-line); }
body.skin-saas.search .site-main > .fcs-container article h1 { margin:0 0 10px; padding:0; border:0; font-family:var(--sk-font); font-size:22px; font-weight:800; letter-spacing:-.01em; }
body.skin-saas.search .site-main > .fcs-container article h1 a { color:var(--sk-ink); text-decoration:none; }
body.skin-saas.search .site-main > .fcs-container article h1 a:hover { color:var(--sk-accent2); }

/* ---------- 404 (404.php: main.fcs-404) ---------- */
body.skin-saas .fcs-404 { color:var(--sk-ink); font-family:var(--sk-font); }
body.skin-saas .fcs-404 h1 { margin:0 0 12px; padding:0; border:0; font-family:var(--sk-font); font-size:40px; font-weight:800; letter-spacing:-.02em; color:var(--sk-ink); }
body.skin-saas .fcs-404 p { color:var(--sk-mut); font-family:var(--sk-font); }
body.skin-saas .fcs-404 a { color:var(--sk-accent2); text-decoration:underline; text-underline-offset:3px; }
body.skin-saas .fcs-404 a:hover { color:var(--sk-accent); }

/* ---------- FAQ archive (archive-faq.php) ---------- */
body.skin-saas .faq-archive { max-width:900px; margin:0 auto; padding:40px 28px 84px; color:var(--sk-mut); font-family:var(--sk-font); }
body.skin-saas .faq-archive-intro { color:var(--sk-mut); font-size:16px; margin:0 0 26px; }
body.skin-saas .faq-category-group { margin:0 0 30px; }
body.skin-saas .faq-category-group h2 { margin:0 0 12px; padding:0 0 8px; border:0; border-bottom:2px solid var(--sk-accent); font-family:var(--sk-font); font-size:22px; font-weight:800; color:var(--sk-ink); }
body.skin-saas .faq-category-group h2 a { color:var(--sk-ink); text-decoration:none; }
body.skin-saas .faq-category-group h2 a:hover { color:var(--sk-accent); }
body.skin-saas .faq-archive-list { list-style:none; margin:0; padding:0; }
body.skin-saas .faq-archive-list li { margin:0; border-bottom:1px solid var(--sk-line); }
body.skin-saas .faq-archive-list li a { display:block; padding:11px 0; color:var(--sk-accent2); text-decoration:none; }
body.skin-saas .faq-archive-list li a:hover { color:var(--sk-accent); }

/* ---------- FAQ category (taxonomy-faq_category.php) ---------- */
body.skin-saas .faq-category { max-width:820px; margin:0 auto; padding:40px 28px 84px; color:var(--sk-mut); font-family:var(--sk-font); }
body.skin-saas .faq-category .faq-section .faq { margin:0; padding:22px 0; border-bottom:1px solid var(--sk-line); }
body.skin-saas .faq-category .faq h3 { margin:0 0 8px; padding:0; border:0; font-family:var(--sk-font); font-size:20px; font-weight:800; }
body.skin-saas .faq-category .faq h3 a { color:var(--sk-ink); text-decoration:none; }
body.skin-saas .faq-category .faq h3 a:hover { color:var(--sk-accent2); }
body.skin-saas .faq-category .faq-meta-archive { margin:0 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--sk-mut); }

/* ---------- FAQ single (single-faq.php) ---------- */
body.skin-saas .faq-single { max-width:820px; margin:0 auto; padding:40px 28px 84px; color:var(--sk-mut); font-family:var(--sk-font); }
body.skin-saas .faq-single .faq-meta { margin:22px 0 0; font-size:13px; color:var(--sk-mut); }
body.skin-saas .faq-single .faq-meta a { color:var(--sk-accent2); text-decoration:none; }
body.skin-saas .faq-single .faq-meta a:hover { color:var(--sk-accent); }

/* ---------- Generic pagination (archive + faq: .pagination / the_posts_pagination) ---------- */
body.skin-saas .fcs-blog-pagination,
body.skin-saas .pagination { margin-top:46px; text-align:center; }
body.skin-saas .fcs-blog-pagination .nav-links,
body.skin-saas .pagination .nav-links { display:inline-flex; gap:6px; justify-content:center; flex-wrap:wrap; }
body.skin-saas .fcs-blog-pagination a, body.skin-saas .fcs-blog-pagination span,
body.skin-saas .pagination a, body.skin-saas .pagination span { display:inline-block; padding:9px 15px; border:1px solid var(--sk-line); border-radius:9px; background:none; color:var(--sk-ink); font-family:var(--sk-font); font-size:14px; font-weight:600; }
body.skin-saas .fcs-blog-pagination a:hover,
body.skin-saas .pagination a:hover { border-color:var(--sk-accent); color:var(--sk-accent); }
body.skin-saas .fcs-blog-pagination .current,
body.skin-saas .pagination .current { background:var(--sk-accent); color:#081320; border-color:var(--sk-accent); }
body.skin-saas .fcs-blog-empty { text-align:center; color:var(--sk-mut); padding:60px 0; }

/* ---------- Mobile ---------- */
@media (max-width:768px) {
	body.skin-saas .fcs-blog-grid { grid-template-columns:1fr; }
	body.skin-saas .fcs-blog-header h1 { font-size:32px; }
	body.skin-saas .fcs-blog-archive,
	body.skin-saas .single-post-content,
	body.skin-saas .archive-listing,
	body.skin-saas .page-content,
	body.skin-saas .faq-archive,
	body.skin-saas .faq-category,
	body.skin-saas .faq-single { padding-left:20px; padding-right:20px; padding-bottom:64px; }
	body.skin-saas .single-post-content .post-header h1,
	body.skin-saas .archive-header h1,
	body.skin-saas .page-content .page-header h1,
	body.skin-saas .fcs-404 h1 { font-size:30px; }
	body.skin-saas .post-body,
	body.skin-saas .page-content,
	body.skin-saas .faq-single .faq-body { font-size:16px; }
}
/* Sub-hero title band — reset legal serif to the SaaS font (FAQ single) */
body.skin-saas .sub-hero-band .smallTitle{font-family:var(--sk-font);color:var(--sk-ink)}
body.skin-saas .sub-hero-band h2.smallTitle{font-weight:600;color:var(--sk-mut)}
/* Hide the empty FAQ CTA wrapper (<div class="cta"><p></p></div> when blank) */
body.skin-saas .faq-archive .cta,body.skin-saas .faq-category .cta,body.skin-saas .faq-single .cta{background:none;border:0;padding:0;margin:0}
body.skin-saas .faq-archive .cta p:empty,body.skin-saas .faq-category .cta p:empty,body.skin-saas .faq-single .cta p:empty{display:none}
body.skin-saas .faq-category .faq{background:none;border:0;border-bottom:1px solid var(--sk-line);border-radius:0;box-shadow:none;padding:22px 0}