/*
Theme Name: WP MD Site Builder
Theme URI: https://compective.com/
Author: Compective
Description: Reusable block theme for deterministic Markdown-to-Gutenberg site builds.
Version: 0.1.0
Requires at least: 6.0
Text Domain: wp-md-site-builder
*/

:root{
  --bg:var(--wp--custom--color--bg);
  --bg-light:var(--wp--custom--color--bg-light);
  --surface:var(--wp--custom--color--surface);
  --surface-soft:var(--wp--custom--color--surface-soft);
  --soft:var(--wp--custom--color--soft);
  --text:var(--wp--custom--color--text);
  --muted:var(--wp--custom--color--muted);
  --line:var(--wp--custom--color--line);
  --primary:var(--wp--custom--color--primary);
  --primary-hover:var(--wp--custom--color--primary-hover);
  --secondary:var(--wp--custom--color--secondary);
  --secondary-soft:var(--wp--custom--color--secondary-soft);
  --highlight:var(--wp--custom--color--highlight);
  --footer:var(--wp--custom--color--footer);
  --on-primary:var(--wp--custom--color--on-primary);
  --header-bg:var(--wp--custom--color--header-bg);
  --header-border:var(--wp--custom--color--header-border);
  --hero-surface-end:var(--wp--custom--color--hero-surface-end);
  --hero-primary-accent:var(--wp--custom--color--hero-primary-accent);
  --hero-secondary-accent:var(--wp--custom--color--hero-secondary-accent);
  --hero-cta-bg:var(--wp--custom--color--hero-cta-bg);
  --hero-cta-border:var(--wp--custom--color--hero-cta-border);
  --toc-bg:var(--wp--custom--color--toc-bg);
  --toc-border:var(--wp--custom--color--toc-border);
  --primary-subtle-border:var(--wp--custom--color--primary-subtle-border);
  --table-header-bg:var(--wp--custom--color--table-header-bg);
  --table-header-text:var(--wp--custom--color--table-header-text);
  --table-header-border:var(--wp--custom--color--table-header-border);
  --table-header-bottom-border:var(--wp--custom--color--table-header-bottom-border);
  --visual-placeholder-border:var(--wp--custom--color--visual-placeholder-border);
  --lightbox-overlay:var(--wp--custom--color--lightbox-overlay);
  --radius:var(--wp--custom--radius--default);
  --radius-sm:var(--wp--custom--radius--small);
  --shadow:var(--wp--custom--shadow--default);
  --shadow-soft:var(--wp--custom--shadow--soft);
  --button-hover-shadow:var(--wp--custom--shadow--button-hover);
  --toc-shadow:var(--wp--custom--shadow--toc);
  --feature-shadow:var(--wp--custom--shadow--feature);
  --lightbox-image-shadow:var(--wp--custom--shadow--lightbox-image);
  --content:var(--wp--style--global--content-size,780px);
  --wide:var(--wp--style--global--wide-size,1120px);
}

/* Base */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden;}
body{margin:0;max-width:100%;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:var(--wp--preset--font-family--system-sans);font-size:17px;line-height:1.65;text-rendering:optimizeLegibility;}
body.page .wp-site-blocks > .wp-block-post-content{margin-block-start:0;}
a{color:var(--secondary);font-weight:700;text-decoration-thickness:1.7px;text-underline-offset:.2em;}
a:hover{color:var(--primary);}
p{margin:0 0 1.05rem;}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 28px;}

/* Header and navigation */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--header-border);}
.nav{height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:inline-flex;align-items:center;color:var(--text);text-decoration:none;font-weight:930;font-size:21px;letter-spacing:-.03em;}
.brand img{max-height:40px;width:auto;}
.nav-links{display:flex;align-items:center;gap:24px;}
.nav-links a{color:var(--text);font-size:15px;text-decoration:none;font-weight:750;}
.nav-links a:hover{color:var(--primary);}
.header-actions{display:flex;align-items:center;gap:10px;}
.mobile-menu{display:none;position:relative;}
.mobile-menu summary{list-style:none;cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 13px;font-weight:850;}
.mobile-menu summary::-webkit-details-marker{display:none;}
.mobile-panel{position:absolute;right:0;top:48px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow);min-width:190px;display:grid;gap:4px;}
.mobile-panel a{color:var(--text);text-decoration:none;font-size:15px;padding:9px 10px;border-radius:10px;}
.mobile-panel a:hover{background:var(--secondary-soft);}

