/* ==================================================================
   YoYo Tattoo Pattaya — theme "Dark" · black + logo blue (index-690926.php)
   ------------------------------------------------------------------
   Colours only — layout lives in theme-690926-base.css (always loaded).
   Switchable: the page's theme button toggles this file on/off.
   The base palette tokens are re-pointed (light → dark, gold → blue).

   Logo blue:  ice #d6f4fc · light #62d2f0 · main #1a9fcc · deep #0b6388
   ================================================================== */

:root {
    /* Blue, taken from the logo lettering */
    --c-blue-ice: #d6f4fc;
    --c-blue-lt:  #62d2f0;
    --c-blue:     #1a9fcc;
    --c-blue-dk:  #0b6388;
    --c-blue-glow: rgba(26, 159, 204, .35);

    /* Palette re-pointed: the site becomes black, accents become blue */
    --c-ink:      #040506;     /* text on light buttons, deepest black */
    --c-dark:     #06080a;     /* "dark" sections */
    --c-dark-2:   #10161b;
    --c-white:    #0a0d10;     /* page background (was white) */
    --c-gray:     #0e1317;     /* raised surfaces / alt sections (was light grey) */
    --c-gray-2:   #1b242b;
    --c-text:     #e7eef2;
    --c-muted:    #8f9ca5;
    --c-soft:     #4d6877;
    --c-line:     rgba(255, 255, 255, .09);
    --c-line-dk:  rgba(255, 255, 255, .12);
    --c-gold:     var(--c-blue);      /* every former gold accent → blue */
    --c-gold-lt:  var(--c-blue-lt);
    --c-accent:   var(--c-blue-lt);   /* accent text (numbers, roles, links) */
    --c-heading:  #fff;               /* strongest text */
    --shadow:     0 24px 60px -30px rgba(0, 0, 0, .85);
}

body { background: var(--c-white); color: var(--c-text); }
::selection { background: var(--c-blue); color: #fff; }

/* Sections: black, with a faint blue light in a corner here and there */
.section--dark { background: var(--c-dark); color: var(--c-text); }
.section--gray { background: var(--c-gray); }
.about::before, .pf::before, .contact::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 50% at 0% 0%, rgba(26, 159, 204, .10), transparent 70%);
}
.pf::before { background: radial-gradient(55% 60% at 100% 10%, rgba(26, 159, 204, .12), transparent 70%); }
.contact::before { background: radial-gradient(50% 45% at 100% 100%, rgba(26, 159, 204, .10), transparent 70%); }
.section > .container-xl { position: relative; }

/* Headlines: second tone in blue */
.display-title em, .section--dark .display-title em { color: var(--c-blue-lt); }
.eyebrow, .section--dark .eyebrow { color: var(--c-blue-lt); }
.section-head__lead, .section--dark .section-head__lead { color: var(--c-muted); }

/* Buttons */
.btn--dark { background: linear-gradient(135deg, var(--c-blue), var(--c-blue-dk)); color: #fff; }
.btn--dark:hover { background: linear-gradient(135deg, var(--c-blue-lt), var(--c-blue)); color: #fff; }
.btn--light:hover { background: var(--c-blue-lt); color: var(--c-ink); }
.round-btn { border-color: var(--c-line-dk); color: #fff; }
.round-btn:hover, .section--dark .round-btn:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.link-arrow { color: var(--c-text); }
.link-arrow:hover { color: var(--c-blue-lt); }

/* ---- Header on dark ---------------------------------------------- */
.site-header.is-on-dark.is-scrolled { background: rgba(6, 8, 10, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.is-on-dark .btn--header { background: linear-gradient(135deg, var(--c-blue), var(--c-blue-dk)); color: #fff; }
.is-on-dark .btn--header:hover { background: var(--c-blue-lt); color: var(--c-ink); }
.main-nav__link::after { background: var(--c-blue-lt); }

/* Preloader + footer */
.preloader { background: #030405; }
.preloader__bar span { background: linear-gradient(90deg, var(--c-blue-dk), var(--c-blue-lt)); }
.scroll-progress span { background: linear-gradient(90deg, var(--c-blue-dk), var(--c-blue-lt)); }
.site-footer { background: #030405; }
.back-top:hover, .social-row__item:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }

/* ---- Ticker ------------------------------------------------------ */
.ticker { background: #050709; border-block: 1px solid var(--c-line); }
.ticker__item { color: #fff; }
.ticker__item:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1.2px var(--c-blue-lt); }
.ticker__dot { background: var(--c-blue); }

/* ---- About ------------------------------------------------------- */
.about__caption { background: rgba(6, 8, 10, .85); color: var(--c-blue-ice); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---- Process (no durations) -------------------------------------- */
.steps__dot { background: var(--c-white); border-color: var(--c-gray-2); }
.steps__item.is-active .steps__dot { background: var(--c-blue); border-color: var(--c-blue); box-shadow: 0 0 0 6px rgba(26, 159, 204, .18); }
.steps__item.is-active .steps__num { color: var(--c-blue-lt); }
.steps__fill { background: linear-gradient(180deg, var(--c-blue-lt), var(--c-blue-dk)); }

/* ---- Contact ----------------------------------------------------- */
.studio { background: var(--c-gray); }
.studio.is-active { box-shadow: 0 16px 40px -24px var(--c-blue-glow); }
.channel { background: var(--c-gray); }
.channel--call { --brand: var(--c-blue); }
.booking { background: var(--c-gray); }
.field__input { background: #080b0e; color: var(--c-text); }
.field__input:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(26, 159, 204, .2); }
.field__label { color: var(--c-muted); }
.check input:checked + .check__box { background: var(--c-blue); border-color: var(--c-blue); }
.map iframe, .map:hover iframe { filter: invert(.92) hue-rotate(180deg) grayscale(.55) contrast(.95); }
.map__card { background: rgba(8, 11, 14, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--c-text); }
.map__tab { background: transparent; color: var(--c-text); }
.map__tab.is-active, .map__tab:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }