/* ==========================================================================
   TattooClub — Aide & FAQ.
   Layout = Elementor containers/widgets on page 53. This file: which
   containers each view shows, and the server-rendered FAQ parts (search,
   category grid, sidebar, accordion, results, answer, contact channels).
   Tokens: ink #111111, off-white #F9F5EF, line #E8E4DC, muted #68645E,
   electric green #B7E41C (text-safe green #4F7A00).
   ========================================================================== */
body.tc-faq-page { --faq-ink: #111111; --faq-muted: #68645E; --faq-line: #E8E4DC; --faq-cream: #F9F5EF; --faq-green: #B7E41C; --faq-green-d: #4F7A00; --faq-green-soft: #F1F8D9; }

/* ------------------------------------------------ views */
body.tc-faq-page:not(.tc-faq-view-home) .tc-faq-home-only,
body.tc-faq-view-home .tc-faq-inner-only { display: none !important; }
body.tc-faq-view-search .tc-faq-sidebar,
body.tc-faq-view-noresults .tc-faq-sidebar { display: none !important; }
.tc-faq-sc, .tc-faq-sc .elementor-shortcode, .tc-faq-part { width: 100%; }
.tc-faq-part ul, .tc-faq-part ol { list-style: none; margin: 0; padding: 0; }
.tc-faq-part li { list-style: none; margin: 0; }
.tc-faq-part li::marker { content: none; }
.tc-faq-mark { color: var(--faq-ink); background: linear-gradient(transparent 72%, var(--faq-green) 72%, var(--faq-green) 90%, transparent 90%); }
.tc-faq-hero__img img { width: 100%; height: 100%; max-height: 340px; object-fit: cover; }
.tc-faq-hero__media > .elementor-widget, .tc-faq-hero__img .elementor-widget-container { height: 100%; }

/* ------------------------------------------------ breadcrumb */
.tc-faq-crumbs ol { display: flex !important; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--faq-muted); }
.tc-faq-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--faq-muted); }
.tc-faq-crumbs a { color: var(--faq-muted); text-decoration: none; }
.tc-faq-crumbs a:hover { color: var(--faq-ink); text-decoration: underline; }
.tc-faq-crumbs [aria-current] { color: var(--faq-ink); font-weight: 600; }

/* ------------------------------------------------ search */
.tc-faq-search { position: relative; display: flex; align-items: center; gap: 0; background: #fff; border: 1.5px solid var(--faq-line); border-radius: 12px; padding: 6px 6px 6px 14px; transition: border-color .15s, box-shadow .15s; max-width: 760px; }
.tc-faq-search:focus-within { border-color: var(--faq-ink); box-shadow: 0 0 0 3px rgba(183,228,28,.45); }
.tc-faq-search__ico { color: var(--faq-muted); font-size: 15px; margin-right: 10px; }
.tc-faq-search__input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; font-size: 15px; color: var(--faq-ink); padding: 10px 4px !important; box-shadow: none !important; height: auto !important; }
.tc-faq-search__input::-webkit-search-cancel-button { cursor: pointer; }
.tc-faq-search__btn { flex: 0 0 auto; width: 46px; height: 46px; border: 0; border-radius: 9px; background: var(--faq-ink); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tc-faq-search__btn:hover { background: var(--faq-green); color: var(--faq-ink); }
.tc-faq-search__btn:focus-visible { outline: 2px solid var(--faq-ink); outline-offset: 2px; }
.tc-faq-search__sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; border: 1px solid var(--faq-line); border-radius: 12px; box-shadow: 0 14px 34px rgba(17,17,17,.12); padding: 6px !important; max-height: 340px; overflow: auto; }
.tc-faq-search__sugg li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--faq-ink); }
.tc-faq-search__sugg li small { color: var(--faq-muted); white-space: nowrap; }
.tc-faq-search__sugg li:hover, .tc-faq-search__sugg li.is-active { background: var(--faq-green-soft); }
.tc-faq-search__sugg li.is-all { font-weight: 700; border-top: 1px solid var(--faq-line); border-radius: 0 0 8px 8px; margin-top: 4px; }
.tc-faq-search-inline { margin: 0 0 18px; }
body:not(.tc-faq-view-search):not(.tc-faq-view-noresults) .tc-faq-search-inline { display: none; }
@media (min-width: 768px) { .tc-faq-view-search .tc-faq-search-inline { display: none; } }