/* Buttons */
.header-cta,.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--primary);border:2px solid var(--primary);color:var(--on-primary)!important;text-decoration:none;font-weight:875;line-height:1.1;padding:12px 20px;transition:.16s ease;}
.header-cta{padding:10px 16px;font-size:14px;white-space:nowrap;}
.header-cta:hover,.button:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary)!important;transform:translateY(-1px);box-shadow:var(--button-hover-shadow);}

/* Hero and article shell */
.hero{padding:60px 0 56px;}
.hero-card{background:linear-gradient(135deg,var(--surface),var(--hero-surface-end));border:1px solid var(--line);border-radius:32px;padding:54px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden;}
.hero-card:after{content:"";position:absolute;right:-76px;top:-80px;width:280px;height:280px;border-radius:42% 58% 48% 52%;background:linear-gradient(135deg,var(--hero-primary-accent),var(--hero-secondary-accent));transform:rotate(-16deg);}
.hero-card:before{content:"";position:absolute;right:58px;bottom:44px;width:120px;height:12px;border-radius:999px;background:var(--hero-primary-accent);}
.hero-content{position:relative;z-index:1;max-width:850px;}
.eyebrow{display:inline-flex;align-items:center;color:var(--primary);background:var(--soft);border:1px solid var(--primary-subtle-border);border-radius:999px;padding:7px 11px;font-size:13px;font-weight:900;letter-spacing:.065em;text-transform:uppercase;margin-bottom:17px;}
h1,h2,h3{line-height:1.08;letter-spacing:-.045em;margin:0 0 18px;}
h1{font-size:clamp(42px,6.2vw,66px);max-width:960px;}
h2{font-size:clamp(30px,3.8vw,41px);}
h3{font-size:23px;letter-spacing:-.025em;}
.lead{font-size:clamp(19px,2.2vw,23px);line-height:1.48;color:var(--muted);max-width:790px;}
.article-hero{padding:52px 0 38px;}
.article-hero-inner{max-width:var(--content);margin:0 auto;}
.article-meta{display:flex;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:14px;font-weight:750;margin:-4px 0 20px;}

/* Content layout */
.section{padding:38px 0 76px;}
.section > .wrap > .content{margin-left:auto;margin-right:auto;}
.content{max-width:var(--content);min-width:0;}
.content.wide{max-width:var(--wide);}
.content > .content-section{max-width:var(--content);}
.split{display:grid;grid-template-columns:235px minmax(0,var(--content));gap:46px;align-items:start;justify-content:center;}
.toc{background:var(--toc-bg);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--toc-shadow);max-height:calc(100vh - 120px);overflow:auto;}
.toc-title{font-size:13px;text-transform:uppercase;letter-spacing:.07em;font-weight:950;color:var(--muted);margin-bottom:8px;}
.toc a{display:block;color:var(--muted);text-decoration:none;font-weight:720;font-size:14px;line-height:1.35;padding:8px 0;border-top:1px solid var(--toc-border);}
.toc a:hover{color:var(--primary);}
.content-intro > :last-child{margin-bottom:0;}
.content-section{margin:0 0 56px;scroll-margin-top:100px;}
.content-section > :last-child{margin-bottom:0;}
.content-section > h2 + .feature-grid,.content-section > h2 + .before-after,.content-section > h2 + .pros-cons,.content-section > h2 + .table-wrap,.content-section > h2 + .visual,.content-section > h2 + .card-grid,.content-section > h2 + .cta-block,.content-section > h2 + .c-cta{margin-top:24px;}
.content-section > h3{margin-top:28px;}
.content-section > h2 + h3{margin-top:0;}
.content-section p{color:var(--text);}

/* Final list rail alignment */
.content-section > ul:not(.task-list),.content-section > ol,.content-section > .task-list{padding-left:4px;margin:0 0 23px;list-style:none;display:grid;row-gap:8px;}
.content-section > ul:not(.task-list) > li,.content-section > ol > li,.content-section > .task-list > li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:5px;align-items:start;margin:0;padding-left:0;line-height:1.55;}
.content-section > ul:not(.task-list) > li::marker,.content-section > ol > li::marker{content:"";color:transparent;}
.content-section > ul:not(.task-list) > li::before{content:"";display:block;width:7px;height:7px;border-radius:999px;background:var(--primary);justify-self:start;align-self:start;margin:calc((1.55em - 7px) / 2) 0 0 0;}
.content-section > ol{counter-reset:item;}
.content-section > ol > li{counter-increment:item;}
.content-section > ol > li::before{content:counter(item) ".";color:var(--secondary);font-weight:850;font-size:1em;line-height:1.55;text-align:left;background:transparent;border-radius:0;width:22px;height:auto;margin:0;display:block;}
.content-section > .task-list > li::before{content:none;}
.content-section > .task-list input[type="checkbox"]{width:16px;height:16px;margin:5.5px 0 0 0;justify-self:start;}
.content-section > ul:not(.task-list) > li > .li-content,.content-section > ol > li > .li-content,.content-section > .task-list > li > .li-content{min-width:0;}
.content-section > ol > li > .li-content{display:inline;}

/* Task lists */
.task-list input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:5.5px 0 0 0;accent-color:var(--secondary);border:2px solid var(--primary);border-radius:4px;background:var(--bg);display:inline-block;}
.task-list input[type="checkbox"]:checked{background:var(--primary);box-shadow:inset 0 0 0 3px var(--bg);}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;margin:24px 0 0;justify-content:start;}
.product-card,.resource-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-soft);margin:24px 0;max-width:760px;position:relative;overflow:hidden;}
.product-card{border-top:6px solid var(--primary);}
.resource-card{border-top:6px solid var(--secondary);}
.product-card:after,.resource-card:after{content:"";position:absolute;right:-38px;top:-38px;width:120px;height:120px;border-radius:50%;z-index:0;}
.product-card:after{background:var(--soft);}
.resource-card:after{background:var(--secondary-soft);}
.product-card > *,.resource-card > *{position:relative;z-index:1;}
.product-card h3,.resource-card h3{margin-top:0;}
.product-card p,.resource-card p{margin-bottom:0;}
.card-niche{font-weight:680;color:var(--text);margin:-8px 0 12px;font-size:15px;}
.card-link{font-weight:900;text-decoration:none;}
.resource-card .card-link{color:var(--secondary);}
.resource-card .card-link:hover{color:var(--primary);}
.card-grid .product-card,.card-grid .resource-card{width:100%;max-width:none;margin:0;min-height:220px;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;}
.card-grid .product-card .card-link,.card-grid .resource-card .card-link{margin-top:auto;padding-top:14px;}
.card-grid:has(.product-card:only-child),.card-grid:has(.resource-card:only-child){grid-template-columns:minmax(0,var(--content));}
.card-grid:has(.product-card:nth-child(2):last-child),.card-grid:has(.resource-card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));}
.card-grid:has(.product-card:nth-child(3)),.card-grid:has(.resource-card:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));}

/* CTAs */
.cta-block,.c-cta{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--primary);border-radius:24px;padding:26px 28px;margin:30px 0;box-shadow:var(--shadow-soft);}
.checkout-cta{display:block;}
.hero .checkout-cta{background:var(--hero-cta-bg);border-left:5px solid var(--primary);border-color:var(--hero-cta-border);box-shadow:var(--shadow-soft);margin-top:30px;max-width:var(--content);width:100%;}
.hero .checkout-cta,.checkout-cta,.cta-block,.c-cta{border-left-color:var(--primary)!important;}
.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"product price" "trust action";column-gap:50px;row-gap:12px;align-items:start;}
.cta-head{grid-area:product;}
.cta-product{font-weight:920;font-size:18px;line-height:1.25;}
.cta-niche{color:var(--text);font-weight:680;line-height:1.38;margin-top:6px;}
.cta-price{grid-area:price;font-weight:950;color:var(--primary);font-size:20px;line-height:1.25;white-space:nowrap;text-align:right;}
.cta-action{grid-area:action;display:grid;justify-items:end;align-items:start;}
.trust{grid-area:trust;font-size:14px;color:var(--muted);font-weight:650;line-height:1.45;max-width:350px;}
.product-cta{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"product action"!important;align-items:center!important;column-gap:42px!important;row-gap:12px!important;}
.product-cta .cta-head{grid-area:product!important;max-width:520px!important;min-width:0!important;}
.product-cta .button{grid-area:action!important;width:auto!important;min-width:210px!important;max-width:100%!important;white-space:normal!important;text-align:center!important;justify-self:end!important;}
.cta-action .button{white-space:normal;text-align:center;}

/* Feature and comparison components */
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0 8px;}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--feature-shadow);}
.feature-bar{width:46px;height:5px;border-radius:999px;background:var(--primary);margin-bottom:16px;}
.feature h3{font-size:20px;margin:0 0 8px;}
.feature p{font-size:15.5px;color:var(--muted);margin:0;}
.before-after,.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0;}
.before-col,.after-col,.pros-col,.cons-col{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-soft);}
.before-col h3,.after-col h3,.pros-col h3,.cons-col h3{margin-top:0;}
.before-after ul,.pros-cons ul{list-style:none!important;padding:0!important;margin:0!important;}
.before-after li,.pros-cons li{position:relative;padding-left:34px!important;margin:12px 0!important;}
.before-col li:before,.cons-col li:before{content:"\2212";position:absolute;left:0;top:-2px;color:var(--primary);font-size:28px;font-weight:950;line-height:1;}
.after-col li:before,.pros-col li:before{content:"+";position:absolute;left:0;top:-2px;color:var(--secondary);font-size:25px;font-weight:950;line-height:1;}

/* Tables */
.table-wrap{overflow-x:auto;max-width:100%;margin:26px 0;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-soft);}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:15px;}
th,td{text-align:left;vertical-align:top;padding:15px 17px;border-bottom:1px solid var(--line);}
th{background:var(--table-header-bg);color:var(--table-header-text);font-weight:950;border-right:1px solid var(--table-header-border);border-bottom:2px solid var(--table-header-bottom-border);}
th:last-child{border-right:0;}
tr:last-child td{border-bottom:0;}

/* Visual cards */
.visual,.c-visual{border:1px solid var(--line);border-radius:24px;background:var(--surface)!important;padding:24px;margin:28px 0;box-shadow:var(--shadow-soft);overflow:visible;}
.visual-title{font-size:18px;text-transform:none;letter-spacing:-.02em;font-weight:920;color:var(--text);margin-bottom:12px;line-height:1.2!important;}
.visual-notes{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.3!important;}
.visual-notes::before{content:"";display:block;width:56px;height:1px;background:var(--line);margin:0 0 10px 0;}
.visual-frame{border:0!important;background:transparent!important;border-radius:0!important;overflow:visible!important;display:block!important;}
.visual-link{display:block;line-height:0;text-decoration:none!important;color:inherit;cursor:zoom-in;}
.visual-frame picture,.visual-frame img{display:block;width:100%;max-width:100%;height:auto;}
.visual-frame img{object-fit:contain;}
.visual-frame img[src$=".svg"]{width:100%;height:auto;}
.visual-placeholder{min-height:240px;border:2px dashed var(--visual-placeholder-border);border-radius:18px;display:flex;align-items:center;justify-content:center;color:var(--secondary);font-weight:850;text-align:center;padding:24px;}

/* Lightbox */
.visual-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:flex-start!important;justify-content:center!important;padding:84px 32px 32px!important;background:var(--lightbox-overlay);overflow:auto!important;-webkit-overflow-scrolling:touch!important;}
.visual-lightbox.is-open{display:flex;}
.visual-lightbox-inner{position:relative!important;width:min(1180px,calc(100vw - 64px))!important;max-width:1180px!important;max-height:none!important;display:block!important;margin:0 auto!important;}
.visual-lightbox img{display:block!important;width:100%!important;max-width:100%!important;max-height:none!important;height:auto!important;object-fit:contain!important;background:var(--surface);border-radius:12px;box-shadow:var(--lightbox-image-shadow);}
.visual-lightbox-close{position:absolute!important;top:-52px!important;right:0!important;z-index:10000!important;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-weight:900;line-height:1;cursor:pointer;box-shadow:var(--shadow-soft);}

/* Highlight and forms */
.highlight,.c-highlight{background:var(--soft);border-left:4px solid var(--primary);border-radius:18px;padding:20px 22px;margin:24px 0;}
.contact-form-notice{max-width:var(--content);margin:0 auto 18px;padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-weight:750;}
.contact-form-notice-success{border-left:4px solid var(--secondary);}
.contact-form-notice-error{border-left:4px solid var(--primary);}
.contact-form{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-soft);padding:24px;margin:24px 0;}
.contact-form-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.page-type-contact .contact-form{max-width:640px;}
.contact-form label{display:grid;gap:6px;font-size:14px;font-weight:850;color:var(--muted);}
.contact-form input,.contact-form textarea{font:inherit;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:var(--surface);}
.contact-form textarea{min-height:130px;resize:vertical;}
.page-type-contact .content-section h2,.page-type-legal .content-section h2{font-size:clamp(21px,2.05vw,26px)!important;line-height:1.18!important;letter-spacing:-.03em;margin-bottom:10px!important;}
.page-type-contact .content-section,.page-type-legal .content-section{margin-bottom:30px!important;}

