/*
Theme Name:   Blocksy Child
Template:     blocksy
Description:  Isobj child theme for Blocksy — merged homepage + category page styles
Version:      1.1.0
Text Domain:  blocksy-child
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#191c20;
  --ink-2:#4b5158;
  --ink-3:#8a9098;
  --bg:#ffffff;
  --wash:#f5f6f3;
  --line:#e5e7e3;
  --accent:#2b50e0;
  --accent-ink:#1d3aad;
  --accent-wash:#eef1fd;
  --radius:10px;
  --maxw:1120px;
  /* category hues (chip bg / icon color) — all 13 categories */
  --c-finance-bg:#e9f4ec;    --c-finance:#1e7a43;
  --c-health-bg:#fdeeee;     --c-health:#c2413d;
  --c-date-bg:#f0edfa;       --c-date:#5b45c0;
  --c-text-bg:#fdf3e4;       --c-text:#a06414;
  --c-pdf-bg:#fdecec;        --c-pdf:#c03535;
  --c-image-bg:#e9f2f8;      --c-image:#20669c;
  --c-dev-bg:#edf1f4;        --c-dev:#3c4652;
  --c-convert-bg:#e8f5f3;    --c-convert:#0f7a6c;
  --c-generators-bg:#f3ecfa; --c-generators:#7a3cb8;
  --c-templates-bg:#eef3e6;  --c-templates:#5a7a1e;
  --c-business-bg:#fdf0e6;   --c-business:#b05c14;
  --c-home-trade-bg:#f0f0e6; --c-home-trade:#6e6a1c;
  --c-seo-bg:#e6f2f5;        --c-seo:#127a8c;
}

/* Category pages: slightly narrower content + per-category tint vars.
   The taxonomy template sets body classes: isobj-cat cat-{slug}. */
body.isobj-cat{--maxw:1100px;--cat-bg:var(--accent-wash);--cat-ink:var(--accent-ink)}
/* Category tint vars. Scoped to body.cat-{slug} (single-category pages) AND
   .arch-group.cat-{slug} so the all-tools archive, which mixes every category
   on one body, still tints each group's chips via the shared .trow .chip rule. */
body.cat-finance,.arch-group.cat-finance{--cat-bg:var(--c-finance-bg);--cat-ink:var(--c-finance)}
body.cat-health,.arch-group.cat-health{--cat-bg:var(--c-health-bg);--cat-ink:var(--c-health)}
body.cat-date,.arch-group.cat-date{--cat-bg:var(--c-date-bg);--cat-ink:var(--c-date)}
body.cat-text,.arch-group.cat-text{--cat-bg:var(--c-text-bg);--cat-ink:var(--c-text)}
body.cat-pdf,.arch-group.cat-pdf{--cat-bg:var(--c-pdf-bg);--cat-ink:var(--c-pdf)}
body.cat-image,.arch-group.cat-image{--cat-bg:var(--c-image-bg);--cat-ink:var(--c-image)}
body.cat-dev,.arch-group.cat-dev{--cat-bg:var(--c-dev-bg);--cat-ink:var(--c-dev)}
body.cat-convert,.arch-group.cat-convert{--cat-bg:var(--c-convert-bg);--cat-ink:var(--c-convert)}
body.cat-generators,.arch-group.cat-generators{--cat-bg:var(--c-generators-bg);--cat-ink:var(--c-generators)}
body.cat-templates,.arch-group.cat-templates{--cat-bg:var(--c-templates-bg);--cat-ink:var(--c-templates)}
body.cat-business,.arch-group.cat-business{--cat-bg:var(--c-business-bg);--cat-ink:var(--c-business)}
body.cat-home-trade,.arch-group.cat-home-trade{--cat-bg:var(--c-home-trade-bg);--cat-ink:var(--c-home-trade)}
body.cat-seo,.arch-group.cat-seo{--cat-bg:var(--c-seo-bg);--cat-ink:var(--c-seo)}

