/*
Theme Name: Mini Ink Onsil
Theme URI: https://haesoltattoo.com/
Description: Mini Ink Seoul — casual tattoos by Onsil Ink. Premium onsil.ink-grade visual layer over the Tattoo Studio parent theme. CSS + hooks only; no template overrides (parent loop/wp_head/wp_footer preserved). Brownfield Phase-2.
Author: Onsil Ink (AEO)
Template: tattoo-studio
Version: 1.0.6
Requires at least: 6.0
Tested up to: 6.9.4
Text Domain: mini-ink-onsil
*/

/* ============================================================
   onsil.ink design tokens (§2.1 — ported verbatim, pure CSS)
   HARD LOCK: 7-color palette only. #000 / #FFF forbidden.
   ============================================================ */
:root {
  --base-primary:#FAF7F2;      /* hanji off-white */
  --base-secondary:#F0EBE3;    /* beige */
  --text-primary:#2B2724;      /* sumi ink */
  --text-secondary:#6B6560;    /* warm grey */
  --accent-gold:#B5985A;       /* CTA / link-hover ONLY */
  --line-subtle:#DDD5C9;       /* dividers */
  --overlay-shadow:rgba(43,39,36,.06);

  --font-display:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --font-display-kr:"Noto Serif KR","본명조",serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-body-kr:"Pretendard","Apple SD Gothic Neo",sans-serif;

  --fs-hero:clamp(2.5rem,5vw + 1rem,5rem);
  --fs-h1:clamp(2.25rem,4vw + .5rem,4rem);
  --fs-h2:clamp(1.5rem,2.5vw + .25rem,2.75rem);
  --fs-body:1rem;
  --fs-micro:.75rem;

  --lh-display:1.15;
  --lh-body:1.7;
  --lh-prose:1.85;

  --ls-display:-0.02em;
  --ls-upper:.08em;
  --ls-button:.1em;

  --space-section:100px;
  --space-block:64px;
  --prose-max:70ch;
  --container:1280px;

  --radius:0;
  --motion-fade:600ms cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Bunny Fonts (FOIT-safe, font-display:swap via &display=swap)
   Loaded here as @import so it ships with the child stylesheet.
   ============================================================ */
@import url('https://fonts.bunny.net/css?family=cormorant-garamond:400,500,600|eb-garamond:400,500|inter:400,500,600&display=swap');

/* ============================================================
   Base / reset of Tattoo Studio dark chrome → hanji light
   Scope to the parent body class so we only touch this theme.
   ============================================================ */
body.wp-theme-tattoo-studio,
body.wp-theme-mini-ink-onsil {
  background:var(--base-primary) !important;
  color:var(--text-primary) !important;
  font-family:var(--font-body),var(--font-body-kr) !important;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* hanji paper grain — subtle, multiply, non-interactive */
body.wp-theme-tattoo-studio::before,
body.wp-theme-mini-ink-onsil::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url('assets/hanji-grain.svg');
  background-size:280px 280px;
  opacity:.035;
  mix-blend-mode:multiply;
}
body.wp-theme-tattoo-studio > * { position:relative; z-index:1; }

/* neutralise dark backgrounds the parent paints on common shells */
.wp-theme-tattoo-studio .main-content,
.wp-theme-tattoo-studio #content,
.wp-theme-tattoo-studio .site-content,
.wp-theme-tattoo-studio .page-content,
.wp-theme-tattoo-studio section,
.wp-theme-tattoo-studio .container,
.wp-theme-tattoo-studio .row {
  background-color:transparent !important;
  color:var(--text-primary);
}

/* ============================================================
   Typography
   ============================================================ */
.wp-theme-tattoo-studio h1,
.wp-theme-tattoo-studio h2,
.wp-theme-tattoo-studio h3,
.wp-theme-tattoo-studio h4,
.wp-theme-tattoo-studio .wp-block-heading {
  font-family:var(--font-display),var(--font-display-kr) !important;
  color:var(--text-primary) !important;
  letter-spacing:var(--ls-display);
  line-height:var(--lh-display);
  font-weight:500;
}
.wp-theme-tattoo-studio h1,
.wp-theme-tattoo-studio h1.wp-block-heading { font-size:var(--fs-h1); }
.wp-theme-tattoo-studio h2 { font-size:var(--fs-h2); }
.wp-theme-tattoo-studio p,
.wp-theme-tattoo-studio li {
  font-family:var(--font-body),var(--font-body-kr);
  color:var(--text-secondary);
  line-height:var(--lh-prose);
}
.wp-theme-tattoo-studio a { color:var(--text-primary); text-decoration:none; transition:color var(--motion-fade); }
.wp-theme-tattoo-studio a:hover,
.wp-theme-tattoo-studio a:focus-visible { color:var(--accent-gold); }

/* uppercase micro labels */
.wp-theme-tattoo-studio .eyebrow,
.wp-theme-tattoo-studio .label,
.wp-theme-tattoo-studio .wp-block-heading.is-style-eyebrow {
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  text-transform:uppercase;
  letter-spacing:var(--ls-upper);
  color:var(--text-secondary);
}

/* ============================================================
   §2.2 — Generic page-title banner removal
   Live structure: </header><div class="header-image-box ...">
   <h1>Home</h1></div>  — kill ONLY this banner.
   The content identity H1 (.wp-block-heading) is NEVER matched.
   ============================================================ */
.wp-theme-tattoo-studio .header-image-box {
  display:none !important;
}

/* ============================================================
   Header / nav  (#site-navigation .header, #main-menu)
   Restyle only — markup/JS untouched (parent toggle preserved).
   ============================================================ */
.wp-theme-tattoo-studio #site-navigation.header,
.wp-theme-tattoo-studio header.header {
  background:var(--base-primary) !important;
  border-bottom:1px solid var(--line-subtle);
  box-shadow:0 1px 0 var(--overlay-shadow);
}
.wp-theme-tattoo-studio #main-menu a,
.wp-theme-tattoo-studio .header a {
  color:var(--text-primary) !important;
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  text-transform:uppercase;
  letter-spacing:var(--ls-upper);
}
.wp-theme-tattoo-studio #main-menu a:hover { color:var(--accent-gold) !important; }
.wp-theme-tattoo-studio .header .logo,
.wp-theme-tattoo-studio .site-title,
.wp-theme-tattoo-studio .site-title a {
  font-family:var(--font-display) !important;
  letter-spacing:var(--ls-display);
  color:var(--text-primary) !important;
}

/* ============================================================
   Sections — onsil alternating background + breathing room
   ============================================================ */
.wp-theme-tattoo-studio main section,
.wp-theme-tattoo-studio .entry-content > .wp-block-group {
  padding-block:var(--space-section);
}
.wp-theme-tattoo-studio main section:nth-of-type(even),
.wp-theme-tattoo-studio .entry-content > .wp-block-group:nth-of-type(even) {
  background:var(--base-secondary) !important;
}
.wp-theme-tattoo-studio .container { max-width:var(--container); }

/* prose + AEO answer-capsule (onsil pattern) */
.wp-theme-tattoo-studio .entry-content p,
.wp-theme-tattoo-studio .prose p {
  max-width:var(--prose-max);
  line-height:var(--lh-prose);
}
.wp-theme-tattoo-studio .answer-capsule,
.wp-theme-tattoo-studio .is-style-answer-capsule {
  background:var(--base-secondary);
  border-left:2px solid var(--accent-gold);
  padding:1.5rem 1.75rem;
  margin-block:var(--space-block);
  max-width:var(--prose-max);
}

/* ============================================================
   Buttons — outline gold, zero radius, no fill pills
   ============================================================ */
.wp-theme-tattoo-studio .wp-block-button__link,
.wp-theme-tattoo-studio .btn,
.wp-theme-tattoo-studio button.book-now,
.wp-theme-tattoo-studio a.button {
  background:transparent !important;
  color:var(--text-primary) !important;
  border:1px solid var(--accent-gold) !important;
  border-radius:var(--radius) !important;
  text-transform:uppercase;
  letter-spacing:var(--ls-button);
  font-family:var(--font-body);
  padding:.85rem 2rem;
  transition:background var(--motion-fade),color var(--motion-fade);
  box-shadow:none !important;
}
.wp-theme-tattoo-studio .wp-block-button__link:hover,
.wp-theme-tattoo-studio .btn:hover,
.wp-theme-tattoo-studio a.button:hover {
  background:var(--accent-gold) !important;
  color:var(--base-primary) !important;
}

/* ============================================================
   §2.2 — Modula gallery (id569) onsil "recent-works" restyle
   shortcode/items NEVER removed; container restyle only.
   ============================================================ */
.wp-theme-tattoo-studio .modula.modula-gallery {
  background:transparent !important;
  gap:2px;
}
.wp-theme-tattoo-studio .modula-items.grid-gallery { gap:2px !important; }
.wp-theme-tattoo-studio .modula-item {
  border-radius:var(--radius) !important;
  overflow:hidden;
  box-shadow:none !important;
}
.wp-theme-tattoo-studio .modula-item img {
  border-radius:var(--radius) !important;
  filter:saturate(.92);
  transition:transform var(--motion-fade),filter var(--motion-fade);
}
.wp-theme-tattoo-studio .modula-item:hover img {
  transform:scale(1.03);
  filter:saturate(1);
}
.wp-theme-tattoo-studio .modula-item-content .figc-title,
.wp-theme-tattoo-studio .modula-items .modula-item-title {
  font-family:var(--font-display) !important;
  color:var(--base-primary) !important;
  letter-spacing:var(--ls-display);
}
.wp-theme-tattoo-studio .modula-item:hover .modula-item-overlay {
  background:linear-gradient(to top,rgba(43,39,36,.55),transparent) !important;
}

/* ============================================================
   §2.2 — Footer minimal (onsil) + "Part of Onsil Ink" bridge
   Cruft widgets unregistered in functions.php; this restyles
   whatever remains + the injected bridge band.
   ============================================================ */
.wp-theme-tattoo-studio footer.footer-side,
.wp-theme-tattoo-studio .footer-side {
  background:var(--text-primary) !important;
  color:var(--base-primary) !important;
  padding-block:var(--space-block);
  border:0;
}
.wp-theme-tattoo-studio .footer-side a,
.wp-theme-tattoo-studio .footer-widget a { color:var(--base-secondary) !important; }
.wp-theme-tattoo-studio .footer-side a:hover { color:var(--accent-gold) !important; }
.wp-theme-tattoo-studio .footer-widget {
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  color:var(--base-secondary);
}
/* injected bridge band (functions.php wp_footer) */
.mio-bridge {
  background:var(--base-secondary);
  color:var(--text-secondary);
  text-align:center;
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:var(--ls-display);
  padding:2.25rem 1rem;
  border-top:1px solid var(--line-subtle);
}
.mio-bridge a {
  color:var(--accent-gold);
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}

/* ============================================================
   Motion — onsil restrained reveal; honour reduced-motion
   ============================================================ */
.mio-reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease;}
.mio-reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .wp-theme-tattoo-studio *,
  .mio-reveal{transition:none !important;animation:none !important;transform:none !important;opacity:1 !important;}
}