/* Footer */
.site-footer{background:var(--footer);padding:46px 0;margin-top:30px;}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px;align-items:start;}
.footer-brand{color:var(--text);text-decoration:none;font-weight:930;font-size:21px;letter-spacing:-.03em;}
.footer-brand-col p{color:var(--text);max-width:320px;font-size:15px;line-height:1.5;margin-top:9px;}
.footer-title{font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:950;color:var(--text);margin-bottom:10px;}
.footer-grid a:not(.footer-brand){display:block;color:var(--text);text-decoration:none;font-size:15px;font-weight:680;margin:7px 0;}
.footer-grid a:hover{color:var(--primary);}

/* Responsive */
@media(max-width:980px){
  .wrap{padding:0 22px;}
  .nav-links{display:none;}
  .mobile-menu{display:block;}
  .hero{padding:32px 0 32px;}
  .hero-card{padding:32px 24px;border-radius:26px;}
  .hero-card:after{right:-120px;top:-130px;}
  .section{padding:24px 0 54px;}
  .split{display:block;}
  .toc{display:none;}
  .feature-grid,.before-after,.pros-cons{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px 24px!important;}
  .footer-brand-col{grid-column:1/-1!important;}
  .footer-brand-col p{max-width:290px!important;}
  .footer-title{margin-bottom:8px!important;}
  .footer-grid a:not(.footer-brand){margin:6px 0!important;}
}

@media(max-width:780px){
  .card-grid,.card-grid:has(.product-card:only-child),.card-grid:has(.resource-card:only-child),.card-grid:has(.product-card:nth-child(2):last-child),.card-grid:has(.resource-card:nth-child(2):last-child),.card-grid:has(.product-card:nth-child(3)),.card-grid:has(.resource-card:nth-child(3)){grid-template-columns:1fr!important;}
  .article-hero{padding:30px 0 20px;}
  h1{font-size:clamp(36px,10vw,42px);}
}

@media(max-width:620px){
  body{font-size:16px;}
  .eyebrow{padding-left:16px!important;padding-right:16px!important;max-width:100%;line-height:1.35;}
  .hero-card{padding-bottom:52px!important;}
  .hero-card:before{bottom:24px!important;}
  .checkout-grid{grid-template-columns:1fr!important;grid-template-areas:"product" "price" "action" "trust"!important;row-gap:12px!important;}
  .checkout-grid .trust{max-width:none!important;margin-top:2px;}
  .cta-price{text-align:left;}
  .cta-action{justify-items:start;}
  .cta-action .button,.product-cta .button{width:100%!important;min-width:0!important;}
  .cta-block{padding:23px 22px!important;}
  .product-cta{grid-template-columns:1fr!important;grid-template-areas:"product" "action"!important;align-items:start!important;justify-items:start!important;padding:23px 22px!important;row-gap:15px!important;}
  .product-cta .cta-head{max-width:none!important;width:100%!important;}
  .button{width:100%;padding:13px 18px;}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 22px!important;}
  .footer-brand-col{margin-bottom:0!important;}
  .footer-brand-col p{max-width:260px!important;}
  table{min-width:620px;}
  .visual{padding:18px;}
  .visual-title{font-size:17px;line-height:1.2!important;margin-bottom:10px;}
  .visual-notes{line-height:1.3!important;margin-top:9px;}
  .content-section{margin-bottom:44px;}
  .content-section > ul:not(.task-list),.content-section > ol,.content-section > .task-list{padding-left:3px;}
  .content-section > ul:not(.task-list) > li,.content-section > ol > li,.content-section > .task-list > li{column-gap:4px;}
  .page-type-contact .contact-form{max-width:none;}
  .visual-lightbox{padding:72px 10px 22px!important;}
  .visual-lightbox-inner{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;}
  .visual-lightbox img{border-radius:10px!important;}
  .visual-lightbox-close{top:-50px!important;right:0!important;}
}