/* Tattoo Ashram — revamp (2026-11-07)
   Loaded LAST in <head> so it wins without !important wherever possible.
   Palette read from the theme's own CSS: #ff0000 is its accent (61 uses). */
:root{
  --t-red:#e11b22;          /* the theme's #ff0000, pulled back off pure red */
  --t-red-ink:#b2151b;
  --t-ink:#141414;
  --t-body:#4a4a4a;
  --t-line:#e4e4e4;
  --t-soft:#f7f7f7;
  --t-dark:#0d0d0d;
  --t-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- 1. Hero ----------
   Smart Slider 3 was dead here: window.N2 undefined, 5 slides with 4 parked
   at x=-100000, 146px tall on a phone. Replaced with .ew-hero, same five
   images in the same order.

   These slides are COLLAGES at four different aspect ratios (2.73, 2.67,
   1.83, 1.41). Cropping them to one ratio cuts the grid apart, so the box is
   fixed and the image is CONTAINed on the studio's own black. */
.ew-hero{ position:relative; overflow:hidden; background:var(--t-dark); }
.ew-hero .ew-track{ list-style:none; margin:0; padding:0; }
/* Cross-fade rather than a hard swap: all slides stack, only the active one
   is opaque. The first slide keeps the flow height so the box never collapses. */
.ew-hero .ew-track{ position:relative; }
.ew-hero .ew-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .55s var(--t-ease), visibility 0s linear .55s;
}
.ew-hero .ew-slide:first-child{ position:relative; }
.ew-hero .ew-slide.is-active{ opacity:1; visibility:visible; transition:opacity .55s var(--t-ease); z-index:1; }
@media (prefers-reduced-motion:reduce){ .ew-hero .ew-slide{ transition:none; } }

/* The collages are four different shapes, so the photo is CONTAINed. A blurred,
   darkened copy of the same photo fills the box behind it, which makes the
   letterboxing look deliberate instead of like dead space. */
.ew-hero .ew-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:blur(32px) saturate(1.25) brightness(.42);
  transform:scale(1.12);
  z-index:0; pointer-events:none;
}
.ew-hero .ew-slide > img:not(.ew-bg){ position:relative; z-index:1; }
.ew-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  box-shadow:inset 0 0 90px 10px rgba(0,0,0,.55);
}
.ew-hero .ew-slide img{
  display:block; width:100%; height:auto;
  aspect-ratio:2.2/1; object-fit:contain; object-position:center;
  background:var(--t-dark);
}
@media (max-width:767px){
  .ew-hero .ew-slide img{ aspect-ratio:4/3; }
}

/* The arrow trap: a bare <button> inherits the theme's button padding with
   content-box and renders as a wide pill. Force the box model. */
