/* Bootstrap Icons are loaded via HTML vendor link; removed CSS @import to avoid duplicate load */

:root {
    --uwagi: rgb(32, 24, 32);
    --klasa7: #ffa500;
    --klasa2gim: #2e7d32; /* emerald green as default for II GIM */
    --klasa6old:#34516e;
    --klasa6: #45658f;
    --box_color:#000;
    --a_link: rgb(132, 173, 93);
    --a6_link_hover_background: #c8daec;
    --a7_link_hover_background: #ffebda;
    --accent: #e08a00; /* unify with project accent */
    --hair: #e6e9ee;
    font-size: 100%;
}

body {font-family:Helvetica, sans-serif;}
/* Normalize sizing and remove default margins to avoid subtle overflow */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
/* Clamp any accidental overflow on tiny devices */
html, body { max-width: 100%; overflow-x: hidden; }
.lz-title {
    font-size: 2rem;
    line-height: 2rem;
    margin: 1.5rem 0 1.5rem; /* equal top/bottom spacing */
    text-align: center;
    color: #2d435e;
    font-weight: 400 !important; /* ensure not bold */
}
.center {
    text-align: center;
}

/* Utility */
.nowrap { white-space: nowrap; }

/* Exceptional colors */

.icon6_color {color:var(--klasa6)}
.icon7_color {color:var(--klasa7)}
.icon2g_color {color:var(--klasa2gim)}
/* Exceptional font-size for bootstrap icons */
.fs_3rem {
    font-size: 2.0rem; /* further reduced from 2.5rem */
    padding:0;

}


a {
    text-decoration: none;
    color: var(--a_link);
    border: 0;
    padding: 0;
}

.box6 a:hover,
.box7 a:hover {
  background: transparent;
  padding: 0;
  border-radius: 0;
  text-decoration: none; /* no underline for button look */
  color: inherit;
}

/* Delicate ghost buttons for links inside cards */
.box .box_level_3 a,
.box .box_level_4 a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.26rem 0.5rem; /* slightly tighter */
  border: 1px solid var(--hair);
  border-radius: 8px;
  line-height: 1.2;
  max-width: 100%;
  white-space: normal;           /* allow wrapping */
  overflow-wrap: anywhere;       /* break long words if needed */
  color: inherit;                /* match surrounding text color */
}
.box .box_level_3 a:link,
.box .box_level_3 a:visited,
.box .box_level_3 a:hover,
.box .box_level_3 a:active,
.box .box_level_4 a:link,
.box .box_level_4 a:visited,
.box .box_level_4 a:hover,
.box .box_level_4 a:active {
  color: inherit;
}
.box6 .box_level_3 a:hover,
.box6 .box_level_4 a:hover { 
  border-color: var(--klasa6);
  background: rgba(69, 101, 143, 0.08); /* subtle tint for klasa6 */
}
.box7 .box_level_3 a:hover,
.box7 .box_level_4 a:hover { 
  border-color: var(--klasa7);
  background: rgba(255, 165, 0, 0.12);  /* subtle tint for klasa7 */
}
.box2gim .box_level_3 a:hover,
.box2gim .box_level_4 a:hover {
  border-color: var(--klasa2gim);
  background: rgba(46, 125, 50, 0.10);
}
.box .box_level_3 a:focus-visible,
.box .box_level_4 a:focus-visible {
  outline: 2px solid var(--hair);
  outline-offset: 2px;
}

header {
    display: inline-block;
    width: 100%;
}

.uwagi {
    display: inline-block;
    padding: 1rem;
    margin: 2rem 0;
    width: 89%;
    border: 1px dotted var(--uwagi);
    border-radius: 10px;
}

.boxes {
    /* Stack row groups vertically */
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    
}

/* Each row (e.g., KLASA VI, KLASA VII) lays out cards responsively */
.box-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); /* was 16rem earlier */
  gap: 1rem; /* slightly tighter */
  align-items: stretch;
  justify-content: center; /* center columns when row not full */
  justify-items: center;   /* center cards within their columns */
  margin-inline: auto;     /* center the grid container itself */
}
/* Vertical spacing between stacked rows */
.box-row + .box-row { margin-top: 1.25rem; }
@media (min-width: 1400px) {
  /* Prefer exactly five per row on big screens */
  .box-row { grid-template-columns: repeat(5, 15rem); justify-content: center; }
  /* Keep overall row width snug so it stays visually centered */
  .row6, .row7, .row2gim { max-width: calc(5 * 15rem + 4 * 1.25rem); margin-inline: auto; }
}
/* On very small screens force single-column and allow wrapping */
@media (max-width: 380px) {
  .box-row { grid-template-columns: 1fr; }
  .box { max-width: 100%; }
  .nowrap { white-space: normal; }
}

