/* Tissel Canvas: every page other than the home. The parent's components stay
   (its style.css loads underneath); this dresses them for the canvas: the dot
   grid, Manrope and JetBrains Mono, light artboards instead of dark photo
   heroes, and the blue selection colour for the main action. */

/* the parent's own tokens, beaten in specificity over its inline Customizer colours.
   They follow the canvas palette, so the light, half-dark and dark looks reach the
   parent's components too; the artboards re-read them, since in the half-dark look
   they keep the light palette (chrome.css). */
body.tsl-canvas--page,
[data-mode="dim"] body.tsl-canvas--page :is(#hero.page-hero, .tools-hero, .page-content:not(.elementor-built), #contact, .card, .pack, .faq-item, .path-card, .service, .work-card, .cat-card) {
  --gold: var(--ink); --gold2: var(--ink-2); --cyan: var(--blue-ink); --violet: var(--ink-3);
  --text: var(--ink); --muted: var(--ink-2);
  --bg: var(--well); --bg2: var(--canvas); --card: var(--frame); --card2: var(--well);
  --c-info: var(--blue-ink); --c-info-bg: var(--blue-tint); --c-info-line: var(--blue-line);
  --c-success: var(--ok-ink); --c-success-bg: var(--ok-bg); --c-success-line: color-mix(in srgb, var(--ok-ink) 30%, var(--frame));
  --c-danger: var(--red-ink); --c-danger-bg: var(--bad-bg); --c-danger-line: color-mix(in srgb, var(--red-ink) 30%, var(--frame));
}
body.tsl-canvas--page {
  padding: var(--chrome) 0 var(--sb) var(--rule) !important;
  line-height: 1.6;
}
body.tsl-canvas--page main { position: relative; z-index: 1; }
body.tsl-canvas--page ::-webkit-scrollbar-thumb { background: var(--ctl-off); }

/* -------------------------------------------------------------- type -- */
body.tsl-canvas--page h1, body.tsl-canvas--page h2, body.tsl-canvas--page h3, body.tsl-canvas--page h4 { font-family: var(--sans); letter-spacing: -0.03em; }
body.tsl-canvas--page .sec-title { font-weight: 800; letter-spacing: -0.04em; line-height: 1.06; }
body.tsl-canvas--page .sec-label,
body.tsl-canvas--page .eyebrow { font: 500 12px/1.2 var(--mono) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink-2) !important; }
body.tsl-canvas--page .sec-label::before,
body.tsl-canvas--page .eyebrow::before { content: none !important; }
body.tsl-canvas--page .shine { color: var(--blue-ink) !important; -webkit-text-fill-color: var(--blue-ink) !important; background: none !important; }
body.tsl-canvas--page .sec-sub { color: var(--ink-2); }
body.tsl-canvas--page .page-content a, body.tsl-canvas--page .sec-sub a { color: var(--blue-ink) !important; }

