/* ==========================================================================
   edu-theme.css — nowy wygląd eduranking.pl jako nakładka na istniejący
   markup (Bootstrap 3). Ładować PO bootstrap.css / custom.css.
   Paleta i typografia 1:1 z makietą profilu szkoły.
   ========================================================================== */

:root{
  --paper:#ffffff; --paper2:#f6f7f5; --ink:#1d2733; --muted:#5c6b7a;
  --green:#156046; --green-soft:#e5f1ec; --marker:#ffd84d; --marker-ink:#3a3000;
  --line:#e3e7ec; --line2:#eef1f4; --good:#156046; --bad:#b3403a;
  --grid:rgba(21,96,70,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14161a; --paper2:#1b1e23; --ink:#e8ebee; --muted:#9aa7b3;
    --green:#4fae8c; --green-soft:#1c2a25; --marker:#e3bd2f; --marker-ink:#241e00;
    --line:#2a2f36; --line2:#22262c; --good:#57b894; --bad:#e07a74;
    --grid:rgba(79,174,140,.10);
  }
}

/* --- baza ------------------------------------------------------------- */
html{scroll-padding-top:86px}
body{
  background:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:70px; /* pod sticky header */
}
h1,h2,h3,h4,.panel-title,.navbar-brand{
  font-family:"Bricolage Grotesque",Inter,system-ui,sans-serif;
  color:var(--ink);letter-spacing:-.01em;
}
h1{font-weight:700}
a{color:var(--green)}
a:hover,a:focus{color:var(--green);text-decoration:underline}
::selection{background:var(--marker);color:var(--marker-ink)}
img{max-width:100%;height:auto}

/* nagłówki sekcji z „zakreślaczem" jak w makiecie */
.headline h2,.headline h3{
  display:inline-block;font-weight:700;border-bottom:0;
  background:linear-gradient(transparent 62%,var(--marker) 62%,var(--marker) 94%,transparent 94%);
  padding:0 .15em;color:var(--ink);
}
.headline{border-bottom:1px solid var(--line);margin-bottom:14px}

/* --- górne menu (navbar-inverse -> jasny sticky header) ---------------- */
.navbar-inverse{
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(8px);
  border:0;border-bottom:1px solid var(--line);
  min-height:64px;
}
@supports not (background:color-mix(in srgb,red 50%,blue)){
  .navbar-inverse{background:var(--paper)}
}
.navbar-inverse .navbar-brand{display:flex;align-items:center;height:64px;padding:0 15px;
  font-weight:800;font-size:21px;color:var(--ink)}
.navbar-inverse .navbar-brand b{color:var(--green)}
.navbar-inverse .navbar-brand img{max-height:34px;width:auto}
.navbar-inverse .navbar-nav>li>a{color:var(--ink);font-weight:500;line-height:34px;font-size:15.5px}
.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus{
  color:var(--green);background:transparent}
.navbar-inverse .navbar-toggle{border-color:var(--line)}
.navbar-inverse .navbar-toggle .icon-bar{background:var(--ink)}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background:var(--paper2)}
.navbar-inverse .navbar-collapse{border-color:var(--line);background:var(--paper)}

/* --- okruszki (breadcrumbs / .section-header) -------------------------- */
.section-header{
  background:transparent;border:0;padding:10px 0 0;
  font-size:13.5px;color:var(--muted);
}
.section-header a{color:var(--muted)}
.section-header a:hover{color:var(--green)}
.section-header .container>.row>[class*="col-"]{margin-top:0!important}

/* --- panele -> karty --------------------------------------------------- */
.panel,.panel-default,.well{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:none;overflow:hidden;
}
.panel-default>.panel-heading{
  background:var(--paper);color:var(--ink);
  border-bottom:1px solid var(--line);padding:14px 18px;
}
.panel-title{font-size:19px;font-weight:700}
.panel-title .fa{color:var(--green);margin-right:6px}
.panel-body{padding:16px 18px;background:var(--paper)}
.panel .panel-footer{background:var(--paper2);border-top:1px solid var(--line)}

/* --- tabele ------------------------------------------------------------ */
.table{color:var(--ink)}
.table>thead>tr>th{
  border-bottom:1px solid var(--line);font-size:13px;font-weight:600;
  color:var(--muted);text-transform:none;
}
.table>tbody>tr>td,.table>tbody>tr>th{border-top:1px solid var(--line2);vertical-align:middle}
.table-striped>tbody>tr:nth-of-type(odd){background:var(--paper2)}
.table-hover>tbody>tr:hover{background:var(--green-soft)}

