/*
Theme Name: Debacom
Theme URI: https://www.debacom.pl
Description: Nowoczesny, responsywny motyw firmy Debacom Sp. z o.o. (operator ISP z Zabrza). Wierne odwzorowanie klasycznej strony "Łączymy Najlepiej" przebudowane pod najnowszego WordPressa, w pełni responsywne (komputer / telefon) i zgodne z wymaganiami dostępności cyfrowej (WCAG 2.1 AA, ustawa z 4 kwietnia 2019 r. o dostępności cyfrowej oraz Europejski Akt o Dostępności). Zawiera pasek dostępności: odsłuchiwanie treści (TTS), wysoki kontrast, skala szarości, powiększanie tekstu, podkreślanie odnośników i czytelną czcionkę.
Author: Debacom
Version: 2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: debacom
Tags: light, orange, green, two-columns, right-sidebar, custom-menu, featured-images, full-width-template, translation-ready, accessibility-ready, responsive
*/

/* =========================================================================
   1. FONTY (Source Sans Pro – lokalne, jak w oryginale)
   ========================================================================= */
@font-face {
  font-family: "Source Sans Pro";
  src: url("assets/fonts/sspro/SourceSansPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("assets/fonts/sspro/SourceSansPro-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("assets/fonts/sspro/SourceSansPro-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   2. ZMIENNE MOTYWU (paleta odtworzona z oryginalnego custom.css)
   ========================================================================= */
:root {
  --dbc-orange: #ef7707;      /* główny pomarańczowy */
  --dbc-orange-2: #f19800;    /* akcent / hover tła */
  --dbc-orange-hover: #d9660a;/* przyciemniony – kontrast AA na bieli */
  --dbc-lime: #8dc63f;        /* limonka */
  --dbc-lime-2: #bed62f;
  --dbc-graphite: #1d1d1e;    /* ciemny grafit */
  --dbc-brown: #695e57;       /* brązowo-szary */
  --dbc-brown-2: #74675f;
  --dbc-ink: #333333;         /* tekst podstawowy */
  --dbc-muted: #5f5f5f;       /* tekst drugorzędny (AA na bieli) */
  --dbc-line: #ededed;        /* obramowania kafli */
  --dbc-bg: #e4e4e4;          /* tło strony */
  --dbc-white: #ffffff;
  --dbc-focus: #0b5fff;       /* wyraźny outline fokusu */
  --dbc-radius: 6px;
  --dbc-shadow: 0 0 7px rgba(0, 0, 0, .18);
  --dbc-shadow-hover: 0 0 15px rgba(0, 0, 0, .32);
  --dbc-maxw: 1100px;
  --dbc-font: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* =========================================================================
   3. RESET / PODSTAWY
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--dbc-font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--dbc-ink);
  background: var(--dbc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--dbc-orange-hover); text-decoration: underline; transition: color .2s ease, background-color .2s ease; }
a:hover, a:focus { color: var(--dbc-orange-2); }
h1, h2, h3, h4 { font-family: var(--dbc-font); font-weight: 300; line-height: 1.25; color: var(--dbc-graphite); }
h1 { font-size: 2.1rem; margin: 0 0 .5em; }
h2 { font-size: 1.7rem; margin: 0 0 .5em; }
h3 { font-size: 1.35rem; margin: 0 0 .4em; }
strong, b { font-weight: 600; }
p { margin: 0 0 1em; }

.dbc-container { max-width: var(--dbc-maxw); margin: 0 auto; padding: 0 20px; }

/* Ukrycie wizualne, ale dostępne dla czytników ekranu */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: 8px; left: 8px;
  width: auto; height: auto; z-index: 100001;
  padding: 12px 20px; margin: 0; clip: auto; clip-path: none;
  background: var(--dbc-graphite); color: #fff;
  border-radius: var(--dbc-radius); font-size: 1rem;
}

/* Skip link „Przejdź do treści" (WCAG 2.4.1) */
.dbc-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100002;
  background: var(--dbc-graphite); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--dbc-radius) 0;
  text-decoration: none; font-weight: 600;
}
.dbc-skip-link:focus { left: 0; color: #fff; }

/* Widoczny fokus na całej stronie (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--dbc-focus);
  outline-offset: 2px;
}

/* =========================================================================
   4. NAGŁÓWEK / MENU
   ========================================================================= */
.site-header {
  background: #fbfbfb;
  box-shadow: 0 1px 10px rgba(190,190,191,.6);
  position: sticky; top: 0; z-index: 50;
}
.site-header__bar {
  display: flex; align-items: center;
  gap: 20px; padding: 12px 0;
}
.main-nav { margin-left: auto; }
.site-logo img { display: block; max-height: 72px; width: auto; }
.site-header__phone {
  font-size: 1.05rem; color: var(--dbc-graphite); white-space: nowrap;
}
.site-header__phone a { color: var(--dbc-graphite); text-decoration: none; font-weight: 600; }
.site-header__phone a:hover, .site-header__phone a:focus { color: var(--dbc-orange-hover); }

/* Główna nawigacja */
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 2px; align-items: center; }
.main-nav a {
  display: block; padding: 8px 11px;
  color: var(--dbc-graphite); text-decoration: none;
  font-size: 1rem; border-radius: var(--dbc-radius); white-space: nowrap;
}
.main-nav a:hover, .main-nav a:focus, .main-nav .current-menu-item > a { color: #fff; background: var(--dbc-orange); }
.main-nav li { position: relative; }
/* Podmenu */
.main-nav ul ul {
  display: none; position: absolute; left: 0; top: 100%;
  min-width: 220px; background: var(--dbc-graphite);
  flex-direction: column; padding: 6px 0; z-index: 60;
  border-radius: 0 0 var(--dbc-radius) var(--dbc-radius);
  box-shadow: var(--dbc-shadow);
}
.main-nav li:hover > ul, .main-nav li:focus-within > ul { display: flex; }
.main-nav ul ul a { color: #fff; border-radius: 0; padding: 8px 16px; }
.main-nav ul ul a:hover, .main-nav ul ul a:focus { background: var(--dbc-orange); color: #fff; }

/* Przycisk menu mobilnego */
.menu-toggle {
  display: none; align-items: center; gap: 8px;
  background: var(--dbc-orange); color: #fff; border: 0;
  padding: 10px 16px; border-radius: var(--dbc-radius);
  font-size: 1rem; font-family: inherit; cursor: pointer;
}
.menu-toggle:hover, .menu-toggle:focus { background: var(--dbc-orange-hover); }
.menu-toggle__bars { display: inline-block; width: 20px; height: 2px; background: #fff; position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff;
}
.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; }

/* =========================================================================
   5. PRZYCISKI
   ========================================================================= */
.dbc-button, .button {
  display: inline-block; padding: 12px 22px;
  background: var(--dbc-orange); color: #fff !important;
  text-decoration: none; border: 0; border-radius: var(--dbc-radius);
  font-size: 1rem; font-weight: 600; cursor: pointer;
  box-shadow: var(--dbc-shadow); font-family: inherit;
}
.dbc-button:hover, .dbc-button:focus, .button:hover, .button:focus {
  background: var(--dbc-orange-hover); color: #fff !important;
}
.dbc-button--ghost {
  background: transparent; color: var(--dbc-graphite) !important;
  border: 1px solid var(--dbc-graphite); box-shadow: none;
}
.dbc-button--ghost:hover, .dbc-button--ghost:focus {
  background: var(--dbc-orange-2); color: #fff !important; border-color: var(--dbc-orange-hover);
}
.dbc-button--ghost:focus-visible {
  outline: 3px solid var(--dbc-graphite); outline-offset: 2px;
}

/* =========================================================================
   6. STRONA INTRO (rozdzielacz: indywidualni / biznes)
   ========================================================================= */
.intro-splash { padding: 40px 0 60px; }
.intro-splash__logo { text-align: center; margin-bottom: 28px; }
.intro-splash__logo img { max-height: 70px; width: auto; }
.intro-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
  max-width: 960px; margin: 0 auto;
}
.intro-card {
  position: relative; min-height: 300px; overflow: hidden;
  border-radius: var(--dbc-radius);
  text-decoration: none; display: block; box-shadow: var(--dbc-shadow);
  background-color: var(--dbc-orange);
  background-repeat: no-repeat; background-position: center; background-size: cover;
  transition: box-shadow .2s ease, transform .2s ease;
}
/* Oryginalne tła kafli */
.intro-card--ind { background-image: url("assets/img/business/bg-box1.png"); }
.intro-card--biz { background-image: url("assets/img/business/bg-box2.png"); background-color: #8a8078; }
.intro-card:hover, .intro-card:focus { box-shadow: var(--dbc-shadow-hover); transform: translateY(-2px); }

/* Nakładka zapewniająca kontrast tekstu (WCAG) – ciemnienie po stronie tekstu */
.intro-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.intro-card--ind::before { background: linear-gradient(270deg, rgba(120,55,0,.82) 0%, rgba(120,55,0,.35) 55%, rgba(120,55,0,0) 100%); }
.intro-card--biz::before { background: linear-gradient(90deg, rgba(35,32,30,.85) 0%, rgba(35,32,30,.4) 55%, rgba(35,32,30,0) 100%); }

/* Postacie (zdjęcia) w rogach – element dekoracyjny */
.intro-card__mascot { position: absolute; bottom: 0; z-index: 2; max-height: 90%; width: auto; pointer-events: none; }
.intro-card__mascot--left  { left: -10px; }
.intro-card__mascot--right { right: -10px; }

/* Warstwa tekstu nad tłem i nakładką */
.intro-card__text {
  position: relative; z-index: 3; padding: 30px;
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  min-height: 300px; justify-content: center; max-width: 70%; margin-left: auto;
}
.intro-card--biz .intro-card__text { align-items: flex-start; text-align: left; margin-left: 0; margin-right: auto; }
.intro-card h2 { color: #fff; font-weight: 300; font-size: 1.55rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.intro-card h2 strong { font-weight: 600; }
.intro-card p { color: #fff; margin: 8px 0 20px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.intro-card .dbc-button { background: #fff; color: var(--dbc-graphite) !important; }
.intro-card .dbc-button:hover, .intro-card .dbc-button:focus { background: var(--dbc-graphite); color: #fff !important; }
.intro-card--biz .dbc-button:hover, .intro-card--biz .dbc-button:focus { background: var(--dbc-orange-2); }

/* =========================================================================
   7. ONE-PAGER: KLIENCI INDYWIDUALNI
   ========================================================================= */
.offer { padding: 40px 0 60px; background: #fff; }
.offer__title { text-align: center; margin-bottom: 6px; }
.offer__slogan { text-align: center; color: var(--dbc-muted); font-size: 1.2rem; margin-bottom: 34px; }

.offer-top {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px;
}
.offer-hero {
  position: relative; overflow: hidden;
  border-radius: var(--dbc-radius);
  background: var(--dbc-orange) url("assets/img/individual/bg-box1.png") center / cover no-repeat;
  color: #fff; min-height: 260px;
}
.offer-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(270deg, rgba(120,55,0,.82) 0%, rgba(120,55,0,.35) 55%, rgba(120,55,0,0) 100%);
}
.offer-hero__mascot { position: absolute; left: -20px; bottom: 0; z-index: 2; max-height: 95%; width: auto; pointer-events: none; }
.offer-hero__text {
  position: relative; z-index: 3; padding: 30px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: right; align-items: flex-end; min-height: 260px;
  margin-left: auto; max-width: 72%;
}
.offer-hero h3, .offer-hero__text * { color: #fff; }
.offer-hero__text p { font-size: 1.55rem; font-weight: 300; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.5); line-height: 1.3; }

.offer-side { display: grid; grid-template-rows: auto auto; gap: 22px; }
.card-box {
  border: 1px solid var(--dbc-line); border-radius: var(--dbc-radius);
  padding: 22px; background: #fff; text-decoration: none; color: var(--dbc-ink);
  display: block; transition: box-shadow .2s ease;
}
a.card-box:hover, a.card-box:focus { box-shadow: var(--dbc-shadow-hover); }
.card-box h3 { color: var(--dbc-graphite); }
.card-box--promo h3 { color: var(--dbc-orange-hover); }

.offer-triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.offer-triple .card-box { text-align: left; }
.offer-triple .card-box h3 { margin-bottom: .3em; }
.offer-triple a.card-box:hover, .offer-triple a.card-box:focus { background: var(--dbc-orange-2); }
.offer-triple a.card-box:hover h3, .offer-triple a.card-box:focus h3,
.offer-triple a.card-box:hover p, .offer-triple a.card-box:focus p { color: #fff; }

/* Panele dolne (Jak pracujemy / Zaufali nam / Kontakt) */
.panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.panel { background: #fff; border: 1px solid var(--dbc-line); border-radius: var(--dbc-radius); padding: 22px; }
.panel h4 { font-size: 1.25rem; color: var(--dbc-graphite); font-weight: 600; margin: 0 0 .6em; }
.panel .infolinia { color: var(--dbc-muted); margin-bottom: .6em; }
.panel .infolinia span { color: var(--dbc-orange-hover); font-weight: 600; }
.panel-logos { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.panel-logos img { max-height: 46px; width: auto; }

/* =========================================================================
   8. STRONA BIZNESOWA
   ========================================================================= */
.biz { padding: 40px 0 60px; background: #f4f4f4; }
.biz-top { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.biz-hero {
  border-radius: var(--dbc-radius); padding: 34px; background: #fff;
  border-top: 3px solid var(--dbc-brown-2); border-left: 3px solid var(--dbc-brown-2);
}
.biz-hero h2 { color: var(--dbc-brown-2); font-weight: 300; line-height: 1.3; }
.biz-hero p { color: var(--dbc-muted); font-size: 1.15rem; }
.biz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.biz-grid .card-box { background: #fff; }

/* =========================================================================
   9. STRONA TREŚCI / PODSTRONY
   ========================================================================= */
.content-page { background: #fff; padding: 40px 0 60px; }
.content-page .entry-content { max-width: 100%; }
.content-page .entry-content h2 { margin-top: 1.4em; }
.content-page img { border-radius: var(--dbc-radius); }
.entry-content a { color: var(--dbc-orange-hover); }

/* Odnośniki do plików PDF (dostępność – informacja o formacie) */
.entry-content a[href$=".pdf"]::after,
a.is-pdf::after {
  content: " (plik PDF)";
  font-size: .85em; color: var(--dbc-muted);
}

/* =========================================================================
   10. STOPKA
   ========================================================================= */
.light-footer { background: #fff; border-top: 1px solid var(--dbc-line); padding: 18px 0; }
.light-footer .dbc-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.light-footer__infolinia { color: var(--dbc-graphite); font-size: 1.05rem; }
.light-footer__infolinia span { color: var(--dbc-orange-hover); font-weight: 600; }

.site-footer { background: var(--dbc-graphite); color: #d7d7d7; padding: 40px 0 20px; }
.site-footer a { color: #fff; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.site-footer h4 { color: #fff; font-weight: 600; font-size: 1.1rem; margin: 0 0 .6em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: .4em; }
.site-footer .tagline { text-align: center; color: #9a9a9a; font-style: italic; margin-top: 26px; }
.site-footer .copyright { text-align: center; color: #8a8a8a; font-size: .9rem; margin-top: 10px; }

/* =========================================================================
   11. RESPONSYWNOŚĆ (telefon / tablet)
   ========================================================================= */
@media (max-width: 900px) {
  .intro-grid, .offer-top, .offer-triple, .panels, .biz-top, .biz-grid { grid-template-columns: 1fr; }
  .offer-side { grid-template-rows: none; }
}
@media (max-width: 560px) {
  /* Na wąskich ekranach zmniejszamy postacie i poszerzamy strefę tekstu,
     aby treść pozostała w pełni czytelna (WCAG – reflow 1.4.10). */
  .intro-card__mascot, .offer-hero__mascot { max-height: 62%; opacity: .5; }
  .intro-card__text, .intro-card--biz .intro-card__text,
  .offer-hero__text { max-width: 100%; margin: 0; text-align: left; align-items: flex-start; }
  .intro-card--ind::before { background: linear-gradient(180deg, rgba(120,55,0,.55) 0%, rgba(120,55,0,.75) 100%); }
  .intro-card--biz::before { background: linear-gradient(180deg, rgba(35,32,30,.6) 0%, rgba(35,32,30,.8) 100%); }
  .offer-hero::before { background: linear-gradient(180deg, rgba(120,55,0,.55) 0%, rgba(120,55,0,.78) 100%); }
}
@media (max-width: 780px) {
  .menu-toggle { display: inline-flex; }
  .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fbfbfb; box-shadow: var(--dbc-shadow);
    display: none; padding: 8px 0;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a { border-radius: 0; padding: 14px 20px; border-bottom: 1px solid var(--dbc-line); }
  .main-nav ul ul { position: static; display: block; background: #f0f0f0; box-shadow: none; border-radius: 0; }
  .main-nav ul ul a { color: var(--dbc-graphite); padding-left: 40px; }
  .main-nav ul ul a:hover, .main-nav ul ul a:focus { background: var(--dbc-orange); color: #fff; }
  .site-header__phone { display: none; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
}

/* Górny pasek nagłówka (utility bar) */
.site-header__top {
  border-bottom: 1px solid var(--dbc-line, #ededed);
  padding: 4px 0;
}
.header-top-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: flex-end; gap: 18px;
  font-size: .88rem;
}
.header-top-menu a {
  color: var(--dbc-brown, #74675f); text-decoration: none;
}
.header-top-menu a:hover, .header-top-menu a:focus {
  color: var(--dbc-orange, #ef7707); text-decoration: underline;
}
@media (max-width: 640px) {
  .header-top-menu { justify-content: center; gap: 12px; flex-wrap: wrap; }
}
.site-credit { text-align: center; font-size: .82rem; color: #888; margin: 6px 0 0; } .site-credit a { color: #ef7707; text-decoration: none; } .site-credit a:hover { text-decoration: underline; }

/* ===== Dostępny formularz kontaktowy ===== */
.dbc-form { max-width: 640px; }
.dbc-form__row { margin: 0 0 16px; }
.dbc-form__row label { display: block; font-weight: 600; margin-bottom: 6px; color: #1d1d1e; }
.dbc-req { color: #d9660a; }
.dbc-form input[type="text"], .dbc-form input[type="email"], .dbc-form select, .dbc-form textarea {
  width: 100%; padding: 11px 14px; border: 2px solid #d8d8d8; border-radius: 8px;
  font-size: 16px; font-family: inherit; background: #fff; }
.dbc-form input:focus, .dbc-form select:focus, .dbc-form textarea:focus {
  outline: none; border-color: #ef7707; box-shadow: 0 0 0 3px rgba(239,119,7,.15); }
.dbc-form textarea { min-height: 140px; resize: vertical; }
.dbc-form__hint { display: block; font-size: 13px; color: #666; margin-top: 4px; }
.dbc-form__consent { font-size: 14px; margin: 10px 0; }
.dbc-form__submit input { background: #ef7707; color: #fff; border: 0; padding: 13px 28px;
  border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; }
.dbc-form__submit input:hover, .dbc-form__submit input:focus { background: #d9660a; }
.dbc-form__rodo { font-size: 13px; color: #555; line-height: 1.5; margin-top: 14px;
  border-top: 1px solid #eee; padding-top: 12px; }
.dbc-form__rodo a { color: #d9660a; }
.wpcf7-not-valid-tip { color: #c00; font-size: 14px; font-weight: 600; }
.wpcf7-response-output { border-radius: 8px; padding: 12px 16px !important; }