/* ------------------------------------------------ category grid (home) */
.tc-faq-cats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tc-faq-cat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 128px; padding: 20px 14px; background: #fff; border: 1px solid var(--faq-line); border-radius: 16px; color: var(--faq-ink) !important; text-decoration: none !important; transition: border-color .15s, transform .15s, box-shadow .15s; }
.tc-faq-cat:hover { border-color: var(--faq-ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17,17,17,.08); }
.tc-faq-cat:focus-visible { outline: 2px solid var(--faq-ink); outline-offset: 2px; }
.tc-faq-cat__ico { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: var(--faq-green-soft); color: var(--faq-ink); transition: background .15s; }
.tc-faq-cat:hover .tc-faq-cat__ico { background: var(--faq-green); }
.tc-faq-cat__name { font-weight: 700; font-size: 15px; }
.tc-faq-cat__count { font-size: 13px; color: var(--faq-muted); }

/* ------------------------------------------------ sidebar */
.tc-faq-sidebar { position: sticky; top: 110px; }
/* Elementor gives the grow column width:100% + no-shrink: force a fixed nav + fluid main */
.tc-faq-layout > .tc-faq-sidebar { flex: 0 0 270px !important; width: 270px !important; max-width: 270px; }
.tc-faq-layout > .tc-faq-main { flex: 1 1 0% !important; width: auto !important; min-width: 0; }
.tc-faq-nav ul { display: flex !important; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--faq-line); border-radius: 16px; padding: 8px !important; }
.tc-faq-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--faq-ink) !important; text-decoration: none !important; font-size: 14px; font-weight: 500; }
.tc-faq-nav a i { width: 20px; text-align: center; color: var(--faq-ink); }
.tc-faq-nav a:hover { background: var(--faq-cream); }
.tc-faq-nav a.is-active { background: var(--faq-green); font-weight: 700; }
.tc-faq-nav a:focus-visible { outline: 2px solid var(--faq-ink); outline-offset: -2px; }
.tc-faq-main { min-width: 0; }
.tc-faq-main .tc-loading-overlay { border-radius: 16px; }

/* ------------------------------------------------ heads */
.tc-faq-head { display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; }
.tc-faq-head__ico { width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; background: var(--faq-green); color: var(--faq-ink); margin-bottom: 6px; }
.tc-faq-head__title, .tc-faq-article__title, .tc-faq-empty__title { font-family: "Archivo Black", sans-serif; font-weight: 900; color: var(--faq-ink); line-height: 1.08; letter-spacing: -.02em; margin: 0; }
.tc-faq-head__title { font-size: 40px; }
.tc-faq-head__title:focus, .tc-faq-article__title:focus, .tc-faq-empty__title:focus { outline: none !important; box-shadow: none !important; }
.tc-faq-head__intro { margin: 0; color: var(--faq-muted); font-size: 15px; max-width: 560px; }
.tc-faq-head__count { margin: 0; font-size: 13px; font-weight: 700; color: var(--faq-ink); }
.tc-faq-kicker { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faq-ink); }
.tc-faq-head--search .tc-faq-head__title { font-size: 48px; }