/* --- przyciski / formularze ------------------------------------------- */
.btn{border-radius:9px;font-weight:600}
.btn-primary,.hl-btn-blue,.btn-info{
  background:var(--green);border-color:var(--green);color:#fff;
}
.btn-primary:hover,.btn-primary:focus,.hl-btn-blue:hover,.btn-info:hover{
  background:#0f4c37;border-color:#0f4c37;color:#fff;
}
.btn-default{background:var(--paper);border-color:var(--line);color:var(--ink)}
.btn-default:hover{background:var(--paper2);border-color:var(--line);color:var(--ink)}
.form-control{
  background:var(--paper);border:1px solid var(--line);border-radius:9px;
  color:var(--ink);box-shadow:none;height:40px;
}
.form-control:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
select.form-control{appearance:auto}
label{color:var(--ink);font-weight:600}

/* --- paginacja / etykiety ---------------------------------------------- */
.pagination>li>a,.pagination>li>span{
  color:var(--ink);background:var(--paper);border-color:var(--line);
}
.pagination>li>a:hover{background:var(--green-soft);color:var(--green);border-color:var(--line)}
.pagination>.active>a,.pagination>.active>a:hover,.pagination>.active>span{
  background:var(--green);border-color:var(--green);color:#fff;
}
.label,.badge{border-radius:999px;font-weight:600}
.label-default,.badge{background:var(--paper2);color:var(--ink);border:1px solid var(--line)}
.label-primary,.label-info{background:var(--green-soft);color:var(--green);border:1px solid transparent}
.alert-info{background:var(--green-soft);border-color:var(--green);color:var(--ink);border-radius:12px}

/* --- listy / treść ------------------------------------------------------ */
.content ul li,.recent-blogs ul li{border-color:var(--line2)}
hr{border-color:var(--line)}
blockquote{border-left:4px solid var(--marker);background:var(--paper2);border-radius:0 10px 10px 0}

/* --- stopka ------------------------------------------------------------- */
footer{
  background:var(--paper2);color:var(--muted);
  border-top:1px solid var(--line);margin-top:40px;padding:34px 0 20px;
}
footer .headline{border-bottom:1px solid var(--line)}
footer .headline h3{background:none;padding:0;color:var(--ink);font-size:17px}
footer a{color:var(--muted)}
footer a:hover{color:var(--green)}
footer ul{list-style:none;padding-left:0}
footer ul li{padding:3px 0;border:0}

/* --- osadzenia: rezerwacja miejsca (CLS) --------------------------------- */
#map-canvas{min-height:320px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
#map-canvas iframe{display:block}

/* --- sekcja E8 (spójna z _e8_wyniki.html) ------------------------------- */
.e8sec .e8-now{background:var(--green-soft)}
.e8sec .e8-up{color:var(--good)}.e8sec .e8-dn{color:var(--bad)}
.e8sec tr[data-e8]:hover td{background:var(--paper2)}
.e8sec tr[data-e8].e8-sel td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.e8sec .e8-track{background:var(--line2)}
.e8sec .e8-fill{background:var(--green)}

/* tabele list szkół — poprawki do zmodyfikowanego bootstrap.css (wszystkie szerokości):
   - nowrap w .table-responsive jest tam w @media (max-width:1920px), więc ucinał kolumny także na desktopie,
   - word-break:break-word na .table td działa w tabelach jak łamanie słów po literze */
.table-responsive>.table>thead>tr>th,.table-responsive>.table>tbody>tr>td,
.table-responsive>.table>tbody>tr>th{white-space:normal}
.table>thead>tr>th,.table>tbody>tr>th,.table>thead>tr>td,.table>tbody>tr>td{word-break:normal;overflow-wrap:normal}

/* nazwy szkół mogą się złamać w środku słowa tylko, gdy słowo nie mieści się w kolumnie */
.table-responsive>.table>tbody>tr>td>a{overflow-wrap:anywhere}
/* tablet i telefon (kolumna treści < ~650 px): bez kolumny adresu (jest w profilu szkoły), krótkie etykiety */
.lbl-short{display:none}
@media (max-width:991px){
  .kol-adres{display:none}
  .lbl-full{display:none} .lbl-short{display:inline}
}

