/* ==========================================================================
   mowangielski.pl — shared design layer (loaded last on every page)
   Unifies the five older page templates: type, buttons, cards, heroes,
   spacing on phones, plus the trust strip / sticky bar / steps components.
   Brand: navy #034f84 · teal #009688 · yellow #facc15 · Inter
   ========================================================================== */
:root {
  --t-navy: #034f84; --t-navy-deep: #023a61; --t-teal: #009688; --t-yellow: #facc15; --t-yellow-deep: #eab308;
  --t-ink: #1e293b; --t-text: #334155; --t-muted: #64748b; --t-line: #e3ebf3; --t-soft: #f5f9fc;
  --t-radius: 18px;
  --t-shadow: 0 1px 2px rgba(3,79,132,.06), 0 12px 32px -14px rgba(3,79,132,.22);
  --t-shadow-hover: 0 2px 4px rgba(3,79,132,.08), 0 22px 44px -16px rgba(3,79,132,.32);
}

/* ---------- type ---------- */
body { color: var(--t-text); text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
.section-title, .meat-card h2, .content-card h2 { color: var(--t-navy); font-weight: 800; }
.section-title::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--t-teal), var(--t-yellow)); margin: .7rem auto 0; }
.section-separator { display: none; } /* replaced by the underline above */
a { text-underline-offset: 3px; }

/* ---------- heroes: depth instead of a flat gradient ---------- */
.hero, .header-bg {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.14), transparent 38%),
    radial-gradient(circle at 88% 85%, rgba(250,204,21,.20), transparent 42%),
    linear-gradient(135deg, var(--t-navy-deep) 0%, var(--t-navy) 45%, var(--t-teal) 100%) !important;
}
.hero h1, .header-bg h1, .header-bg h2:first-of-type { text-shadow: 0 2px 18px rgba(0,0,0,.18); }

.hero h1, .header-bg h1 { line-height: 1.12 !important; }
@media (min-width: 641px) {
  .hero { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
  .hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.5rem) !important; margin-bottom: 1.2rem !important; }
  .hero p { max-width: 760px; margin-left: auto; margin-right: auto; }
  .hero .btn-main { margin-top: .75rem; }
  /* the menu carries EN/PL on desktop; the old floating pill overlapped the breadcrumbs */
  .language-switcher { display: none !important; }
}

/* ---------- buttons: one style everywhere ---------- */
.btn-main, .btn-primary, .ma-book button, .mje-cta {
  border-radius: 999px !important; font-weight: 800 !important; letter-spacing: 0 !important;
  text-transform: none !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-main, .btn-primary, .ma-book button {
  background: linear-gradient(180deg, #fde047 0%, var(--t-yellow) 100%) !important; color: #1f2937 !important;
  box-shadow: 0 10px 24px -8px rgba(234,179,8,.65), inset 0 -2px 0 rgba(0,0,0,.08) !important;
}
.btn-main:hover, .btn-primary:hover, .ma-book button:hover { transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(234,179,8,.75), inset 0 -2px 0 rgba(0,0,0,.08) !important; }
.btn-main:focus-visible, .btn-primary:focus-visible, .ma-book button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- cards ---------- */
.meat-card, .content-card, .faq-item, .price-card, .target-card, .place-card, .card, .kids-hero-card, .ma-faq-item {
  border-radius: var(--t-radius) !important; box-shadow: var(--t-shadow) !important;
  border: 1px solid var(--t-line);
}
.target-card, .price-card, .card { transition: transform .2s ease, box-shadow .2s ease; }
.target-card:hover, .price-card:hover { transform: translateY(-4px); box-shadow: var(--t-shadow-hover) !important; }
.price-card.featured { border: 2px solid var(--t-teal) !important; }
.price-card .price { color: var(--t-navy); font-weight: 900; }
.faq-item h3, .faq-item h4, .faq-question, .ma-faq-item h3 { color: var(--t-navy) !important; }
.contact-section { border-radius: 24px !important; }

/* ---------- header ---------- */
.business-name-bar { backdrop-filter: saturate(1.2) blur(6px); background: rgba(255,255,255,.96) !important; }

/* ---------- trust strip (injected under the hero) ---------- */
.t-trust { background: #fff; border-bottom: 1px solid var(--t-line); box-shadow: 0 8px 24px -18px rgba(3,79,132,.4); position: relative; z-index: 5; }
.t-trust ul { list-style: none; margin: 0 auto; padding: .85rem 1rem; max-width: 1180px; display: flex; flex-wrap: wrap;
  justify-content: center; gap: .5rem 1.4rem; font: 600 .9rem/1.3 'Inter', system-ui, sans-serif; color: var(--t-ink); }
.t-trust li { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.t-trust a { color: inherit; text-decoration: none; }
.t-trust .t-stars { color: #f59e0b; letter-spacing: 1px; }
.t-trust strong { color: var(--t-navy); }

/* ---------- steps (top of every booking form) ---------- */
.t-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 0 0 1.25rem; padding: 0; list-style: none; counter-reset: s; }
.t-steps li { background: var(--t-soft); border: 1px solid var(--t-line); border-radius: 12px; padding: .7rem .75rem; font: 600 .85rem/1.35 'Inter', system-ui, sans-serif; color: var(--t-ink); }
.t-steps li::before { counter-increment: s; content: counter(s); display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--t-teal); color: #fff; font-weight: 800; align-items: center; justify-content: center; margin-bottom: .35rem; }
.t-steps span { display: block; color: var(--t-muted); font-weight: 500; font-size: .8rem; margin-top: .15rem; }

/* ---------- sticky bar on phones (injected; hidden on desktop) ---------- */
.t-sticky { display: none; }
@media (max-width: 768px) {
  .t-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); border-top: 1px solid var(--t-line); box-shadow: 0 -10px 30px -12px rgba(3,79,132,.35);
    transition: transform .25s ease; }
  .t-sticky.t-off { transform: translateY(110%); }
  .t-sticky a { display: flex; align-items: center; justify-content: center; border-radius: 999px; font: 800 .95rem 'Inter', system-ui, sans-serif; text-decoration: none; }
  .t-sticky .t-go { flex: 1; padding: .8rem 1rem; background: linear-gradient(180deg, #fde047, var(--t-yellow)); color: #1f2937; }
  .t-sticky .t-call { width: 3rem; background: var(--t-navy); color: #fff; font-size: 1.15rem; }
  body.t-has-sticky { padding-bottom: 76px; }
  body.t-has-sticky .whatsapp-btn, body.t-has-sticky .whatsapp-float { bottom: 88px !important; }
}

/* ---------- phones: tame the desktop-sized older templates ---------- */
@media (max-width: 640px) {
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  .hero, .header-bg { padding-top: 3rem !important; padding-bottom: 3.25rem !important; }
  .hero h1, .header-bg h1 { font-size: clamp(1.85rem, 8.2vw, 2.4rem) !important; line-height: 1.15 !important; margin-bottom: 1rem !important; }
  .header-bg h2 { font-size: clamp(1.6rem, 7.5vw, 2.1rem) !important; line-height: 1.2 !important; }
  .hero p, .header-bg p { font-size: 1.02rem !important; }
  h2, .section-title { font-size: clamp(1.45rem, 6.4vw, 1.9rem) !important; line-height: 1.25 !important; }
  .btn-main, .btn-primary { padding: .95rem 1.5rem !important; font-size: 1rem !important; max-width: 100%; white-space: normal; }
  section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .meat-card, .content-card, .faq-section, .faq-item, .kids-hero-card, .contact-section { padding: 1.35rem !important; }
  .faq-section { border-radius: var(--t-radius) !important; margin-top: 2rem !important; }
  .faq-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .faq-item h4, .faq-item h3 { font-size: 1.05rem !important; }
  /* long words / URLs never push the page wider than the phone */
  p, li, td, th, h1, h2, h3, h4, a, span, strong { overflow-wrap: anywhere; }
  .t-trust li, .t-trust a, .ma-menu a, .t-sticky a { overflow-wrap: normal; }

  /* trust strip: one swipeable line instead of four */
  .t-trust ul { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 1.1rem; font-size: .82rem;
    padding: .7rem 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .t-trust ul::-webkit-scrollbar { display: none; }
  .t-steps { grid-template-columns: 1fr; }

  /* compact headers: brand + logo only (phone is in the top bar and the sticky bar) */
  .business-name-bar { padding: .55rem 0 !important; position: relative !important; }
  .business-tagline, .business-contact-quick { display: none !important; }
  .business-name-container > div:not(.brand-with-logo):not(.language-switcher) { display: none !important; }
  .business-name-bar .logo-header { height: 44px !important; }
  .business-name-bar .business-name { font-size: 1rem !important; }
  .business-name-bar .brand-with-logo { gap: .6rem !important; }

  /* EN/PL switch: small, in the corner, never wider than the screen */
  .language-switcher { position: absolute !important; top: .4rem !important; right: .5rem !important; left: auto !important;
    padding: .2rem !important; gap: .2rem !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; z-index: 300 !important; }
  .language-switcher .lang-button { padding: .3rem .65rem !important; font-size: .78rem !important; }
  body { position: relative; }

  /* floating WhatsApp: smaller so it doesn't cover content */
  .whatsapp-btn, .whatsapp-float { width: 52px !important; height: 52px !important; right: 14px !important; font-size: 1.35rem !important; }
  a[aria-label="Napisz na WhatsApp"], a[aria-label="Message on WhatsApp"], a[aria-label*="WhatsApp"][style*="position:fixed"] {
    width: 52px !important; height: 52px !important; padding: 0 !important; right: 14px !important;
    justify-content: center !important; font-size: 0 !important; }
  a[aria-label="Napisz na WhatsApp"]::before, a[aria-label="Message on WhatsApp"]::before,
  a[aria-label*="WhatsApp"][style*="position:fixed"]::before { content: "💬"; font-size: 1.35rem; }
  body.t-has-sticky a[aria-label*="WhatsApp"][style*="position:fixed"] { bottom: 88px !important; }

  /* top info bar: phone + WhatsApp only, leave room for the EN/PL switch */
  .top-info-bar .tib-left { display: none !important; }
  .top-info-bar .tib-inner { padding-right: 104px !important; justify-content: flex-start !important; }

  /* wide comparison tables fit the screen */
  .table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .nuance-table { width: 100% !important; table-layout: fixed; }
  .nuance-table th, .nuance-table td { font-size: .82rem !important; padding: .55rem .5rem !important; word-break: break-word; hyphens: auto; }
  footer { padding-top: 3rem !important; }
  .footer-grid { gap: 2rem !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- services menu stays visible while scrolling ---------- */
.business-name-bar { position: relative !important; top: auto !important; }
.ma-menu { position: sticky; top: 0; z-index: 950; box-shadow: 0 6px 18px -12px rgba(3,79,132,.45); }
.ma-menu ul { gap: .25rem .35rem; }
.ma-menu a { padding: .35rem .65rem; }

/* ---------- unified footer (services = GBP, NAP = GBP) ---------- */
.t-footer { background: #0b1120; color: #cbd5e1; border-top: 6px solid var(--t-yellow); padding: 3.5rem 1rem 1.5rem;
  font: 400 .95rem/1.7 'Inter', system-ui, sans-serif; }
.t-footer-grid { max-width: 1180px; margin: 0 auto; display: grid; gap: 2.2rem;
  grid-template-columns: 1.3fr 1.2fr 1.2fr 1fr; }
.t-footer h4 { color: var(--t-yellow); font-size: .85rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1rem; }
.t-footer ul { list-style: none; margin: 0; padding: 0; }
.t-footer li { margin: 0 0 .45rem; }
.t-footer a { color: #cbd5e1; text-decoration: none; }
.t-footer a:hover { color: #fff; text-decoration: underline; }
.t-footer .t-cols { columns: 2; column-gap: 1.2rem; }
.t-footer .t-nap strong { color: #fff; }
.t-footer p { margin: 0 0 .9rem; }
.t-footer .t-rev { color: #fff; font-weight: 700; }
.t-footer .t-stars { color: #f59e0b; letter-spacing: 1px; }
.t-footer-legal { max-width: 1180px; margin: 2.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .82rem; color: #64748b; text-align: center; }
@media (max-width: 900px) { .t-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .t-footer-grid { grid-template-columns: 1fr; gap: 1.6rem; } .t-footer { padding-top: 2.5rem; } }

/* ---------- price bubbles are buttons ---------- */
a.pricing-badge { text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease; }
a.pricing-badge:hover { transform: translateY(-2px); background: var(--t-teal) !important; color: #fff !important; }

/* ---------- thank-you screen: WhatsApp + tailored welcome ---------- */
.ma-wa { display: inline-block; background: #25d366; color: #fff !important; font-weight: 800; padding: .75rem 1.2rem;
  border-radius: 999px; text-decoration: none; margin: .25rem 0 .5rem; }
.ma-next { text-align: left; background: var(--t-soft); border: 1px solid var(--t-line); border-radius: 14px; padding: 1rem 1.2rem; margin-top: .75rem; }
.ma-next h4 { margin: 0 0 .5rem; color: var(--t-navy); font-weight: 800; }
.ma-next ul { margin: 0 0 .6rem 1.1rem; padding: 0; }
.ma-next li { margin-bottom: .25rem; }
.ma-next a { color: var(--t-navy); font-weight: 700; }

/* ---------- thank-you: WhatsApp is the main next step ---------- */
.ma-wa-box { background: #ecfdf3; border: 2px solid #25d366; border-radius: 16px; padding: 1.1rem 1.2rem; margin: .8rem 0 1rem; text-align: center; }
.ma-wa-lead { margin: 0 0 .8rem; color: var(--t-ink); }
.ma-wa-box .ma-wa { display: block; font-size: 1.1rem; padding: 1rem 1.2rem; margin: 0 auto .4rem; max-width: 420px;
  box-shadow: 0 10px 24px -10px rgba(37,211,102,.8); }
.ma-wa-box .ma-wa:hover { background: #1ebe5b; }