.box {
    /* Card look */
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 20rem;
    font-size: 0.78rem;
   
    color: var(--box_color);
    text-align: center;
    line-height: 1.4rem; /* slightly tighter */
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: border-color 0.15s ease; /* no lift effect for the whole card */
    overflow: hidden;
}
/* No hover effects for the whole card (links inside handle hover) */
.box:hover { border-color: var(--hair); box-shadow: 0 2px 6px rgba(0,0,0,0.06); transform: none; }

.box>div {padding: 0.45rem 0;}

.box_h1 {
  color: inherit;
  font-weight: 600;
  letter-spacing: 1px;
}

.box_h2 { font-weight: bolder; font-size: 0.92em; }

/* Allow wrapping for long labels like 'Zadania przygotowawcze' */
.box .box_level_3 .box_h2 { white-space: normal; }
.box .box_level_4 .box_h2 { white-space: normal; }

/* Ensure the third row in each box has the same height and centered content */
.box .box_level_3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem; /* allow content to grow */
}
/* Keep icon rows comfortably tall */
.box .box_level_3.fs_3rem { min-height: 2.8rem; }

/* Klasa 6 */
.box6 {
    border: 1px solid var(--hair);
}

.box6 .box_level_1 {
    background: transparent;
    color: var(--klasa6);
    border-top: 3px solid var(--klasa6);
    border-bottom: 1px solid var(--hair);
}

.box6 .box_level_2 {
    padding: 1rem 0;
    border-bottom: 1px solid var(--hair);
}

.box6 .box_level_3 {
    border-bottom: 1px solid var(--hair);
}

.box6 .box_level_4 {
    border: 0 1px solid var(--hair);
}


/* Klasa 7 */
.box7 {
    border: 1px solid var(--hair);
}

.box7 .box_level_1 {
    background: transparent;
    color: var(--klasa7);
    border-top: 3px solid var(--klasa7);
    border-bottom: 1px solid var(--hair);
}

.box7 .box_level_2 {
    border-bottom: 1px solid var(--hair);
}

.box7 .box_level_3 {
    border-bottom: 1px solid var(--hair);
}

.box7 .box_level_4 {
    border: 0 1px solid var(--hair);
}

/* Klasa II GIM */
.box2gim {
    border: 1px solid var(--hair);
}

.box2gim .box_level_1 {
    background: transparent;
    color: var(--klasa2gim);
    border-top: 3px solid var(--klasa2gim);
    border-bottom: 1px solid var(--hair);
}

.box2gim .box_level_2 { border-bottom: 1px solid var(--hair); }
.box2gim .box_level_3 { border-bottom: 1px solid var(--hair); }
.box2gim .box_level_4 { border: 0 1px solid var(--hair); }