/* --- drobiazgi ----------------------------------------------------------- */
.cc_container{font-family:Inter,system-ui,sans-serif!important}
.cc_container .cc_btn{background:var(--marker)!important;color:var(--marker-ink)!important;border-radius:9px!important}
@media (max-width:767px){body{padding-top:64px}h1{font-size:26px}}

/* ==========================================================================
   HOTFIX v2 (po wdrożeniu): baner, logo, tabele, karta informacji
   ========================================================================== */
/* stary pasek ze zdjęciem pod nagłówkiem (Showcase) — chowamy w nowym wyglądzie */
#wrap{display:none}
/* logo: bootstrap na hover robił biały tekst na białym tle */
.navbar-inverse .navbar-brand:hover,.navbar-inverse .navbar-brand:focus{
  color:var(--ink);text-decoration:none}
.navbar-inverse .navbar-brand b{color:var(--green)}
/* stare justowanie tekstów z custom.css psuło nagłówki */
h1,h2,h3,h4{text-align:left}
/* tabele wyników: liczby się nie łamią */
.e8sec table td,.e8sec table th{white-space:nowrap}
.e8sec table td:first-child{white-space:normal}
.e8sec .e8-d{white-space:nowrap}
/* karta "Najważniejsze informacje" (dodaj class="info-table" do tabeli) */
.info-table td:first-child{color:var(--muted);width:38%;font-weight:500;vertical-align:top}
.info-table .small-caption{font-size:inherit;font-weight:500;margin:0;display:inline}
.info-table td{white-space:normal}
/* legenda wykresu E8 */
.e8sec .e8-legend{font-size:12.5px;color:var(--muted);margin:2px 0 6px}
.e8sec .e8-legend .l-dot{display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--green);vertical-align:-1px;margin-right:4px}
.e8sec .e8-legend .l-dash{display:inline-block;width:16px;border-top:2px dashed var(--muted);
  vertical-align:3px;margin:0 4px 0 10px}

/* --- Najważniejsze informacje: plakietki + kafelki + siatka (jak w makiecie) --- */
.school-info .si-badges{margin:0 0 14px}
.school-info .si-badges .badge{margin-right:6px;padding:6px 12px;font-size:13px}
.school-info .si-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:16px}
.school-info .si-facts>div{border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;background:var(--paper2)}
.school-info .si-facts b{display:block;font-size:17px;font-weight:700;overflow-wrap:anywhere}
.school-info .si-facts span{font-size:12.5px;color:var(--muted)}
.school-info .si-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:0}
.school-info .si-grid>div{border-bottom:1px solid var(--line2);padding:7px 2px}
.school-info .si-grid dt{font-size:12.5px;color:var(--muted);font-weight:500;margin:0}
.school-info .si-grid dd{margin:1px 0 0;font-weight:500}
@media(max-width:640px){.school-info .si-grid{grid-template-columns:1fr}}

/* --- neutralizacja pomarańczowych elementów Bootstrapa (m.in. /kontakt/) --- */
.panel-warning{border-color:var(--line)}
.panel-warning>.panel-heading{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn-warning{background:var(--green);border-color:var(--green);color:#fff}
.btn-warning:hover,.btn-warning:focus{background:#0f4c37;border-color:#0f4c37;color:#fff}
.label-warning{background:var(--green-soft);color:var(--green)}
.text-warning{color:var(--muted)}

/* ==========================================================================
   MOBILE (przegląd 390/360 px)
   ========================================================================== */
@media (max-width:767px){
  /* stare szablony mają inline text-align:justify — na wąskim ekranie robi dziury między słowami */
  [style*="justify"],[style*="justify"] p,[style*="justify"] li{text-align:left!important}
  .table-responsive{border:0}
  .table>thead>tr>th,.table>tbody>tr>td{padding:7px 6px}
  /* dekoracyjny pasek przy nagłówkach bloków wystawał o kilka px */
  .block-header h2{overflow:hidden}
  .table-responsive>.table{font-size:13px}
  .table-responsive>.table>tbody>tr>td{padding:7px 3px;hyphens:auto;-webkit-hyphens:auto}
  .table-responsive>.table>tbody>tr>td:first-child{padding-left:6px}
  .panel-body{padding:12px 8px}
  /* długie słowa/adresy nie mogą rozpychać strony */
  .container{overflow-wrap:break-word}
}