.ew-hero .ew-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  box-sizing:border-box!important; padding:0!important; margin:0!important;
  min-width:0!important; width:46px!important; height:46px!important;
  line-height:46px!important; font-size:20px!important; letter-spacing:0!important;
  border:0!important; border-radius:50%!important;
  background:rgba(0,0,0,.55)!important; color:#fff!important;
  cursor:pointer; z-index:3; transition:background .2s ease;
}
.ew-hero .ew-arrow:hover{ background:var(--t-red)!important; }
.ew-hero .ew-arrow:focus-visible{ outline:3px solid var(--t-red); outline-offset:2px; }
.ew-hero .ew-prev{ left:18px!important; }
.ew-hero .ew-next{ right:18px!important; }
.ew-hero .ew-dots{
  position:absolute; left:0; right:0; bottom:14px; text-align:center; z-index:3;
}
.ew-hero .ew-dots button{
  box-sizing:border-box!important; padding:0!important; min-width:0!important;
  width:11px!important; height:11px!important; line-height:0!important;
  margin:0 4px!important; border:0!important; border-radius:50%!important;
  background:rgba(255,255,255,.45)!important; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.ew-hero .ew-dots button.is-active{ background:var(--t-red)!important; transform:scale(1.15); }
.ew-hero .ew-dots button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (max-width:600px){
  .ew-hero .ew-arrow{ width:36px!important; height:36px!important; line-height:36px!important; font-size:16px!important; }
  .ew-hero .ew-prev{ left:10px!important; } .ew-hero .ew-next{ right:10px!important; }
}
@media (prefers-reduced-motion:reduce){ .ew-hero .ew-dots button{ transition:none; } }

/* ---------- 2. WhatsApp button — house default, bottom LEFT ----------
   The site shipped a join.chat widget whose own JS loaded but which stayed
   hidden/display:none on desktop and mobile alike, so there was no WhatsApp
   button at all on 51 pages. Removed, replaced with this. */
.u-wa{
  position:fixed!important; left:16px!important; right:auto!important; bottom:16px!important;
  width:62px; height:62px; border-radius:50%; background:#25D366;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.45); z-index:9000;
  display:block; text-decoration:none;
  transition:transform .2s var(--t-ease), box-shadow .2s ease;
}
.u-wa::after{
  content:""; position:absolute; inset:0; margin:auto; width:34px; height:34px;
  background:#fff;
  -webkit-mask:var(--wa) center/contain no-repeat; mask:var(--wa) center/contain no-repeat;
}
.u-wa{ --wa:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2A9.9 9.9 0 0 0 2.1 11.9a9.8 9.8 0 0 0 1.35 4.96L2 22l5.3-1.38a9.9 9.9 0 0 0 4.74 1.21h.01A9.9 9.9 0 0 0 22 11.93 9.9 9.9 0 0 0 12.04 2zm5.8 14.06c-.24.68-1.4 1.3-1.94 1.35-.5.05-.96.23-3.23-.67-2.72-1.07-4.45-3.84-4.58-4.02-.13-.18-1.1-1.46-1.1-2.79s.7-1.98.95-2.25c.25-.27.54-.34.72-.34h.52c.17 0 .4-.06.62.47.24.57.8 1.97.87 2.11.07.14.12.3.02.48-.1.18-.15.3-.3.46l-.44.5c-.14.14-.3.3-.13.6.17.3.75 1.23 1.6 2 1.1.98 2.02 1.28 2.32 1.43.3.15.47.13.64-.08.18-.2.74-.86.94-1.16.2-.3.4-.25.66-.15.27.1 1.67.79 1.96.93.29.14.48.21.55.33.07.12.07.7-.17 1.38z'/></svg>"); }
.u-wa:hover{ transform:translateY(-3px); box-shadow:0 10px 26px -8px rgba(0,0,0,.5); }
.u-wa:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
@media (max-width:767px){ .u-wa{ width:56px; height:56px; left:14px!important; bottom:14px!important; } }
@media (prefers-reduced-motion:reduce){ .u-wa{ transition:none; } .u-wa:hover{ transform:none; } }

/* ---------- 3. Phone row in the mobile menu ----------
   The theme's own menu works here, so this is the only thing added to it.
   Full nav width, not auto, with a 48px target. */
.u-menu-call{
  display:none; box-sizing:border-box; width:100%;
  align-items:center; gap:10px; min-height:48px; padding:12px 18px;
  background:var(--t-red); color:#fff!important; font-weight:600;
  text-decoration:none; white-space:nowrap;
}
.u-menu-call svg{ width:18px; height:18px; fill:currentColor; flex:0 0 auto; }
@media (max-width:767px){ .u-menu-call{ display:flex; } }

/* ---------- 4. The Facebook column ----------
   The footer promised "Like us on Facebook" above an iframe that Facebook
   refuses to frame (X-Frame-Options: deny) — an empty box on every page.
   Replaced with a real link to the studio's page. */
.u-fb-link{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px; border-radius:999px;
  background:#1877f2; color:#fff!important; font-weight:600;
  text-decoration:none; transition:background .2s ease, transform .2s ease;
}
.u-fb-link svg{ fill:currentColor; flex:0 0 auto; }
.u-fb-link:hover{ background:#145fc4; transform:translateY(-2px); }
.u-fb-link:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .u-fb-link{ transition:none; } .u-fb-link:hover{ transform:none; } }

/* ---------- 5. Gallery tiles ----------
   The theme frames every photo in an 8px flat white border — the picture-frame
   look these exports always ship with. Same geometry, modern treatment: the
   border becomes a hairline card with a real shadow, and the tile lifts on
   hover. The photos themselves are untouched. */
#Content .image_frame{
  border-width:6px !important; border-color:#fff !important; border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(20,20,20,.06), 0 10px 26px -14px rgba(20,20,20,.40);
  overflow:hidden;
  transition:box-shadow .3s var(--t-ease), transform .3s var(--t-ease);
}
#Content .image_frame:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 6px rgba(20,20,20,.08), 0 20px 40px -16px rgba(20,20,20,.48);
}
#Content .image_frame .image_wrapper{ overflow:hidden; border-radius:5px; }
#Content .image_frame img{ transition:transform .45s var(--t-ease); display:block; }
#Content .image_frame:hover img{ transform:scale(1.045); }
@media (prefers-reduced-motion:reduce){
  #Content .image_frame, #Content .image_frame img{ transition:none; }
  #Content .image_frame:hover{ transform:none; }
  #Content .image_frame:hover img{ transform:none; }
}