/* ============================================================
   Responsive — onsil clamp scale is intrinsic; only spacing
   ============================================================ */
@media (max-width:768px){
  :root{ --space-section:60px; }
  .wp-theme-tattoo-studio .modula-items.grid-gallery{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:480px){
  .wp-theme-tattoo-studio .modula-items.grid-gallery{ grid-template-columns:1fr !important; }
}


/* STEP 6.3 — kill footer widget cruft (Search/Meta/RSS tattoo-studio fallback). .mio-bridge (wp_footer, outside footer.footer-side) = onsil minimal footer. */
.wp-theme-tattoo-studio footer.footer-side{display:none !important;}


/* ============================================================
   STEP 6.5 header polish — neutralise off-palette parent chrome
   (red fa icon, white nav, raw header search) → onsil-grade.
   ============================================================ */
.wp-theme-tattoo-studio .menu-toggle,
.wp-theme-tattoo-studio .menu-toggle i,
.wp-theme-tattoo-studio .menu-toggle .fa-solid,
.wp-theme-tattoo-studio #site-navigation .fa-solid,
.wp-theme-tattoo-studio #site-navigation .fa-bars,
.wp-theme-tattoo-studio header [class*="fa-"] {
  background:transparent !important;
  color:var(--text-primary) !important;
  box-shadow:none !important;
}
.wp-theme-tattoo-studio .menu-toggle {
  border:1px solid var(--line-subtle) !important;
  border-radius:0 !important;
  padding:.5rem .7rem;
}
.wp-theme-tattoo-studio #main-menu,
.wp-theme-tattoo-studio #main-menu.close-panal,
.wp-theme-tattoo-studio .close-panal,
.wp-theme-tattoo-studio #main-menu .page_item,
.wp-theme-tattoo-studio #main-menu li {
  background:var(--base-primary) !important;
}
.wp-theme-tattoo-studio #main-menu a { color:var(--text-primary) !important; }
.wp-theme-tattoo-studio #main-menu a:hover { color:var(--accent-gold) !important; }