/* ============================================================
   BASE (shared by homepage + category pages)
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body.isobj-front,
body.isobj-cat{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.isobj-front a,
.isobj-cat a{color:inherit;text-decoration:none}
.isobj-front button,
.isobj-cat button{font:inherit;cursor:pointer;border:none;background:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.isobj-cat .wrap{padding:0 24px}
.mono{font-family:'IBM Plex Mono',monospace}

/* ============================================================
   HEADER (shared)
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo img{display:block;height:48px;width:auto}
.logo .cube{display:block}
.logo .dot{width:10px;height:10px;background:var(--accent);border-radius:2px;display:inline-block;transform:rotate(45deg)}
.logo .tld{color:var(--ink-3);font-weight:500}
.nav{display:flex;gap:4px}
.nav a{font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:8px;white-space:nowrap;transition:background .15s,color .15s}
.nav a:hover{background:var(--wash);color:var(--ink)}
.nav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav a.is-active{background:var(--accent-wash);color:var(--accent-ink)}
.nav-toggle{display:none;padding:8px;border-radius:8px;color:var(--ink)}
.isobj-cat .nav-toggle{background:none;border:1px solid var(--line);border-radius:9px;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;padding:0}

/* Blocksy-rendered pages use the same compact menu hit area as the custom
   headers. Blocksy stretches links to the full header-row height by default,
   producing a much larger hover rectangle. */
#header [data-device="desktop"] [class*="header-menu"] .menu > li > .ct-menu-link{
  height:auto;
  padding:8px 12px;
  border-radius:8px;
}
#header [data-device="desktop"] [class*="header-menu"] .menu > li:hover > .ct-menu-link{
  background:var(--wash);
  color:var(--ink);
}
#header [data-device="desktop"] [class*="header-menu"] .menu > li.current-menu-item > .ct-menu-link{
  background:var(--accent-wash);
  color:var(--accent-ink);
}
@media(max-width:1024px){
  .nav{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:8px 16px 16px}
  .nav.open{display:flex}
  .nav-toggle{display:block}
  .isobj-cat .nav-toggle{display:flex}
}

/* ============================================================
   HOMEPAGE — hero
   ============================================================ */
.hero{position:relative;padding:72px 0 56px;background:
  linear-gradient(#ffffffcc,#ffffffcc),
  repeating-linear-gradient(0deg,transparent,transparent 27px,#2b50e014 28px),
  repeating-linear-gradient(90deg,transparent,transparent 27px,#2b50e014 28px);
  border-bottom:1px solid var(--line)}
.hero .wrap{max-width:760px;text-align:center}
.hero .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
.hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,5.5vw,54px);letter-spacing:-.03em;line-height:1.08;margin-bottom:14px}
.hero .sub{font-size:17px;color:var(--ink-2);margin-bottom:30px}
.searchbox{position:relative;max-width:580px;margin:0 auto}
.searchbox svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:19px;height:19px;stroke:var(--ink-3);pointer-events:none}
#tool-search{width:100%;height:56px;padding:0 88px 0 48px;font:inherit;font-size:16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgb(20 24 40 / .04),0 6px 20px rgb(20 24 40 / .05);transition:border-color .15s,box-shadow .15s}
#tool-search::placeholder{color:var(--ink-3)}
#tool-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
.kbd-hint{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:var(--wash)}
.hero .quicklinks{margin-top:18px;font-size:13px;color:var(--ink-3)}
.hero .quicklinks a{color:var(--accent-ink);font-weight:500;margin:0 4px}
.hero .quicklinks a:hover{text-decoration:underline}

/* homepage search status / no results */
.search-status{display:none;text-align:center;padding:14px 0 0;font-size:14px;color:var(--ink-2)}
.search-status.visible{display:block}
.search-status button{color:var(--accent-ink);font-weight:500;text-decoration:underline}

/* ============================================================
   HOMEPAGE — sections & cards
   ============================================================ */