/* ---------- 6. Buttons ----------
   NOT a colour change. The theme already sets `.button-default .button` to
   #fe3e01, its own orange-red, on 646 buttons — and two buttons carry a
   deliberate inline `background-color:#000!important`. Both are the designer's
   decisions per §3.0, and an earlier version of this file overrode all 646 of
   them with a red of my own for no defect at all. Reverted.

   What is added here is only what the theme lacks: a transition, a hover lift
   and a real focus ring. Colour is left entirely alone. */
#Content a.button{
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#Content a.button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px -10px rgba(20,20,20,.45);
}
#Content a.button:focus-visible{ outline:3px solid currentColor; outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  #Content a.button{ transition:none; } #Content a.button:hover{ transform:none; }
}

/* ---------- 7. Mobile type floor ----------
   The theme drops body copy to 13px on phones — 52 paragraphs on one gallery
   page measured under 15px. Body text only: headings keep the theme's own
   sizes, and nothing here touches desktop. */
@media (max-width:767px){
  body{ font-size:16px; }
  #Content p, #Content li, #Content td,
  .column_attr p, .column_attr li{ font-size:16px; line-height:1.65; }
  #Footer p, #Footer li, #Footer a{ font-size:15px; line-height:1.6; }
  #Content p small, #Content .small{ font-size:14px; }
}

/* ---------- 8. The enquiry form's reply box ----------
   Success and failure both printed in the same grey. The active handler
   (#f3i-send) already tags the FORM with .sent / .failed — I first styled
   `.wpcf7-response-output.is-ok/.is-err` and patched a second handler to add
   those classes, only to find that second handler never runs: #f3i-send calls
   stopImmediatePropagation(). So the states are styled off the classes the
   live handler actually sets, and the dead handler was removed rather than
   fixed. */
.wpcf7 form .wpcf7-response-output,
form[data-3i] .wpcf7-response-output{
  margin:16px 0 0; padding:12px 16px;
  border:1px solid transparent; border-radius:10px;
  font-size:15px; line-height:1.5;
}
.wpcf7 form.sent .wpcf7-response-output,
form[data-3i].sent .wpcf7-response-output{
  border-color:rgba(26,156,91,.40) !important; background:#effaf4 !important; color:#12623a !important;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
form[data-3i].failed .wpcf7-response-output{
  border-color:rgba(190,120,20,.45) !important; background:#fff8ec !important; color:#8a5a06 !important;
}

/* ---------- 9. Header: black bar, white menu ----------
   #Action_bar is already #2c2c2c; #Top_bar was white with #444 links. The logo
   is artwork on black, so it sits correctly on a black bar. The active item and
   hover stay the theme's red — that is the brand, and it is the one colour on
   the bar that should not change. */
#Header_wrapper #Top_bar,
#Header_wrapper #Top_bar.is-sticky,
#Header_wrapper #Top_bar .container,
#Header_wrapper #Top_bar #menu{
  background-color:#000 !important;
}
#Header_wrapper #Top_bar{ border-bottom:1px solid rgba(255,255,255,.10); box-shadow:none; }
#Header_wrapper #Top_bar #menu > ul > li > a,
#Header_wrapper #Top_bar #menu > ul > li > a span:not(.description),
#Header_wrapper #Top_bar .menu > li > a{
  color:#fff !important;
}
#Header_wrapper #Top_bar #menu > ul > li > a:hover,
#Header_wrapper #Top_bar #menu > ul > li.current-menu-item > a,
#Header_wrapper #Top_bar #menu > ul > li.current_page_item > a,
#Header_wrapper #Top_bar #menu > ul > li.hover > a{
  color:var(--t-red) !important;
}
/* dropdowns keep a readable dark panel rather than inheriting the bar */
#Header_wrapper #Top_bar #menu ul li ul{ background-color:#111 !important; }
#Header_wrapper #Top_bar #menu ul li ul li a{ color:rgba(255,255,255,.88) !important; }
#Header_wrapper #Top_bar #menu ul li ul li a:hover{ color:var(--t-red) !important; }
/* the hamburger and any icon in the bar */
#Header_wrapper #Top_bar a.responsive-menu-toggle,
#Header_wrapper #Top_bar a.responsive-menu-toggle i,
#Header_wrapper #Top_bar .top_bar_right i{ color:#fff !important; }

/* ---------- 10. Lightbox controls ----------
   THIS SITE RUNS TWO LIGHTBOXES: FooBox (.fbx-*) and the theme's Magnific
   Popup (.mfp-*). Both render their own prev/next/close, and the theme styles
   every <button> `background-color:#ff0000 !important`, so all of them came out
   as plain red blocks with no icon - 400x44 across the top (.mfp-close),
   90x110 ovals at both viewport edges (.mfp-arrow), 106x126 inside the frame
   (.fbx-prev/next) and a 94x40 red pill (.fbx-open-caption). Broken before this
   revamp: measured identical on the untouched build.

   Three rules this block obeys, each learned by breaking it first:
   - do not set `position`: both libraries place their own buttons, and forcing
     position:relative moved the close button into the middle of the photo;
   - do not fight for `background-color`: an !important in the theme/plugin
     stack wins and does not even show up when matching rules are enumerated.
     The circle and the glyph are two layered background-images, which paint
     above background-color;
   - check the WHOLE viewport. The first pass fixed only .fbx-* because the
     verification screenshot was clipped to the middle of the screen, and the
     .mfp-* controls at x=0 and x=1350 were outside the crop. */
.fbx-prev, .fbx-next, .fbx-close, .fbx-open-caption,
.mfp-close, .mfp-arrow, .mfp-arrow-left, .mfp-arrow-right{
  box-sizing:border-box !important;
  padding:0 !important; margin:0 !important; min-width:0 !important;
  width:46px !important; height:46px !important; line-height:46px !important;
  border:0 !important; border-radius:50% !important;
  background-color:transparent !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:center, center !important;
  background-size:19px 19px, cover !important;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  color:transparent !important; font-size:0 !important; text-indent:-9999px;
  opacity:1 !important; cursor:pointer;
  transition:background-image .2s ease, transform .2s ease;
}
/* Magnific's arrows sit hard against the viewport edge; give them room. */
.mfp-arrow-left{ left:18px !important; }
.mfp-arrow-right{ right:18px !important; left:auto !important; }
.mfp-close{ right:14px !important; top:14px !important; }
/* Magnific draws its arrows with :before/:after borders - remove those. */
.mfp-arrow::before, .mfp-arrow::after,
.mfp-arrow .mfp-a, .mfp-arrow .mfp-b{
  display:none !important; content:none !important;
}
.fbx-prev, .mfp-arrow-left{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.4 4.6 8 12l7.4 7.4' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"), linear-gradient(#14181c,#14181c) !important; }
.fbx-prev:hover, .mfp-arrow-left:hover{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.4 4.6 8 12l7.4 7.4' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"), linear-gradient(#e11b22,#e11b22) !important; }
.fbx-next, .mfp-arrow-right{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.6 4.6 16 12l-7.4 7.4' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"), linear-gradient(#14181c,#14181c) !important; }
.fbx-next:hover, .mfp-arrow-right:hover{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.6 4.6 16 12l-7.4 7.4' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"), linear-gradient(#e11b22,#e11b22) !important; }
.fbx-close, .mfp-close, .fbx-open-caption{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 5l14 14M19 5L5 19' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'/></svg>"), linear-gradient(#14181c,#14181c) !important; }
.fbx-close:hover, .mfp-close:hover, .fbx-open-caption:hover{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 5l14 14M19 5L5 19' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'/></svg>"), linear-gradient(#e11b22,#e11b22) !important; }
.fbx-prev:hover,.fbx-next:hover,.fbx-close:hover,.fbx-open-caption:hover,
.mfp-close:hover,.mfp-arrow:hover{ transform:scale(1.06); }
.fbx-prev:focus-visible,.fbx-next:focus-visible,.fbx-close:focus-visible,
.mfp-close:focus-visible,.mfp-arrow:focus-visible{ outline:3px solid #fff !important; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .fbx-prev,.fbx-next,.fbx-close,.fbx-open-caption,.mfp-close,.mfp-arrow{ transition:none; }
  .fbx-prev:hover,.fbx-next:hover,.fbx-close:hover,.mfp-close:hover,.mfp-arrow:hover{ transform:none; }
}

/* Both lightboxes fire on one click: FooBox shows the image, and Magnific
   Popup opens the SAME image in a wrapper that never becomes visible - but its
   three buttons escape onto the screen anyway, as controls for an invisible
   popup. Measured: .mfp-wrap present with the same file, offsetParent null,
   yet .mfp-close and both .mfp-arrow visible. They are hidden only while a
   FooBox modal is on screen, so a gallery that uses Magnific on its own keeps
   working. */
body:has(.fbx-modal) .mfp-close,
body:has(.fbx-modal) .mfp-arrow,
body:has(.fbx-modal) .mfp-arrow-left,
body:has(.fbx-modal) .mfp-arrow-right{ display:none !important; }