/* header search → minimal onsil (kept functional, de-emphasised) */
.wp-theme-tattoo-studio #searchform input[type="search"],
.wp-theme-tattoo-studio .searchform input[type="search"],
.wp-theme-tattoo-studio #search {
  background:var(--base-primary) !important;
  border:1px solid var(--line-subtle) !important;
  border-radius:0 !important;
  color:var(--text-primary) !important;
  font-family:var(--font-body);
}
.wp-theme-tattoo-studio .search-submit,
.wp-theme-tattoo-studio #searchform input[type="submit"] {
  background:transparent !important;
  color:var(--text-primary) !important;
  border:1px solid var(--accent-gold) !important;
  border-radius:0 !important;
  text-transform:uppercase;
  letter-spacing:var(--ls-button);
}
/* any inline pure-red the parent injects */
.wp-theme-tattoo-studio [style*="rgb(255, 0, 0)"],
.wp-theme-tattoo-studio [style*="#f00"],
.wp-theme-tattoo-studio [style*="#ff0000"] {
  background-color:transparent !important;
  color:var(--text-primary) !important;
}


/* STEP 6.5 final — slide-out panel close button + any residual red */
.wp-theme-tattoo-studio .close-menu,
.wp-theme-tattoo-studio .closepop,
.wp-theme-tattoo-studio .close-panal .close-menu,
.wp-theme-tattoo-studio button[class*="close"] {
  background:transparent !important;
  color:var(--text-primary) !important;
  border:1px solid var(--line-subtle) !important;
  box-shadow:none !important;
}
.wp-theme-tattoo-studio [style*="background:#ff0000"],
.wp-theme-tattoo-studio [style*="background-color:#ff0000"],
.wp-theme-tattoo-studio [style*="rgb(255,0,0)"] {
  background:transparent !important;
}