/* Theme variants for II GIM (override accent via CSS variable on container) */
.row2gim.theme-green { --klasa2gim: #2e7d32; }  /* emerald */
.row2gim.theme-red   { --klasa2gim: #a11c18; }  /* dark red (matches PDF hover) */

/* Match hover tint to selected theme */
.row2gim.theme-green .box2gim .box_level_3 a:hover,
.row2gim.theme-green .box2gim .box_level_4 a:hover { background: rgba(46, 125, 50, 0.10); }
.row2gim.theme-red .box2gim .box_level_3 a:hover,
.row2gim.theme-red .box2gim .box_level_4 a:hover { background: rgba(161, 28, 24, 0.10); }

/* PDF badge for links that target PDFs (works even after viewer rewrite) */
.box .box_level_3 a[href*=".pdf"]::before,
.box .box_level_4 a[href*=".pdf"]::before,
.box .box_level_3 a[href*="viewer/web/viewer.html?file="]::before,
.box .box_level_4 a[href*="viewer/web/viewer.html?file="]::before {
  content: "\f756"; /* bi-filetype-pdf */
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
 
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  vertical-align: -0.1em;
  margin-right: 0.35rem;
  color: #b4231e;
}
/* Slightly stronger color on hover for feedback */
.box .box_level_3 a[href*=".pdf"]:hover::before,
.box .box_level_4 a[href*=".pdf"]:hover::before,
.box .box_level_3 a[href*="viewer/web/viewer.html?file="]:hover::before,
.box .box_level_4 a[href*="viewer/web/viewer.html?file="]:hover::before {
  color: #a11c18;
}

/* PDF text color feedback on hover/focus for card links */
.box .box_level_3 a[href*=".pdf"]:hover,
.box .box_level_3 a[href*=".pdf"]:focus-visible,
.box .box_level_4 a[href*=".pdf"]:hover,
.box .box_level_4 a[href*=".pdf"]:focus-visible,
.box .box_level_3 a[href*="viewer/web/viewer.html?file="]:hover,
.box .box_level_3 a[href*="viewer/web/viewer.html?file="]:focus-visible,
.box .box_level_4 a[href*="viewer/web/viewer.html?file="]:hover,
.box .box_level_4 a[href*="viewer/web/viewer.html?file="]:focus-visible {
  color: #a11c18; /* match icon hover color */
}

/* -------------------------------------------------
   Unavailable state (global + per-link)
   - Global: add 'all-unavailable' to .boxes
   - Per-link: add 'is-unavailable' to an <a>
-------------------------------------------------- */
.box .box_level_3 a.is-unavailable,
.box .box_level_4 a.is-unavailable,
.boxes.all-unavailable .box .box_level_3 a,
.boxes.all-unavailable .box .box_level_4 a {
  color: #9aa3ae;
  border-color: var(--hair);
  background: #f7f8fa;
  cursor: not-allowed;
  pointer-events: none; /* disable clicks */
  text-decoration: none;
}

/* Neutralize hover/focus while unavailable */
.box .box_level_3 a.is-unavailable:hover,
.box .box_level_4 a.is-unavailable:hover,
.box .box_level_3 a.is-unavailable:focus-visible,
.box .box_level_4 a.is-unavailable:focus-visible,
.boxes.all-unavailable .box .box_level_3 a:hover,
.boxes.all-unavailable .box .box_level_4 a:hover,
.boxes.all-unavailable .box .box_level_3 a:focus-visible,
.boxes.all-unavailable .box .box_level_4 a:focus-visible {
  color: #9aa3ae;
  border-color: var(--hair);
  background: #f7f8fa;
}

/* Soften the PDF badge when unavailable */
.box .box_level_3 a.is-unavailable::before,
.box .box_level_4 a.is-unavailable::before,
.boxes.all-unavailable .box .box_level_3 a::before,
.boxes.all-unavailable .box .box_level_4 a::before {
  color: #c3c9d1;
}

/* -------------------------------------------------
   Enable specific links even when globally disabled
   - Add class 'is-available' to that <a>
-------------------------------------------------- */
.boxes.all-unavailable .box .box_level_3 a.is-available,
.boxes.all-unavailable .box .box_level_4 a.is-available {
  pointer-events: auto;
  cursor: pointer;
  color: inherit;
  background: transparent;
}

.boxes.all-unavailable .box .box_level_3 a.is-available:hover,
.boxes.all-unavailable .box .box_level_4 a.is-available:hover,
.boxes.all-unavailable .box .box_level_3 a.is-available:focus-visible,
.boxes.all-unavailable .box .box_level_4 a.is-available:focus-visible {
  color: inherit;            /* allow normal accent rules to apply */
  background: transparent;   /* let .box6/.box7 hover tints show */
}

/* Restore PDF badge colors for available links */
.boxes.all-unavailable .box .box_level_3 a.is-available::before,
.boxes.all-unavailable .box .box_level_4 a.is-available::before {
  color: #b4231e;
}
.boxes.all-unavailable .box .box_level_3 a.is-available:hover::before,
.boxes.all-unavailable .box .box_level_4 a.is-available:hover::before {
  color: #a11c18;
}




/* Header styles - subtle and clean */
.page-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem 1rem;
  background: #ffffff;
  border-bottom: 2px solid #e6e9ee;
}

.page-title {
  color: #34516e;
  font-size: 1.6rem;
  font-weight: 600;
  
  letter-spacing: 0.3px;
  margin:1rem auto;
}

.page-title a {
  color: #1f3b57;
  text-decoration: none;
  display: block;
  width: 10rem;

  /* background: #eef3fb;
  border: 1px solid #cfd8e3;
  border-radius: 4px; */
  padding: 0.5rem;
  font-weight: 600;
  /* line-height: 1.2; */
  /* min-height: 2.2rem; */
  text-align: center;
  font-size: 0.95rem;
}
.page-title a:hover,
.page-title a:focus-visible {
  background: #e6eef8;
  border-color: #b8c5d6;
  text-decoration: none;
  color: #1f3b57;
}
  .page-subtitle {
  background: transparent;
  color: #34516e;
  padding: 0;
  border-radius: 0;
  font-size: 1.15rem;
  font-weight: 600;
  display: block;
  margin: 0.25rem 0 0.75rem;
  border: none;
}