/* ------------------------------------------------------------ buttons -- */
body.tsl-canvas--page .btn { font-family: var(--sans) !important; font-weight: 700; border-radius: 10px !important; letter-spacing: 0; transform: none; }
body.tsl-canvas--page .btn-gold,
body.tsl-canvas--page .cp-btn-gold { background: var(--blue) !important; border: 1px solid var(--blue) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 0 1px 1px rgba(18, 18, 20, 0.12), 0 8px 18px -8px rgba(37, 99, 235, 0.65) !important; }
body.tsl-canvas--page .btn-gold:hover,
body.tsl-canvas--page .cp-btn-gold:hover { background: var(--blue-2) !important; border-color: var(--blue-2) !important; transform: none !important; filter: none !important; }
body.tsl-canvas--page .btn-ghost { background: var(--frame) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
body.tsl-canvas--page .btn-ghost:hover { border-color: var(--ink-3) !important; color: var(--ink) !important; transform: none !important; }
body.tsl-canvas--page .btn:active { transform: scale(0.97) !important; }

/* ----------------------------------------------- page heads: artboards -- */
/* The dark photo heroes become light artboards on the canvas. */
body.tsl-canvas--page #hero.page-hero,
body.tsl-canvas--page .tools-hero {
  min-height: 0 !important;
  margin: 40px var(--gut) 0;
  padding: clamp(36px, 5vw, 64px) clamp(22px, 5vw, 64px) clamp(32px, 4vw, 52px) !important;
  background: var(--frame) !important; background-image: none !important;
  border: 1px solid var(--line) !important; border-radius: 8px;
  box-shadow: var(--sh-2);
  overflow: visible; isolation: auto;
}
body.tsl-canvas--page #hero.page-hero::after,
body.tsl-canvas--page .tools-hero::after { content: none !important; }
body.tsl-canvas--page #hero.page-hero h1,
body.tsl-canvas--page .tools-hero h1 { color: var(--ink) !important; text-shadow: none !important; font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; }
body.tsl-canvas--page #hero.page-hero p,
body.tsl-canvas--page .tools-hero p { color: var(--ink-2) !important; }
body.tsl-canvas--page #hero.page-hero .sec-label,
body.tsl-canvas--page .tools-hero .sec-label,
body.tsl-canvas--page #hero.page-hero .hero-badge,
body.tsl-canvas--page .tools-hero .hero-badge { color: var(--ink-2) !important; background: none !important; border: 0 !important; padding: 0 !important; }
body.tsl-canvas--page #hero.page-hero .btn-ghost,
body.tsl-canvas--page .tools-hero .btn-ghost { color: var(--ink) !important; border-color: var(--line) !important; background: var(--frame) !important; }
body.tsl-canvas--page .tools-jump a { border-color: var(--line) !important; background: var(--well) !important; color: var(--ink) !important; }
body.tsl-canvas--page .tools-jump a:hover { border-color: var(--blue) !important; color: var(--blue-ink) !important; }
body.tsl-canvas--page .hero-glow, body.tsl-canvas--page .ambient-blob, body.tsl-canvas--page #particles { display: none !important; }

/* --------------------------------------------------- cards as frames -- */
body.tsl-canvas--page .card,
body.tsl-canvas--page .pack,
body.tsl-canvas--page .faq-item,
body.tsl-canvas--page .path-card,
body.tsl-canvas--page .service,
body.tsl-canvas--page .work-card,
body.tsl-canvas--page .cat-card { border-color: var(--line) !important; box-shadow: var(--sh-1); }

/* the wizard and other pages keep working inside an embed: no chrome, no offsets */
body.tsl-embed.tsl-canvas--page { padding: 0 !important; background: var(--frame); }

@media (max-width: 860px) {
  body.tsl-canvas--page #hero.page-hero,
  body.tsl-canvas--page .tools-hero { margin: 16px 12px 0; }
}

/* -------------------------------------------- titles: the blue selection -- */
body.tsl-canvas--page #hero.page-hero h1 .shine,
body.tsl-canvas--page .tools-hero h1 .shine,
body.tsl-canvas--page .hero-inner h1 .shine { color: var(--blue-ink) !important; -webkit-text-fill-color: var(--blue-ink) !important; text-decoration-color: var(--blue-tint) !important; text-shadow: none !important; }
body.tsl-canvas--page .tslul::after { background: var(--blue) !important; height: 3px !important; bottom: -0.1em !important; border-radius: 1px !important; }

/* chosen tabs and options: blue, the selection colour, instead of navy */
body.tsl-canvas--page .ip-chip.on, body.tsl-canvas--page .packs-tab.active, body.tsl-canvas--page .pl-tab.active,
body.tsl-canvas--page .dev.on, body.tsl-canvas--page .ip-dev.on, body.tsl-canvas--page .segb[aria-pressed=true],
body.tsl-canvas--page .calc-opt.active, body.tsl-canvas--page .wiz-dot.active, body.tsl-canvas--page .dm-tab.active,
body.tsl-canvas--page #tsl-tabbar .tsl-tab.active { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
body.tsl-canvas--page .pack.featured { border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-tint), var(--sh-2) !important; }