section.tools-section{padding:44px 0 8px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.section-head h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.section-head .cat-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:2px}
.viewall{font-size:14px;font-weight:500;color:var(--accent-ink);white-space:nowrap}
.viewall:hover{text-decoration:underline}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tool-card{display:flex;align-items:flex-start;gap:13px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:border-color .15s,transform .15s,box-shadow .15s}
.tool-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgb(43 80 224 / .08);transform:translateY(-1px)}
.tool-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tool-card .chip{flex:0 0 40px;width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.tool-card .chip svg{width:20px;height:20px;stroke-width:1.8}
.tool-card .t-name{font-weight:600;font-size:15px;line-height:1.3;margin-bottom:2px}
.tool-card .t-desc{font-size:13px;color:var(--ink-2);line-height:1.45}

/* chip colors — all 13 categories */
.chip.finance{background:var(--c-finance-bg);color:var(--c-finance)}
.chip.health{background:var(--c-health-bg);color:var(--c-health)}
.chip.date{background:var(--c-date-bg);color:var(--c-date)}
.chip.text{background:var(--c-text-bg);color:var(--c-text)}
.chip.pdf{background:var(--c-pdf-bg);color:var(--c-pdf)}
.chip.image{background:var(--c-image-bg);color:var(--c-image)}
.chip.dev{background:var(--c-dev-bg);color:var(--c-dev)}
.chip.convert{background:var(--c-convert-bg);color:var(--c-convert)}
.chip.generators{background:var(--c-generators-bg);color:var(--c-generators)}
.chip.templates{background:var(--c-templates-bg);color:var(--c-templates)}
.chip.business{background:var(--c-business-bg);color:var(--c-business)}
.chip.home-trade{background:var(--c-home-trade-bg);color:var(--c-home-trade)}
.chip.seo{background:var(--c-seo-bg);color:var(--c-seo)}

/* popular section slightly emphasized */
#popular{padding-top:40px}
#popular .tool-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* ============================================================
   AD SLOTS (shared base + page-specific variants)
   ============================================================ */
/* Slots emitted by the plugin's isobj_ad_slot(). They ship [hidden] and must
   stay invisible with no ad network connected — a visitor should not be able to
   tell the page was built for ads.

   The [hidden] guard has to live HERE, not only in the plugin's style-kit.css:
   that stylesheet is enqueued on single tool pages only, so on a category page
   this file is the sole thing standing between a hidden slot and a visible
   empty box. Any display value added to .isobj-ad below must keep the guard
   above it in specificity — [hidden] is (0,2,0) and wins over the bare class.

   No placeholder styling (dashed border, wash background, mono label): that was
   for the prototype, and a real ad brings its own creative. */
.isobj-ad{display:block;margin:0 0 28px}
.isobj-ad[hidden]{display:none}
/* In-feed band. Spans the whole grid so it takes a visual row of its own —
   without the span it drops into a single cell beside a tool row, which reads
   as a tool card rather than an ad. Harmless on mobile, where .rows is already
   one column. */
.cat-infeed{grid-column:1/-1;margin:6px 0}

/* Homepage prototype placeholder — still visible, still hardcoded in
   front-page.php. Slated for the same treatment as the category slots. */
.ad-slot{margin:40px auto;max-width:var(--maxw);padding:0 20px}
.ad-inner{border:1px dashed #c9cdc6;border-radius:var(--radius);background:var(--wash);min-height:100px;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-3);letter-spacing:.06em}

/* ============================================================
   HOMEPAGE — trust / about
   ============================================================ */
.trust{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0;margin-top:48px}
.trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:820px){.trust .wrap{grid-template-columns:1fr;gap:32px}}
.trust h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.02em;margin-bottom:14px}
.trust p{font-size:15px;color:var(--ink-2);margin-bottom:12px}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.badges{grid-template-columns:1fr}}
.badge{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.badge svg{width:20px;height:20px;stroke:var(--accent);stroke-width:1.8;margin-bottom:8px}
.badge .b-title{font-weight:600;font-size:14px;margin-bottom:2px}
.badge .b-desc{font-size:13px;color:var(--ink-2);line-height:1.45}

/* ============================================================
   CATEGORY PAGES — hero
   ============================================================ */
.cat-hero{background:
  linear-gradient(color-mix(in srgb,var(--cat-bg) 85%,transparent),color-mix(in srgb,var(--cat-bg) 85%,transparent)),
  repeating-linear-gradient(0deg,transparent,transparent 27px,color-mix(in srgb,var(--cat-ink) 8%,transparent) 28px),
  repeating-linear-gradient(90deg,transparent,transparent 27px,color-mix(in srgb,var(--cat-ink) 8%,transparent) 28px);
  border-bottom:1px solid var(--line);padding:40px 0 34px}
.crumbs{margin:0 0 8px;font-size:13px;color:var(--cat-ink);display:flex;gap:8px}
.crumbs a{font-weight:500}
.crumbs a:hover{text-decoration:underline}
.crumbs .here{font-weight:600}
.cat-hero .row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cat-hero h1{margin:0 0 8px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(28px,4vw,40px);letter-spacing:-.03em}
.cat-hero .desc{margin:0;font-size:16px;color:var(--ink-2);max-width:620px}
.cat-search{width:340px;max-width:100%;height:46px;border:1.5px solid color-mix(in srgb,var(--cat-ink) 25%,#fff);border-radius:12px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 14px}
.cat-search svg{flex:0 0 auto;stroke:var(--ink-3)}
.cat-search input{flex:1;border:none;outline:none;font:inherit;font-size:14px;color:var(--ink);background:none;min-width:0}
.cat-search input::placeholder{color:var(--ink-3)}
.cat-search kbd{font-family:'IBM Plex Mono',monospace;font-size:11px;border:1px solid color-mix(in srgb,var(--cat-ink) 25%,#fff);border-radius:5px;padding:1px 6px;background:var(--cat-bg);color:var(--ink-3)}
@media(max-width:700px){.cat-hero{padding:24px 0 20px}.cat-search{width:100%}.cat-search kbd{display:none}}

/* Static pages (page.php): readable prose column for About/Contact/Privacy/
   Terms and any future page. Uses the same tokens as the rest of the site. */
body.isobj-static-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.isobj-static-page main{flex:1 0 auto}
body.isobj-static-page .site-footer{flex-shrink:0}

/* Blocksy owns the outer layout on single tool pages. Let its main content
   consume any unused viewport height so the footer stays at the bottom. */
body.isobj-cat{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.isobj-cat>main{flex:1 0 auto}
body.isobj-cat>footer{flex-shrink:0}
.page-body{padding:36px 0 56px}
.page-prose{max-width:720px;color:var(--ink);font-size:16px;line-height:1.7}
.page-prose>*:first-child{margin-top:0}
.page-prose h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em;margin:2em 0 .5em}
.page-prose h3{font-weight:600;font-size:17px;margin:1.6em 0 .4em}
.page-prose p{margin:0 0 1em}
.page-prose ul,.page-prose ol{margin:0 0 1em;padding-left:1.3em}
.page-prose li{margin:.3em 0}
.page-prose a{color:var(--accent-ink);font-weight:500}
.page-prose a:hover{text-decoration:underline}
.page-prose strong{font-weight:600}
.page-prose em{color:var(--ink-2)}

/* ============================================================
   CATEGORY PAGES — content rows
   ============================================================ */
.cat-body{padding:28px 0 44px}
.rows{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
@media(max-width:820px){.rows{grid-template-columns:1fr}}

/* All-tools archive: one titled group per category, reusing .section-head,
   .rows and .trow from the category/homepage designs. Only the between-group
   rhythm is new. */
.arch-group + .arch-group{margin-top:36px}
.arch-group .section-head{margin-bottom:14px}
.arch-infeed{margin:28px 0}
.trow{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:border-color .15s,transform .15s,box-shadow .15s}
.trow:hover{border-color:var(--cat-ink);box-shadow:0 4px 14px color-mix(in srgb,var(--cat-ink) 10%,transparent);transform:translateY(-1px)}
.trow .chip{flex:0 0 38px;width:38px;height:38px;border-radius:9px;background:var(--cat-bg);color:var(--cat-ink);display:flex;align-items:center;justify-content:center}
.trow .body{flex:1;min-width:0}
.trow .t-name{display:block;font-weight:600;font-size:15px;line-height:1.3}
.trow .t-desc{display:block;font-size:13px;color:var(--ink-2);line-height:1.45}
.trow .arrow{color:var(--ink-3)}
.no-results{display:none;padding:22px 0;color:var(--ink-2);font-size:14px}
.no-results.visible{display:block}

/* other categories chips */
.others{margin-top:34px}
.others .eyebrow{margin:0 0 10px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:500}
.chips a{padding:7px 12px;border-radius:99px}
.chips a:hover{filter:brightness(.96)}

/* ============================================================
   FOOTERS — homepage (fat) vs category (compact)
   ============================================================ */
.footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-bottom:36px}
@media(max-width:820px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
.footer-grid h3{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:8px}
.footer-grid a{font-size:14px;color:var(--ink-2)}
.footer-grid a:hover{color:var(--accent-ink)}
.footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}

.site-footer,.ct-footer{padding:22px 0 28px;border-top:1px solid var(--line)}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--ink-3);padding-top:6px;padding-bottom:6px;}
.ct-footer-copyright{margin-left:auto}
.isobj-site-footer .isobj-footer__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;color:var(--ink-3)}
.isobj-footer__nav{justify-self:center}
.isobj-footer__nav ul{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.isobj-footer__nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;color:var(--ink-3);font:inherit}
.isobj-footer__nav a:hover,.isobj-footer__nav a:focus-visible,.isobj-footer__nav a[aria-current="page"]{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.isobj-footer__nav a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px}
.isobj-footer__nav,.isobj-site-footer .ct-footer-copyright{font:inherit}
.isobj-site-footer .ct-footer-copyright{margin-left:0;white-space:nowrap}
@media(max-width:700px){
  .isobj-site-footer .isobj-footer__inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px}
  .isobj-footer__nav ul{display:grid;grid-template-columns:repeat(2,auto);gap:0 28px}
}