/* ============================================================
   STEP 6.3/6.5 ext — blog layout fix + sidebar de-cruft + prose
   Blog had col-lg-6 posts + col-lg-4 cruft sidebar (Search/
   Archives/Meta=admin·logout/TagCloud). Kill sidebar (Meta leak
   = §2.2 top priority), post column → full width onsil cards.
   ============================================================ */
.wp-theme-tattoo-studio.blog .col-lg-4.col-md-4,
.wp-theme-tattoo-studio.archive .col-lg-4.col-md-4,
.wp-theme-tattoo-studio.single .col-lg-4.col-md-4,
.wp-theme-tattoo-studio.blog aside.sidebar-widget,
.wp-theme-tattoo-studio.single aside.sidebar-widget,
.wp-theme-tattoo-studio.archive aside.sidebar-widget {
  display:none !important;
}
.wp-theme-tattoo-studio.blog [class*="col-lg-8"],
.wp-theme-tattoo-studio.blog [class*="col-lg-6"],
.wp-theme-tattoo-studio.archive [class*="col-lg-8"],
.wp-theme-tattoo-studio.single [class*="col-lg-8"] {
  flex:0 0 100% !important;
  max-width:100% !important;
}
.wp-theme-tattoo-studio .post-box {
  background:var(--base-primary);
  border:1px solid var(--line-subtle);
  border-radius:0;
  padding:2.5rem;
  margin-bottom:var(--space-block);
  max-width:var(--prose-max);
  margin-inline:auto;
}
.wp-theme-tattoo-studio .post-box h2,
.wp-theme-tattoo-studio .post-box .entry-title,
.wp-theme-tattoo-studio .post-box .post-title {
  font-family:var(--font-display) !important;
  letter-spacing:var(--ls-display);
  line-height:var(--lh-display);
}
.wp-theme-tattoo-studio .post-box img { border-radius:0 !important; }