/* ---------------------------------- the contact section: a light artboard -- */
body.tsl-canvas--page #contact { background: var(--frame) !important; color: var(--ink) !important; margin: 40px var(--gut); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--sh-2); }
body.tsl-canvas--page #contact h2, body.tsl-canvas--page #contact h3 { color: var(--ink) !important; }
body.tsl-canvas--page #contact h2 span, body.tsl-canvas--page #contact a { color: var(--blue-ink) !important; }
body.tsl-canvas--page #contact p, body.tsl-canvas--page #contact li, body.tsl-canvas--page #contact label { color: var(--ink-2) !important; }
body.tsl-canvas--page #contact .sec-label { color: var(--ink-2) !important; }
body.tsl-canvas--page #contact .c-item { background: var(--well) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
body.tsl-canvas--page #contact .c-item:hover { border-color: var(--blue) !important; background: var(--blue-tint) !important; }
body.tsl-canvas--page #contact .c-item .tt { color: var(--ink-3) !important; font-family: var(--mono); font-size: 11px; }
body.tsl-canvas--page #contact .c-item .vv { color: var(--ink) !important; }
body.tsl-canvas--page #contact input, body.tsl-canvas--page #contact textarea, body.tsl-canvas--page #contact select, body.tsl-canvas--page #contact .field-input { background: var(--field) !important; color: var(--ink) !important; border: 1px solid var(--field-line) !important; border-radius: 8px !important; }
body.tsl-canvas--page #contact input:focus, body.tsl-canvas--page #contact textarea:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-tint) !important; outline: none !important; }
body.tsl-canvas--page #contact .wpforms-field-label, body.tsl-canvas--page #contact .wpforms-field-sublabel { color: var(--ink) !important; font-family: var(--sans) !important; font-weight: 700 !important; }
body.tsl-canvas--page #contact .wpforms-required-label { color: var(--blue-ink) !important; }
body.tsl-canvas--page #contact .wpforms-field-description { color: var(--ink-2) !important; }
body.tsl-canvas--page #contact .wpforms-container { --wpforms-label-color: var(--ink); --wpforms-field-background-color: var(--field); --wpforms-field-border-color: var(--field-line); --wpforms-button-background-color: var(--blue); --wpforms-button-text-color: #fff; }
body.tsl-canvas--page #contact .btn-gold, body.tsl-canvas--page #contact .wpforms-submit, body.tsl-canvas--page #contact button[type=submit] { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; border-radius: 10px !important; font-family: var(--sans) !important; font-weight: 700 !important; }

/* ------------------------------------- Ξεκίνα: the quote, like the inspector -- */
body.tsl-canvas--page .wiz-quote { background: var(--frame) !important; color: var(--ink) !important; border: 1.5px solid var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); border-radius: 10px !important; }
body.tsl-canvas--page .wq-price { color: var(--ink); font-family: var(--sans) !important; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
body.tsl-canvas--page .wq-pkg { color: var(--ink); }
body.tsl-canvas--page .wq-scope, body.tsl-canvas--page .wq-fine { color: var(--ink-2) !important; }
body.tsl-canvas--page .wq-change { color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; background: var(--frame) !important; }
body.tsl-canvas--page .wq-change:hover { border-color: var(--blue) !important; color: var(--blue-ink) !important; }
body.tsl-canvas--page .wq-opt span, body.tsl-canvas--page .wq-pages input, body.tsl-canvas--page .wiz-step input, body.tsl-canvas--page .wiz-step textarea, body.tsl-canvas--page .wiz-step select { border-radius: 8px !important; }

/* ------------------------------------- Εργαλεία: the payback answer, light -- */
body.tsl-canvas--page .pay-out { background: var(--blue-tint) !important; color: var(--ink) !important; border: 1px solid var(--blue-line); border-radius: 10px; }
body.tsl-canvas--page .pay-out-lbl { color: var(--ink-2) !important; font-family: var(--mono); letter-spacing: 0.02em; }
body.tsl-canvas--page .pay-big { color: var(--blue-ink) !important; font-family: var(--sans) !important; letter-spacing: -0.05em; }
body.tsl-canvas--page .pay-out p, body.tsl-canvas--page .pay-out span:not(.pay-big *) { color: var(--ink-2); }

/* ------------------------------------------- plain pages (legal, guides) -- */
body.tsl-canvas--page .page-content:not(.elementor-built) { max-width: 860px; margin: 40px auto 0; padding: clamp(28px, 5vw, 60px) !important; background: var(--frame); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--sh-2); }
/* the parent colours legal text with !important; the palette has to say it the same way */
body.tsl-canvas--page .page-content:not(.elementor-built) :is(p, ul, ol, li) { color: var(--ink-2) !important; }
body.tsl-canvas--page .page-content:not(.elementor-built) :is(h1, h3, h4, strong, b) { color: var(--ink) !important; }
body.tsl-canvas--page .page-content:not(.elementor-built) h2 { color: var(--ink) !important; letter-spacing: -0.03em; }
@media (max-width: 860px) { body.tsl-canvas--page .page-content:not(.elementor-built) { margin: 16px 12px 0; } }