/* ------------------------------------------------ accordion */
.tc-faq-list { display: flex; flex-direction: column; gap: 10px; }
.tc-faq-item { background: #fff; border: 1px solid var(--faq-line); border-radius: 14px; transition: border-color .15s, box-shadow .15s; }
.tc-faq-item.is-open { border-color: var(--faq-ink); box-shadow: 0 8px 22px rgba(17,17,17,.06); }
.tc-faq-item__h { margin: 0 !important; font-size: inherit !important; line-height: inherit !important; }
.tc-faq-item__btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px; min-height: 56px; background: transparent !important; border: 0 !important; color: var(--faq-ink) !important; text-align: left; cursor: pointer; font: inherit; border-radius: 14px; }
.tc-faq-item__btn:focus-visible { outline: 2px solid var(--faq-ink); outline-offset: -2px; }
.tc-faq-item__q { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.tc-faq-item__icon { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; transition: background .15s, transform .2s; }
.tc-faq-item__icon::before, .tc-faq-item__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--faq-ink); transform: translate(-50%, -50%); border-radius: 2px; transition: transform .2s; }
.tc-faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.tc-faq-item.is-open .tc-faq-item__icon { background: var(--faq-green); }
.tc-faq-item.is-open .tc-faq-item__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.tc-faq-item__panel { overflow: hidden; transition: height .25s ease; }
.tc-faq-item__inner { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.tc-faq-answer { font-size: 15px; line-height: 1.65; color: #3C3A36; }
.tc-faq-answer p { margin: 0 0 10px; }
.tc-faq-answer p:last-child { margin-bottom: 0; }
.tc-faq-answer a { color: var(--faq-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--faq-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tc-faq-item__link { font-size: 12px; color: var(--faq-muted) !important; align-self: flex-start; }
.tc-faq-badge { flex: 0 0 auto; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--faq-green-d); background: var(--faq-green-soft); border-radius: 6px; padding: 4px 9px; white-space: nowrap; text-decoration: none !important; }
.tc-faq-list--results .tc-faq-item:nth-child(n) .tc-faq-badge { margin-left: auto; }

/* ------------------------------------------------ helpful */
.tc-faq-helpful { border-top: 1px solid var(--faq-line); padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tc-faq-helpful__q { margin: 0; font-size: 14px; font-weight: 700; color: var(--faq-ink); }
.tc-faq-helpful__btns { display: flex; gap: 8px; }
.tc-faq-helpful__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; background: #fff; border: 1px solid var(--faq-line); border-radius: 999px; font: 600 14px/1 inherit; color: var(--faq-ink); cursor: pointer; }
.tc-faq-helpful__btn:hover:not([disabled]) { border-color: var(--faq-ink); }
.tc-faq-helpful__btn.is-selected { background: var(--faq-green); border-color: var(--faq-green); }
.tc-faq-helpful__btn[disabled]:not(.is-selected) { opacity: .45; cursor: default; }
.tc-faq-helpful__btn:focus-visible { outline: 2px solid var(--faq-ink); outline-offset: 2px; }
.tc-faq-helpful__done { margin: 0; width: 100%; font-size: 13px; color: var(--faq-green-d); font-weight: 600; }

/* ------------------------------------------------ open answer (question view) */
.tc-faq-article { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--faq-line); border-radius: 18px; padding: 26px; }
.tc-faq-article__title { font-size: 34px; }
.tc-faq-badge--link { align-self: flex-start; }
.tc-faq-callout { display: flex; align-items: center; gap: 14px; background: var(--faq-green-soft); border: 1px solid #D9EFA0; border-radius: 14px; padding: 16px 18px; }
.tc-faq-callout i { font-size: 24px; color: var(--faq-ink); }
.tc-faq-callout p { margin: 0; font-weight: 800; color: var(--faq-ink); font-size: 16px; }
.tc-faq-related { margin-top: 22px; }
.tc-faq-related__title { font-size: 18px !important; font-weight: 800; margin: 0 0 10px !important; color: var(--faq-ink); }
.tc-faq-related ul { display: flex !important; flex-direction: column; gap: 8px; }
.tc-faq-related a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; background: #fff; border: 1px solid var(--faq-line); border-radius: 12px; color: var(--faq-ink) !important; text-decoration: none !important; font-size: 15px; font-weight: 600; }
.tc-faq-related a:hover { border-color: var(--faq-ink); }
.tc-faq-related a i { font-size: 12px; color: var(--faq-muted); }

/* ------------------------------------------------ no results */
.tc-faq-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 20px; background: #fff; border: 1px solid var(--faq-line); border-radius: 18px; }
.tc-faq-empty__ico { position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--faq-cream); display: inline-flex; align-items: center; justify-content: center; font-size: 40px; color: var(--faq-ink); margin-bottom: 6px; }
.tc-faq-empty__x { position: absolute; right: 16px; bottom: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--faq-green); font-size: 14px !important; display: inline-flex !important; align-items: center; justify-content: center; }
.tc-faq-empty__title { font-size: 30px; }
.tc-faq-empty__text { margin: 0; color: var(--faq-muted); max-width: 420px; font-size: 15px; }
.tc-faq-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; background: var(--faq-green); color: var(--faq-ink) !important; border-radius: 10px; font-weight: 700; text-decoration: none !important; margin-top: 6px; }
.tc-faq-cta:hover { background: #A5CD19; }
.tc-faq-cta:focus-visible { outline: 2px solid var(--faq-ink); outline-offset: 2px; }

/* ------------------------------------------------ help CTA + contact */
.tc-faq-cta-btn .elementor-button { white-space: nowrap; }
@media (min-width: 768px) {
	.tc-faq-helpcta > .tc-faq-cta-btn { flex-shrink: 0 !important; width: auto !important; }
	.tc-faq-helpcta > .e-con { flex: 1 1 0% !important; min-width: 0; }
}
.tc-faq-contact { display: flex !important; flex-direction: column; gap: 10px; }
.tc-faq-contact a, .tc-faq-contact li > div { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--faq-line); border-radius: 14px; color: var(--faq-ink) !important; text-decoration: none !important; }
.tc-faq-contact a:hover { border-color: var(--faq-ink); }
.tc-faq-contact__ico { width: 40px; height: 40px; border-radius: 50%; background: var(--faq-green-soft); display: inline-flex !important; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 40px; }
.tc-faq-contact span span { display: block; color: var(--faq-muted); font-size: 13px; margin-top: 2px; word-break: break-word; }
.tc-faq-contact strong { font-size: 14px; }
.tc-faq-contact-form .solaceform-form-button { min-height: 48px; }
.tc-faq-contact-form label { font-weight: 600; }

/* ------------------------------------------------ responsive */
@media (max-width: 1024px) {
	.tc-faq-layout > .tc-faq-sidebar { flex-basis: 230px !important; width: 230px !important; max-width: 230px; }
	.tc-faq-head__title { font-size: 34px; }
}
@media (max-width: 767px) {
	/* Mobile is its own layout: no sidebar, compact grid, full-width answers */
	.tc-faq-sidebar { display: none !important; }
	.tc-faq-layout { flex-direction: column !important; }
	.tc-faq-layout > .tc-faq-main { flex: 0 0 auto !important; width: 100% !important; }
	.tc-faq-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.tc-faq-cat { min-height: 92px; padding: 12px 6px; gap: 6px; border-radius: 12px; }
	.tc-faq-cat__ico { width: 38px; height: 38px; font-size: 18px; background: transparent; }
	.tc-faq-cat__name { font-size: 12px; line-height: 1.2; }
	.tc-faq-cat__count { display: none; }
	.tc-faq-head__ico { width: 48px; height: 48px; font-size: 22px; background: transparent; margin: 0; justify-content: flex-start; }
	.tc-faq-head__title { font-size: 28px; }
	.tc-faq-head--search .tc-faq-head__title { font-size: 30px; }
	.tc-faq-head--search .tc-faq-kicker { display: none; }
	.tc-faq-head__intro { display: none; }
	.tc-faq-item__btn { padding: 14px; min-height: 52px; flex-wrap: wrap; }
	.tc-faq-item__q { font-size: 14px; flex-basis: calc(100% - 44px); }
	.tc-faq-list--results .tc-faq-badge { order: 3; margin-left: 0 !important; }
	.tc-faq-list--results .tc-faq-item__icon { order: 2; }
	.tc-faq-item__inner { padding: 0 14px 14px; }
	.tc-faq-article { padding: 0; border: 0; background: transparent; }
	.tc-faq-article__title { font-size: 26px; }
	.tc-faq-empty { padding: 28px 16px; border: 0; background: transparent; }
	.tc-faq-empty__title { font-size: 24px; }
	.tc-faq-cta { width: 100%; justify-content: center; }
	.tc-faq-helpful__btns { width: 100%; }
	.tc-faq-helpful__btn { flex: 1; justify-content: center; }
	.tc-faq-search { padding: 4px 4px 4px 12px; }
	.tc-faq-search__btn { width: 42px; height: 42px; }
}
@media (max-width: 359px) {
	.tc-faq-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.tc-faq-item__panel, .tc-faq-cat, .tc-faq-item__icon, .tc-faq-item__icon::after { transition: none; }
}


/* last category alone on its row → full width (2026-10-04) */
@media (min-width: 360px) { .tc-faq-cats > :last-child:nth-child(3n+1) { grid-column: 1 / -1; } }
@media (max-width: 359px) { .tc-faq-cats > :last-child:nth-child(2n+1) { grid-column: 1 / -1; } }