/* prose strengthen — home entity sections + single post body */
.wp-theme-tattoo-studio .entry-content,
.wp-theme-tattoo-studio .post-content,
.wp-theme-tattoo-studio .single-content {
  max-width:var(--prose-max);
  margin-inline:auto;
  line-height:var(--lh-prose);
  font-size:1.05rem;
}
.wp-theme-tattoo-studio .entry-content > h2,
.wp-theme-tattoo-studio .entry-content > h3,
.wp-theme-tattoo-studio .post-content h2,
.wp-theme-tattoo-studio .post-content h3 {
  margin-top:3rem;
  margin-bottom:1rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--line-subtle);
}
.wp-theme-tattoo-studio .entry-content > p,
.wp-theme-tattoo-studio .post-content p { margin-bottom:1.4rem; }
.wp-theme-tattoo-studio .entry-content a,
.wp-theme-tattoo-studio .post-content a {
  color:var(--accent-gold);
  border-bottom:1px solid currentColor;
}

/* ============================================================
   v1.0.6 (2026-05-19) — responsive media + mobile overflow kill
   Root cause: blog/post/gallery thumbnails (.attachment-post-
   thumbnail in .post-thumbnail>.box) had computed max-width:none
   → rendered at intrinsic 2560px → 2613px page → mobile broke +
   images appeared "inactive" (off-canvas). Append-only, scoped
   to .wp-theme-tattoo-studio. No parent template touched.
   ============================================================ */
.wp-theme-tattoo-studio img,
.wp-theme-tattoo-studio .post-thumbnail img,
.wp-theme-tattoo-studio .attachment-post-thumbnail,
.wp-theme-tattoo-studio .wp-post-image,
.wp-theme-tattoo-studio .entry-content img,
.wp-theme-tattoo-studio .post-content img,
.wp-theme-tattoo-studio .post-box img,
.wp-theme-tattoo-studio figure img,
.wp-theme-tattoo-studio .gallery img,
.wp-theme-tattoo-studio .gallery-item img,
.wp-theme-tattoo-studio .blocks-gallery-item img,
.wp-theme-tattoo-studio .wp-block-image img {
  max-width:100% !important;
  height:auto !important;
}
.wp-theme-tattoo-studio .post-thumbnail,
.wp-theme-tattoo-studio .post-thumbnail .box,
.wp-theme-tattoo-studio .box,
.wp-theme-tattoo-studio .post-box,
.wp-theme-tattoo-studio article,
.wp-theme-tattoo-studio .entry-content { max-width:100%; }
.wp-theme-tattoo-studio .entry-content,
.wp-theme-tattoo-studio .post-content {
  overflow-wrap:break-word; word-break:break-word;
}
html, body { overflow-x:hidden; }
/* hide empty/broken AI-placeholder gallery images (src="" / no src) */
.wp-theme-tattoo-studio img[src=""],
.wp-theme-tattoo-studio img:not([src]) { display:none !important; }
@media (max-width:640px){
  .wp-theme-tattoo-studio .post-box { padding:1.25rem; }
  .wp-theme-tattoo-studio .entry-content,
  .wp-theme-tattoo-studio .post-content { font-size:1rem; line-height:1.75; }
  .wp-theme-tattoo-studio .post-thumbnail img,
  .wp-theme-tattoo-studio .attachment-post-thumbnail {
    width:100%; object-fit:cover;
  }
}