/*
Theme Name:   Alexunder Diving
Theme URI:    https://alexunderdiving.pl
Description:  Child theme of Kadence for Alexunder Diving — centrum nurkowe.
              Palette sampled from the client's logo and checked against WCAG AA.
              Structural styling lives here so the client can edit content freely
              without being able to break the layout.
Author:       s.hassona
Template:     kadence
Version:      0.1.0
Text Domain:  alexunder
Tags:         diving, one-column, custom-colors, custom-menu, block-styles
*/

/* ==========================================================================
   Design tokens

   Colours were sampled from the client's badge logo with
   `convert -colors 12 histogram:` and then contrast-checked, not eyeballed.

   The governing constraint: brand blue #16A3D9 scores only 2.9:1 on white,
   so it can never carry body text on a light background. It scores 6.4:1 on
   the ink, which is why the design leans on dark sections for brand moments
   and switches to --ax-blue-deep (6.2:1 on white) for links and buttons on
   light. Every colour pair used for text below is AA or better.
   ========================================================================== */

:root {
  --ax-ink: #0e1419;
  --ax-navy: #1d374a;
  --ax-blue: #16a3d9;
  --ax-blue-deep: #086699;
  --ax-text: #33556b;
  --ax-muted: #56737c;
  --ax-mist: #9cbbc2; /* muted text on DARK backgrounds only */
  --ax-paper: #edefef;
  --ax-paper-light: #f6f8f9;
  --ax-white: #fff;

  /* Coral CTA. #E2703A is the logo-accurate tone but only reaches 3.2:1
     against white text, so the button uses the darkened #B4551F (4.9:1) and
     the bright tone is reserved for accents on dark. */
  --ax-coral: #e2703a;
  --ax-coral-cta: #b4551f;

  --ax-font-heading: 'Sora Variable', 'Sora', system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  --ax-font-body: 'Manrope Variable', 'Manrope', system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;

  --ax-radius: 4px;
  /* Was clamp(3.5rem, 2.5rem + 4vw, 7rem) — up to 112px top *and* bottom on
     nine sections, roughly 2000px of the homepage's 7000px was padding alone.
     Generous spacing reads as considered; that much reads as empty. */
  --ax-section-y: clamp(2.75rem, 2rem + 2.4vw, 4.5rem);
  --ax-maxw: 1200px;
}

/* ==========================================================================
   Typography
   Kadence exposes its own font variables; overriding them keeps every one of
   its components in step rather than only the elements we style by hand.
   ========================================================================== */

:root {
  --global-heading-font-family: var(--ax-font-heading);
  --global-body-font-family: var(--ax-font-body);
}

body {
  font-family: var(--ax-font-body);
  font-synthesis-weight: none; /* variable font covers 100-900; never fake-bold */
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--ax-font-heading);
  font-weight: 700;
  text-wrap: balance; /* stops one orphaned word on Polish headline wraps */
}

/* Geometric faces need negative tracking as they scale up and none at text
   sizes, otherwise large headings look loose and small ones look cramped. */
h1 {
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
}
h2 {
  font-size: clamp(2.05rem, 1.5rem + 2.3vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
h3 {
  font-size: clamp(1.3rem, 1.12rem + 0.72vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
}
h4 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.3; }

/* Base was 17px, which measured small against headings this large and was
   the main reason copy felt undersized. 18px with a 1.7 measure. */
body { font-size: 1.125rem; line-height: 1.7; }

/* One lead style, used wherever a paragraph opens a section. Those were
   hand-set inline at 1.25rem and 1.125rem in different files, which is where
   the stray 18/20px values across pages came from. */
.ax-lead {
  font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--ax-ink);
  max-width: 58ch;
}
.ax-section--dark .ax-lead,
.ax-section--navy .ax-lead { color: var(--ax-white); }
.has-text-align-center.ax-lead { margin-inline: auto; }

/* ==========================================================================
   Page intro

   Every inner page opened with a bold sentence and a paragraph sitting loose
   in the top-left of an otherwise empty band. It read as a leftover blurb
   rather than as the opening of the page, and on wide screens more than half
   the width was empty next to it.

   Two columns instead: the claim on the left at display size, the supporting
   detail beside it. The hairline and the eyebrow-blue marker tie it to the
   section headings used elsewhere, so it reads as part of the same system.
   ========================================================================== */

.ax-pageintro {
  display: grid;
  /* Rows and columns want very different gaps here: the columns are two
     separate thoughts, the rows are a marker sitting on its own rule. One
     value for both left the marker floating a long way above the lede. */
  gap: 0.9rem clamp(1rem, 0.4rem + 1.8vw, 3.5rem);
  align-items: start;
  margin-block-end: clamp(2.5rem, 1.8rem + 2vw, 4rem);
  padding-block-start: 1.75rem;
  border-block-start: 1px solid rgb(29 55 74 / 14%);
}

@media (width >= 56rem) {
  .ax-pageintro { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  /* A lede with no supporting paragraph would otherwise sit in a half-width
     column with the other half empty. With only the lede, let it use the row. */
  .ax-pageintro:not(:has(p:not(.ax-lead))) { grid-template-columns: 1fr; }
  .ax-pageintro:not(:has(p:not(.ax-lead))) .ax-lead { max-width: 30ch; }
}

/* A core group block renders its children inside an inner container for some
   layout types and directly for others. Rather than depend on which, the
   wrapper is removed from layout so the paragraphs are grid items either way. */
.ax-pageintro > .wp-block-group__inner-container { display: contents; }

/* The marker sits on the rule rather than beside the text, so it reads as a
   section mark and not as a bullet. */
.ax-pageintro::before {
  content: '';
  grid-column: 1 / -1;
  width: 2.75rem;
  height: 3px;
  margin-block: -1.875rem 0.25rem;
  border-radius: 2px;
  background: var(--ax-blue-deep);
}

.ax-pageintro .ax-lead {
  max-width: 22ch;
  margin: 0;
  font-family: var(--ax-font-heading);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* The lede is already the emphasis; a bold run inside it at display size just
   looked like a rendering fault. */
.ax-pageintro .ax-lead strong { font-weight: inherit; }

.ax-pageintro p:not(.ax-lead) {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  color: var(--ax-muted);
}

.ax-pageintro p:not(.ax-lead) + p:not(.ax-lead) { margin-block-start: 0.9rem; }

/* Course pages lead with their category, which belongs above the rule. */
.ax-pageintro .ax-eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 -0.5rem;
}

p, li { text-wrap: pretty; }

/* Polish sets long compound words ("Ubezpieczenie", "niepełnosprawnością");
   allow breaks rather than let them punch out of narrow cards. */
.ax-card p,
.ax-card li { overflow-wrap: break-word; }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */

/* Kadence is a classic theme with no theme.json contentSize, so Gutenberg's
   `layout: constrained` resolves to no max-width at all — full-width sections
   rendered with their text flush against the viewport edge. Constraining the
   direct children here is what actually centres them. */
/* Kadence ships `.entry-content .alignfull { padding-left:0; padding-right:0 }`.
   That is specificity (0,0,2,0) against longhands, so a single-class
   `padding-inline` here loses and every section's text sat flush against the
   screen edge on mobile. Matching the selector weight is the fix. */
.ax-section,
.entry-content .ax-section {
  padding-block: var(--ax-section-y);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.ax-section > * {
  max-width: var(--ax-maxw);
  margin-inline: auto;
}

/* Same problem inside cover blocks (hero, media breaks). */
.wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--ax-maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* Kadence spaces the content wrapper for normal pages. The homepage opens on a
   full-bleed hero, where that shows up as a white band under the header — 112px
   of it, from a margin on .content-area plus padding on .entry-content-wrap. */
.home .content-area { margin-block-start: 0; }
.home .entry-content-wrap { padding-block-start: 0; }
.home .ax-hero { padding-block-start: 0; }

/* Inner pages have the same problem and it is more visible there, because
   .content-area carries its own paper background: the 80px margin left a band
   of the body colour between the photo header and the page, so every subpage
   opened with a seam. The spacing moves inside the wrapper, where it separates
   the content from the header instead of separating two backgrounds. */
body:not(.home) .content-area { margin-block-start: 0; }
body:not(.home) .entry-content-wrap { padding-block-start: clamp(2.5rem, 1.6rem + 2.6vw, 4.5rem); }

/* Every top-level block on these pages is a full-bleed band that supplies its
   own vertical padding, so the default block margin between them just prints
   white stripes between sections. */
.entry-content > .alignfull { margin-block: 0; }

.ax-section--dark {
  background-color: var(--ax-ink);
  background-image:
    radial-gradient(58rem 30rem at 12% -15%, rgb(22 163 217 / 13%), transparent 62%),
    radial-gradient(42rem 26rem at 92% 115%, rgb(22 163 217 / 9%), transparent 60%);
  color: var(--ax-paper);
}
.ax-section--dark h1,
.ax-section--dark h2,
.ax-section--dark h3 { color: var(--ax-white); }
.ax-section--dark a:not(.ax-btn) { color: var(--ax-blue); }

.ax-section--navy {
  background-color: var(--ax-navy);
  background-image:
    radial-gradient(46rem 22rem at 80% -30%, rgb(22 163 217 / 16%), transparent 65%);
  color: var(--ax-paper);
}

.ax-section--paper { background-color: var(--ax-paper); }

.ax-eyebrow {
  font-family: var(--ax-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ax-blue-deep);
  margin-bottom: 0.75rem;
}
.ax-section--dark .ax-eyebrow,
.ax-section--navy .ax-eyebrow { color: var(--ax-blue); }

/* ==========================================================================
   Full-bleed media sections
   The reference site leans on large photography with type laid over it; the
   scrim below guarantees text contrast no matter which photo is swapped in,
   which matters because the client will change these images himself.
   ========================================================================== */

.ax-media {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  color: var(--ax-white);
}

.ax-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    rgb(14 20 25 / 58%) 0%,
    rgb(14 20 25 / 52%) 45%,
    rgb(14 20 25 / 35%) 100%
  );
}

.ax-media--center::after {
  background: linear-gradient(
    to bottom,
    rgb(14 20 25 / 55%) 0%,
    rgb(14 20 25 / 40%) 40%,
    rgb(14 20 25 / 58%) 100%
  );
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ax-btn {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--ax-radius);
  font-family: var(--ax-font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}

/* Both variants are SOLID fills, on purpose.
 *
 * The secondary button used to be a transparent outline whose text colour
 * flipped between dark (on light sections) and white (on dark sections) by
 * context class. That is inherently fragile: the moment a section's class does
 * not match what the rule expects — an older cached stylesheet, a section that
 * gained an ax-media class, a build that shipped before the fix — the white
 * text lands on a white background and the button vanishes. It did, repeatedly.
 *
 * A solid fill removes the failure mode entirely: white text on a filled button
 * is legible on a page of any colour, with no context rule to get wrong. Coral
 * for the primary action, deep blue for the secondary — both 6:1+ on their own
 * fill, both visible on light and dark alike. */
.ax-btn--primary {
  background-color: var(--ax-coral-cta);
  border-color: var(--ax-coral-cta);
  color: var(--ax-white);
}
.ax-btn--primary:hover,
.ax-btn--primary:focus-visible {
  background-color: #9a4718;
  border-color: #9a4718;
  color: var(--ax-white);
}

.ax-btn--secondary {
  background-color: var(--ax-blue-deep);
  border-color: var(--ax-blue-deep);
  color: var(--ax-white);
}
.ax-btn--secondary:hover,
.ax-btn--secondary:focus-visible {
  background-color: var(--ax-ink);
  border-color: var(--ax-ink);
  color: var(--ax-white);
}
/* On genuinely dark sections the deep-blue fill sits close to the background,
   so there it lightens to the brand blue, which reads against dark ink. */
.ax-section--dark .ax-btn--secondary,
.ax-section--navy .ax-btn--secondary,
.ax-hero .ax-btn--secondary,
.wp-block-cover .ax-btn--secondary {
  background-color: var(--ax-blue);
  border-color: var(--ax-blue);
  color: var(--ax-ink);
}
.ax-section--dark .ax-btn--secondary:hover,
.ax-section--navy .ax-btn--secondary:hover,
.ax-hero .ax-btn--secondary:hover,
.wp-block-cover .ax-btn--secondary:hover {
  background-color: var(--ax-white);
  border-color: var(--ax-white);
  color: var(--ax-ink);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.ax-card {
  background: var(--ax-white);
  border: 1px solid rgb(29 55 74 / 12%);
  border-radius: var(--ax-radius);
  padding: 1.75rem;
  height: 100%;
}

.ax-section--dark .ax-card,
.ax-section--navy .ax-card {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 14%);
  color: var(--ax-paper);
}

.ax-card__meta {
  font-size: 0.875rem;
  color: var(--ax-muted);
}
.ax-section--dark .ax-card__meta { color: var(--ax-mist); }

/* ==========================================================================
   Price tables
   Cennik is deliberately plain semantic <table> markup: the client edits a
   cell instead of a design widget, and search engines and LLMs can read the
   prices directly rather than inferring them from a card layout.
   ========================================================================== */

/* The price/spec tables are core table blocks (so the owner edits cells like a
   spreadsheet); the ax-price-table class rides on the block's <figure> wrapper,
   which is also where the horizontal scroll now lives — the old ax-table-scroll
   wrapper div is gone. */
.ax-price-table {
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ax-price-table table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ax-price-table th,
.ax-price-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgb(29 55 74 / 12%);
  text-align: left;
}

.ax-price-table thead th {
  font-family: var(--ax-font-heading);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
  border-bottom-width: 2px;
}

.ax-price-table td:last-child,
.ax-price-table th:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.ax-price-table tbody tr:hover { background: var(--ax-paper-light); }

/* Wide tables must scroll inside their own container so the page body never
   scrolls sideways on a phone. */
.ax-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   Header — transparent over the hero, solid once scrolled
   ========================================================================== */

/* The wordmark is Kadence's own site-title element, not text baked into the
   logo image: it stays crisp at any DPI, search engines and screen readers can
   read it, and it recolours for the dark header without a second asset. The
   badge alone cannot carry the name — its lettering is arched around a circle
   and turns to mush at 54px. */
.site-branding .brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
}

.site-branding .site-title-wrap { display: block; }

/* Kadence generates `.site-branding .site-title { color: var(--global-palette3) }`
   inline. That is specificity (0,0,2,0), so a bare `.site-title` here loses to
   it however late it appears — the wordmark rendered near-black on the near-black
   header. Matching its specificity and arriving later in the cascade is what
   actually wins, without resorting to !important. */
.site-branding .site-title,
.site-branding .site-title a {
  margin: 0;
  font-family: var(--ax-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ax-white);
  text-decoration: none;
}

.site-description,
.site-branding .site-description {
  margin: 0.15rem 0 0;
  font-family: var(--ax-font-heading);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ax-blue);
}

/* ==========================================================================
   Course list — output of [alexunder_courses]

   The homepage previously showed four category headings, so a visitor had to
   click through to /kursy/ just to learn what was on offer. This puts every
   course on the page, grouped, each a link.
   ========================================================================== */

.ax-courses__group + .ax-courses__group { margin-top: 2.5rem; }

.ax-courses__cat {
  font-family: var(--ax-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ax-muted);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgb(29 55 74 / 12%);
}
.ax-section--dark .ax-courses__cat {
  color: var(--ax-mist);
  border-bottom-color: rgb(255 255 255 / 15%);
}

.ax-courses__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

/* The whole card is the link — a bigger, more obvious target than a "read
   more" and it removes a row of redundant link text from every card. */
.ax-course {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  background: var(--ax-white);
  border: 1px solid rgb(29 55 74 / 12%);
  border-radius: var(--ax-radius);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

/* Accent bar that grows on hover — cheap motion that makes the grid feel
   responsive without animating layout. */
.ax-course::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--ax-blue);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.18s ease;
}

.ax-course:hover,
.ax-course:focus-visible {
  transform: translateY(-2px);
  border-color: rgb(29 55 74 / 22%);
  box-shadow: 0 8px 24px rgb(14 20 25 / 10%);
}
.ax-course:hover::before,
.ax-course:focus-visible::before { transform: scaleY(1); }

.ax-course__name {
  font-family: var(--ax-font-heading);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  color: var(--ax-ink);
  line-height: 1.2;
}
.ax-course__lead {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ax-text);
}

/* The spec line reads as data, so it is set apart from the prose above it by a
   rule and tabular figures rather than by being merely smaller and greyer. */
.ax-course__meta {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgb(29 55 74 / 10%);
  font-family: var(--ax-font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ax-muted);
  font-variant-numeric: tabular-nums;
}
.ax-section--dark .ax-course__meta { border-top-color: rgb(255 255 255 / 14%); }

.ax-section--dark .ax-course,
.ax-section--navy .ax-course {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 14%);
}
.ax-section--dark .ax-course__name { color: var(--ax-white); }
.ax-section--dark .ax-course__lead { color: var(--ax-paper); }
.ax-section--dark .ax-course__meta { color: var(--ax-mist); }
.ax-section--dark .ax-course:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(22 163 217 / 45%);
  box-shadow: none;
}

/* ==========================================================================
   FAQ accordion

   Was raw <details>/<summary> with the browser's default disclosure triangle
   and no styling of ours at all — the single most dated thing on the page.
   ========================================================================== */

.ax-faq { display: grid; gap: 0.6rem; margin-top: 1.75rem; }

.ax-faq details,
.entry-content details.wp-block-details {
  background: var(--ax-white);
  border: 1px solid rgb(29 55 74 / 14%);
  border-radius: var(--ax-radius);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ax-faq details[open],
.entry-content details.wp-block-details[open] {
  border-color: rgb(22 163 217 / 45%);
  box-shadow: 0 6px 20px rgb(14 20 25 / 7%);
}

.ax-faq summary,
.entry-content details.wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  font-family: var(--ax-font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--ax-ink);
  list-style: none;
}

/* The default triangle has to be removed in three different ways to cover
   every engine. */
.ax-faq summary::-webkit-details-marker,
.entry-content details.wp-block-details summary::-webkit-details-marker { display: none; }
.ax-faq summary::marker,
.entry-content details.wp-block-details summary::marker { content: ''; }

.ax-faq summary:hover { color: var(--ax-blue-deep); }

/* Chevron built from two borders — no icon font, no SVG, rotates on open. */
.ax-faq summary::after,
.entry-content details.wp-block-details summary::after {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.2rem;
  border-right: 2px solid var(--ax-blue-deep);
  border-bottom: 2px solid var(--ax-blue-deep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.ax-faq details[open] summary::after,
.entry-content details.wp-block-details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.ax-faq details > p,
.entry-content details.wp-block-details > p {
  margin: 0;
  padding: 0 1.25rem 1.15rem;
  color: var(--ax-text);
  line-height: 1.65;
  max-width: 62ch;
}

/* ==========================================================================
   Services grid — replaces three bulleted lists

   A bulleted list of services reads as a document. An icon grid reads as a
   product, scans in one pass, and survives being skimmed on a phone.
   ========================================================================== */

/* The container background is the section colour, not the divider colour.
   Using the divider colour with a 1px gap draws the grid lines for free, but
   any cell left empty by wrapping — nine items never divide evenly into an
   auto-fit grid — showed up as a grey block. The dividers are drawn per item
   instead, so empty cells are invisible at every breakpoint. */
.ax-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 1px;
  background: var(--ax-ink);
  border-radius: var(--ax-radius);
  margin-top: 2rem;
}

.ax-service {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1.25rem 1.15rem;
  background: var(--ax-ink);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 10%);
}

.ax-service svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  stroke: var(--ax-blue);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ax-service__label {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ax-paper);
}
.ax-service__label small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: var(--ax-mist);
}

/* ==========================================================================
   Stat row
   ========================================================================== */

.ax-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem 1rem;
  margin-top: 2rem;
}

.ax-stat__num {
  display: block;
  font-family: var(--ax-font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  line-height: 1;
  color: var(--ax-blue);
  font-variant-numeric: tabular-nums;
}
.ax-stat__label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ax-mist);
}

/* ==========================================================================
   Closing call to action

   This section used to be a three-column grid of phone, e-mail, address,
   hours, instructor and six quick links — a full contact directory sitting
   directly on top of the footer, which carries the same phone, e-mail,
   address and link columns. Two near-identical blocks stacked.

   A closing CTA should invite the next step, not reprint the footer. So it is
   now a centred heading, one line, and two actions: call (the client's stated
   preference, and a real tap-to-dial on mobile) and see the courses. The
   reference data lives once, in the footer below.
   ========================================================================== */

.ax-section--cta { text-align: center; }

.ax-cta {
  max-width: 46rem;
  margin-inline: auto;
}
.ax-cta .ax-eyebrow { justify-content: center; }
.ax-cta h2 {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  margin-block-end: 1rem;
}
.ax-cta__lead {
  max-width: 44ch;
  margin-inline: auto;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--ax-mist);
}
.ax-cta .wp-block-buttons { margin-block-start: 2rem; }

/* ==========================================================================
   Inner-page header

   Kadence prints the page title on a flat grey band, which made every inner
   page read like a Word document rather than part of the site the homepage
   promises. Same ink as the header, so the two read as one block.
   ========================================================================== */

.entry-hero-container-inner {
  background:
    radial-gradient(50rem 24rem at 78% -40%, rgb(22 163 217 / 22%), transparent 62%),
    linear-gradient(160deg, var(--ax-ink) 0%, var(--ax-navy) 100%);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.entry-hero-container-inner .entry-title,
.entry-hero-container-inner h1 { color: var(--ax-white); }

.entry-hero-container-inner .kadence-breadcrumbs,
.entry-hero-container-inner .entry-meta,
.entry-hero-container-inner a { color: var(--ax-mist); }

.entry-hero .entry-header { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* Content sat on a white card floating on grey — visually a document. */
.content-bg,
.content-style-boxed .content-bg { background: transparent; box-shadow: none; }

/* ==========================================================================
   Imagery
   ========================================================================== */

.entry-content .wp-block-image img,
.entry-content .wp-block-gallery img {
  border-radius: var(--ax-radius);
}

.wp-block-gallery .wp-block-image {
  overflow: hidden;
  border-radius: var(--ax-radius);
}
.wp-block-gallery .wp-block-image img {
  transition: transform 0.4s ease;
}
.wp-block-gallery .wp-block-image:hover img { transform: scale(1.04); }

/* Cards that are links get the same lift as course cards. */
.ax-card { transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.ax-card:has(a:hover) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgb(14 20 25 / 10%);
  border-color: rgb(29 55 74 / 22%);
}

/* ==========================================================================
   Event listings — output of [alexunder_events]
   ========================================================================== */

.ax-events {
  display: grid;
  gap: 1rem;
  margin-block: 1.5rem;
}

.ax-event {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.25rem;
  border: 1px solid rgb(29 55 74 / 12%);
  border-radius: var(--ax-radius);
  background: var(--ax-white);
}

@media (max-width: 34em) {
  .ax-event { grid-template-columns: 1fr; gap: 0.35rem; }
}

.ax-event__when {
  font-family: var(--ax-font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ax-blue-deep);
}

.ax-event__title { margin: 0 0 0.35rem; font-size: 1.125rem; }
.ax-event__title a { text-decoration: none; }
.ax-event__excerpt { margin: 0; color: var(--ax-muted); font-size: 1rem; }

.ax-event__cost {
  margin: 0.4rem 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ax-events-empty {
  padding: 1.25rem;
  border: 1px dashed rgb(29 55 74 / 25%);
  border-radius: var(--ax-radius);
  color: var(--ax-muted);
}

.ax-section--dark .ax-event,
.ax-section--navy .ax-event {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 14%);
}
.ax-section--dark .ax-event__when { color: var(--ax-blue); }
.ax-section--dark .ax-event__excerpt { color: var(--ax-mist); }

/* ==========================================================================
   Header

   Styled here rather than through Kadence's Customizer options: the option
   schema is nested and undocumented, whereas CSS in the child theme is
   deterministic, diffable and survives a theme update.

   A solid dark header rather than transparent-over-hero. The brand is dark, so
   it reads as intentional, it keeps contrast correct on every page, and it does
   not break when the client swaps a hero photo for a pale one.
   ========================================================================== */

#masthead,
.site-header-wrap {
  background-color: var(--ax-ink);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.site-branding img,
.site-header-item .custom-logo {
  height: 54px;
  width: auto;
}

.header-navigation ul li a,
.header-navigation .menu-item > a {
  font-family: var(--ax-font-heading);
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Kadence colours the primary nav through
     .main-navigation .primary-menu-container > ul > li.menu-item > a
   which is specificity (0,0,4,3) — far above anything a `.header-navigation`
   selector can reach. Against our dark header that left every link at #33556B
   (2.3:1, failing) and the *current* item at #0E1419, i.e. invisible: on every
   page the visitor could not see where they were. Matching Kadence's selector
   exactly is what fixes it.
     --ax-paper on --ax-ink = 15.8:1, --ax-blue on --ax-ink = 6.4:1 */
.main-navigation .primary-menu-container > ul > li.menu-item > a {
  color: var(--ax-paper);
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item > a:focus-visible,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-parent > a {
  color: var(--ax-blue);
}

/* Language switcher: globe + code, set apart from the navigation links so it
   reads as a control rather than as another section of the site. */
.ax-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ax-lang__icon {
  width: 15px;
  height: 15px;
  stroke: currentcolor;
  fill: none;
  stroke-width: 1.5;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover .ax-lang {
  background: rgb(22 163 217 / 20%);
  border-color: var(--ax-blue);
}

/* Submenu ("Wyjazdy" -> Zagraniczne / Krajowe) */
.header-navigation .sub-menu {
  background-color: var(--ax-navy);
  border: 1px solid rgb(255 255 255 / 10%);
}
.header-navigation .sub-menu li a { color: var(--ax-paper); }
.header-navigation .sub-menu li a:hover {
  color: var(--ax-white);
  background-color: rgb(22 163 217 / 18%);
}

/* Mobile drawer */
.mobile-navigation ul li a { color: var(--ax-paper); }
#mobile-drawer .drawer-inner { background-color: var(--ax-ink); }

/* The homepage's page-title banner is not hidden here. Hiding a heading with
   CSS leaves it in the DOM, and the homepage ended up with two H1s — the
   meaningless "Strona główna" first and the real hero heading second. It is
   switched off properly via Kadence's _kad_post_title meta in provision.sh. */

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer,
.site-footer-wrap {
  background-color: var(--ax-ink);
  color: var(--ax-mist);
}

.site-footer a { color: var(--ax-paper); }
.site-footer a:hover { color: var(--ax-blue); }

.site-footer h2,
.site-footer h3,
.site-footer .widget-title {
  font-family: var(--ax-font-heading);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ax-white);
  margin-bottom: 1rem;
}

/* Company identification block. Polish law (art. 5 ustawy o świadczeniu usług
   drogą elektroniczną) requires the company name, address, email and NIP to be
   presented clearly and directly accessible — so it sits in the footer of every
   page, not tucked away on Kontakt. */
.ax-company {
  font-size: 0.875rem;
  line-height: 1.7;
}
.ax-company__name {
  font-family: var(--ax-font-heading);
  font-weight: 600;
  color: var(--ax-white);
}
.ax-company__legal {
  font-size: 0.8125rem;
  color: var(--ax-muted);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--ax-blue);
  outline-offset: 2px;
}
.ax-section--dark :focus-visible { outline-color: var(--ax-blue); }

.ax-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--ax-ink);
  color: var(--ax-white);
}
.ax-skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Print — course pages and the cennik get printed and handed to students
   ========================================================================== */

@media print {
  .ax-media::after { display: none; }
  .ax-section { padding-block: 1rem; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

/* ==========================================================================
   Motion — native scroll-driven animations

   animation-timeline runs on the compositor rather than the main thread, so
   this is smoother than an IntersectionObserver and needs no JavaScript at
   all. Guarded twice: @supports for browsers without it (the content simply
   appears, which is the correct fallback) and prefers-reduced-motion for
   people who have asked not to be moved.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Sections rise slightly as they enter. Applied to the children rather
       than the section itself so full-bleed backgrounds never animate — a
       moving background band looks broken, moving content looks intentional. */
    .ax-section > *,
    .ax-courses__group,
    .ax-event,
    .ax-service,
    .ax-card,
    .wp-block-image,
    .wp-block-gallery .wp-block-image {
      animation: ax-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    /* Grid children lag progressively so a row assembles rather than snapping
       in as one block. Pure CSS: a slightly later range per position. */
    .ax-courses__grid .ax-course:nth-child(2) { animation-range: entry 0% cover 36%; }
    .ax-courses__grid .ax-course:nth-child(3) { animation-range: entry 0% cover 42%; }
    .ax-courses__grid .ax-course:nth-child(4) { animation-range: entry 0% cover 48%; }
    .ax-courses__grid .ax-course:nth-child(n+5) { animation-range: entry 0% cover 54%; }
    .ax-services .ax-service:nth-child(even) { animation-range: entry 0% cover 40%; }

    /* Cover photos drift as they pass, which reads as depth without the
       jitter of JS parallax. */
    .wp-block-cover__image-background {
      animation: ax-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

@keyframes ax-rise {
  from { opacity: 0; transform: translateY(48px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes ax-drift {
  from { transform: scale(1.08) translateY(-1.5%); }
  to   { transform: scale(1.08) translateY(1.5%); }
}

/* Reading-progress bar. scroll(root) tracks the document, so this is a two
   line feature that would otherwise be a scroll listener. */
.ax-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--ax-blue), var(--ax-coral));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .ax-progress {
    animation: ax-progress linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes ax-progress { to { transform: scaleX(1); } }

/* Anchor links should not land under the sticky header. */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================================================
   Sticky header
   ========================================================================== */

#masthead,
.site-header-wrap {
  position: sticky;
  top: 0;
  z-index: 500;
  backdrop-filter: saturate(140%) blur(10px);
  /* 88%, not the 52-74% used for photo scrims: the header sits over whatever
     the page happens to be, and at 58% the navigation dropped to 3.86:1. */
  background-color: rgb(14 20 25 / 92%);
  transition: box-shadow 0.2s ease;
}

/* ==========================================================================
   Course cards — second pass

   The grid was auto-fit at 15rem, which put four specializations on a row and
   left the fifth stranded alone. Three per row makes 5 wrap as 3+2, which
   reads as a deliberate arrangement rather than a leftover.
   ========================================================================== */

.ax-courses__grid {
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0.9rem;
}
.ax-courses__grid--feature { grid-template-columns: 1fr; }

.ax-courses__cat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ax-courses__cat > span:first-child { flex: none; }

/* The rule now runs between the label and the count instead of underlining the
   whole row, which reads as a divider rather than an underline. */
.ax-courses__cat::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentcolor;
  opacity: 0.22;
}
.ax-courses__cat { border-bottom: 0; padding-bottom: 0; }

.ax-courses__count {
  flex: none;
  font-size: 0.6875rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgb(22 163 217 / 18%);
  color: var(--ax-blue);
  letter-spacing: 0.04em;
}

.ax-course {
  position: relative;
  padding: 1.6rem 1.5rem 1.35rem;
  backdrop-filter: blur(6px);
}

/* A quiet index number gives the grid a spine and makes the set feel curated
   rather than dumped. It sits behind the content, not in the reading order. */
.ax-course__index {
  position: absolute;
  top: 0.85rem;
  right: 1.1rem;
  font-family: var(--ax-font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: currentcolor;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

.ax-course__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Arrow slides in on hover — the affordance that says this whole card is a
   link, without printing "read more" ten times down the page. */
.ax-course__go {
  font-size: 1rem;
  color: var(--ax-blue);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ax-course:hover .ax-course__go,
.ax-course:focus-visible .ax-course__go {
  opacity: 1;
  transform: none;
}
.ax-course:hover .ax-course__index { opacity: 0.14; }

.ax-courses__grid--feature .ax-course__name { font-size: 1.5rem; }
.ax-courses__grid--feature .ax-course__lead { font-size: 1.0625rem; max-width: 52ch; }
.ax-courses__grid--feature .ax-course__index { font-size: 3.5rem; }

/* ==========================================================================
   Hero scroll cue
   ========================================================================== */

.ax-hero .wp-block-cover__inner-container { position: relative; }

.ax-scrollcue {
  position: absolute;
  left: 50%;
  bottom: -2.5rem;
  translate: -50% 0;
  width: 26px;
  height: 42px;
  border: 2px solid rgb(255 255 255 / 45%);
  border-radius: 999px;
}
.ax-scrollcue::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 8px;
  translate: -50% 0;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--ax-blue);
  animation: ax-cue 1.8s ease-in-out infinite;
}
@keyframes ax-cue {
  0%, 100% { opacity: 0; transform: translateY(0); }
  35%      { opacity: 1; }
  70%      { opacity: 0; transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) { .ax-scrollcue::after { animation: none; opacity: 1; } }
@media (max-width: 48em) { .ax-scrollcue { display: none; } }

/* ==========================================================================
   Mobile action bar

   On a phone the phone number is the conversion, and it was previously only
   reachable by scrolling to the very bottom.
   ========================================================================== */

.ax-actionbar { display: none; }

@media (max-width: 48em) {
  .ax-actionbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 600;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgb(255 255 255 / 12%);
    border-top: 1px solid rgb(255 255 255 / 12%);
    backdrop-filter: blur(12px);
  }
  .ax-actionbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.9rem 0.5rem;
    background: rgb(14 20 25 / 74%);
    color: var(--ax-white);
    font-family: var(--ax-font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
  }
  .ax-actionbar a.is-primary { background: var(--ax-coral-cta); }
  .ax-actionbar svg { width: 17px; height: 17px; stroke: currentcolor; fill: none; stroke-width: 1.8; }

  /* Stop the bar covering the last of the footer. */
  body { padding-bottom: 3.4rem; }
}

/* ==========================================================================
   Glass treatment on dark surfaces
   ========================================================================== */

.ax-section--dark .ax-card,
.ax-section--navy .ax-card,
.ax-service,
.ax-event {
  backdrop-filter: blur(8px) saturate(120%);
}

/* Fine noise stops large dark areas from banding on gradients and adds a
   little texture at no request cost — the mask is a data URI. */
.ax-section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.ax-section--dark { position: relative; isolation: isolate; }
.ax-section--dark > * { position: relative; z-index: 1; }

/* ==========================================================================
   Homepage gallery strip

   A bento grid rather than an even row: one large tile carries the section and
   the rest read as supporting, which is far more interesting than eight
   identical thumbnails and costs nothing extra.
   ========================================================================== */

.ax-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 11.5rem;
  gap: 0.7rem;
  margin-top: 2rem;
}

.ax-bento a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ax-radius);
  background: var(--ax-navy);
}

.ax-bento img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.ax-bento a:hover img { transform: scale(1.06); }

.ax-bento a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(14 20 25 / 55%), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ax-bento a:hover::after { opacity: 1; }

.ax-bento a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.ax-bento a:nth-child(6) { grid-column: span 2; }

@media (max-width: 62em) {
  .ax-bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 9.5rem; }
  .ax-bento a:nth-child(6) { grid-column: span 1; }
}
@media (max-width: 40em) {
  .ax-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 8rem; }
  .ax-bento a:nth-child(1) { grid-column: span 2; grid-row: span 1; }
}

/* ==========================================================================
   Link and accent contrast — systematic fix

   A full-page audit found 123 elements under AA. Nearly all traced to one
   thing: Kadence colours links with palette1 (#16A3D9), which is 2.9:1 on
   white. The brand blue is a dark-background colour and always was; on light
   the deeper blue has to carry it.

   --ax-blue-light exists because #16A3D9 also fails on the navy band (4.29:1).
   #4FC3F0 measures 6.1:1 there and 9.2:1 on the ink.
   ========================================================================== */

:root { --ax-blue-light: #4fc3f0; }

/* Light backgrounds: links take the deeper blue (6.2:1). */
/* :where() rather than a chain of :not() — :not() takes the specificity of
   its argument, so the chain scored (0,0,5,2) and beat every dark-context
   rule meant to override it, leaking the deep blue onto dark backgrounds.
   :where() contributes nothing, leaving this at (0,0,1,1). */
.entry-content a:not(:where(.ax-btn, .wp-block-button__link, .ax-course, .ax-bento a, .ax-cal__ev, .ax-actionbar a)),
.site-main a:not(:where(.ax-btn, .wp-block-button__link, .ax-course, .ax-cal__ev, .ax-actionbar a)) {
  color: var(--ax-blue-deep);
  text-underline-offset: 0.18em;
}
.entry-content a:not(.ax-btn):hover { color: var(--ax-ink); }

/* Dark backgrounds: the brand blue is correct and readable (6.4:1). */
.ax-section--dark a:not(.ax-btn):not(.wp-block-button__link),
.ax-section--navy a:not(.ax-btn):not(.wp-block-button__link),
.wp-block-cover a:not(.ax-btn):not(.wp-block-button__link) {
  color: var(--ax-blue-light);
}
.ax-section--dark a:not(.ax-btn):hover,
.ax-section--navy a:not(.ax-btn):hover { color: var(--ax-white); }

/* Eyebrows sat at 4.29:1 on navy — just under the line. */
.ax-section--dark .ax-eyebrow,
.ax-section--navy .ax-eyebrow,
.wp-block-cover .ax-eyebrow { color: var(--ax-blue-light); }

/* The muted grey is tuned for light backgrounds; on the ink it drops to
   3.65:1. The mist tone is the dark-background equivalent. */
.ax-section--dark .ax-company__legal,
.site-footer .ax-company__legal,
.ax-section--dark .ax-card__meta,
.site-footer .ax-card__meta { color: var(--ax-mist); }

.ax-course__go { color: var(--ax-blue-light); }
.ax-courses__count { color: var(--ax-blue-light); }
.ax-service svg { stroke: var(--ax-blue-light); }
.ax-stat__num { color: var(--ax-blue-light); }
.ax-scrollcue::after { background: var(--ax-blue-light); }

/* The Events Calendar ships its own buttons: white on #16A3D9 (2.9:1) and
   blue on white. Both fail, and both appear on the calendar page. */
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn,
.tribe-events .tribe-events-c-search__button,
.tribe-common .tribe-common-c-btn-border,
.tribe-events button.tribe-events-c-top-bar__today-button {
  background-color: var(--ax-blue-deep) !important;
  border-color: var(--ax-blue-deep) !important;
  color: var(--ax-white) !important;
}
.tribe-common .tribe-common-c-btn-border-small,
.tribe-common .tribe-events-c-subscribe-dropdown__button-text,
.tribe-common .tribe-events-c-subscribe-dropdown__button {
  color: var(--ax-blue-deep) !important;
}
.tribe-common a { color: var(--ax-blue-deep); }

/* An explicit colour under the gradient. Without it the computed background is
   transparent, so white heading text sits on whatever is behind — fine while
   the gradient paints, invisible if it ever does not. */
.entry-hero-container-inner { background-color: var(--ax-ink); }

/* The subscribe control matched two rules at once and ended up with its text
   and background both set to the deep blue. */
.tribe-common .tribe-events-c-subscribe-dropdown__button,
.tribe-common .tribe-events-c-subscribe-dropdown__button-text {
  background-color: transparent !important;
  color: var(--ax-blue-deep) !important;
}

/* The light-background link rule carries four :not() arguments, which makes it
   specificity (0,0,5,1) — higher than the dark-section rule it was meant to
   defer to, so the deep blue leaked onto dark backgrounds at 2.98:1. Scoping
   the dark rules the same way puts them back in front. */
.entry-content .ax-section--dark a:not(.ax-btn):not(.wp-block-button__link):not(.ax-course),
.entry-content .ax-section--navy a:not(.ax-btn):not(.wp-block-button__link):not(.ax-course),
.entry-content .wp-block-cover a:not(.ax-btn):not(.wp-block-button__link):not(.ax-course) {
  color: var(--ax-blue-light);
}

/* ==========================================================================
   Inner pages — richer treatment

   They were plain white below a dark header, which read as a document rather
   than as part of the site. A cool wash at the top, the same noise the dark
   bands use, and a hairline under the header give them atmosphere without
   turning them dark and losing the readability of long copy.
   ========================================================================== */

/* background-color set as its own declaration rather than folded into the
   shorthand: a var() in the shorthand's colour slot does not reliably resolve
   to a computed background-color, which leaves the element painting a
   translucent gradient over whatever happens to be behind it. */
body:not(.home) .content-area {
  position: relative;
  background-color: var(--ax-paper-light);
  background-image: linear-gradient(180deg, rgb(29 55 74 / 6%) 0%, rgb(29 55 74 / 0%) 34rem);
}

/* Header carries the same noise as the dark sections so the two read as one
   material rather than as a gradient stuck on top of a page. */
.entry-hero-container-inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.entry-hero-container-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

/* A thin brand rule where the header meets the page. */
.entry-hero-container-inner {
  border-bottom: 1px solid transparent;
  box-shadow: inset 0 -2px 0 0 rgb(22 163 217 / 55%);
}

/* Cards on light pages: less border, more lift, so they read as objects
   rather than as boxes drawn with a pen. */
body:not(.home) .ax-card,
body:not(.home) .ax-price-table {
  border-color: rgb(29 55 74 / 9%);
}
body:not(.home) .ax-card {
  background: var(--ax-white);
  box-shadow: 0 1px 2px rgb(14 20 25 / 4%), 0 8px 24px rgb(14 20 25 / 5%);
}

/* Tables get a tinted header row instead of a bare rule. */
.ax-price-table thead th {
  background: rgb(29 55 74 / 5%);
  color: var(--ax-text);
}
.ax-price-table tbody tr:nth-child(even) { background: rgb(29 55 74 / 2.5%); }

/* ==========================================================================
   Fixes for issues found by looking at the page rather than at a number
   ========================================================================== */

/* THE BAD ONE. .ax-lead sets the ink colour for light sections, and covers
   were never excluded — so the hero subtitle rendered dark ink on a dark
   photo at 1.00:1. Every automated check passed because the auditor skipped
   anything over a cover. */
.wp-block-cover .ax-lead,
.wp-block-cover p,
.wp-block-cover li,
.ax-hero .ax-lead {
  color: var(--ax-white);
}
.wp-block-cover .ax-lead strong,
.wp-block-cover p strong { color: var(--ax-white); }

/* Eyebrows were 13px — too small to function as the section label they are.
   Also given a rule so they read as a marker rather than as stray small text. */
.ax-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
}
.ax-eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  background: currentcolor;
  flex: none;
}
.has-text-align-center.ax-eyebrow { justify-content: center; }

/* The ghost index numbers read as a rendering fault rather than as a design
   device. Made small, solid and legible — a label, not a watermark. */
.ax-course__index {
  position: static;
  display: inline-block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 1;
  color: var(--ax-blue-light);
}
.ax-course:hover .ax-course__index { opacity: 1; color: var(--ax-white); }
.ax-courses__grid--feature .ax-course__index { font-size: 0.875rem; }

/* Service and meta text were sized as captions when they carry real content. */
.ax-service__label { font-size: 1.0625rem; line-height: 1.4; }
.ax-service__label small { font-size: 0.9375rem; margin-top: 0.25rem; }
.ax-service svg { width: 26px; height: 26px; }
.ax-course__meta { font-size: 0.8125rem; letter-spacing: 0.04em; }
.ax-courses__cat { font-size: 0.9375rem; letter-spacing: 0.14em; }
.ax-stat__label { font-size: 0.9375rem; }
.ax-company { font-size: 0.9375rem; }
.ax-company__legal { font-size: 0.875rem; }

/* The last full-bleed band should meet the footer. A page-level background
   was showing through as a white strip between them. */
.home .content-area,
.home .site-main,
.home .entry-content-wrap,
.home article.entry { padding-bottom: 0; margin-bottom: 0; background: transparent; }
.home .entry-content > .alignfull:last-child { margin-bottom: 0; }

/* ==========================================================================
   Footer

   Was a centred stack of placeholder lines that read as an afterthought.
   Four columns, left aligned, with the legally required company data given
   its own place rather than buried mid-paragraph.
   ========================================================================== */

.site-footer .footer-html-inner { max-width: var(--ax-maxw); margin-inline: auto; }

.ax-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 3rem 2rem;
  text-align: left;
  padding-block: 2.75rem 2.25rem;
  /* A hairline plus a faint glow lifts the footer off the CTA band above it,
     which is the same dark ink, so the two would otherwise merge. */
  border-block-start: 1px solid rgb(255 255 255 / 10%);
}
.ax-footer::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ax-blue) 20%, var(--ax-blue) 80%, transparent);
  opacity: 0.5;
}
@media (max-width: 62em) { .ax-footer { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; } }
@media (max-width: 34em) { .ax-footer { grid-template-columns: 1fr; gap: 2rem; } }

.ax-footer p { margin: 0 0 0.5rem; }

.ax-footer__brand { max-width: 24rem; }
.ax-footer__name {
  font-family: var(--ax-font-heading);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--ax-white);
  margin-bottom: 0.35rem;
}
.ax-footer__tag { color: var(--ax-blue-light); font-size: 0.9375rem; font-weight: 500; }
.ax-footer__pitch {
  margin-top: 0.9rem !important;
  color: var(--ax-mist);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.ax-footer__legal {
  margin-top: 1.1rem !important;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 8%);
  color: var(--ax-mist);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.ax-footer__h {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ax-font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ax-white);
  margin-bottom: 1.1rem !important;
}
/* Same marker the section eyebrows use, so the footer reads as part of the
   same system rather than as a plain link list bolted on the end. */
.ax-footer__h::before {
  content: '';
  width: 1.1rem;
  height: 2px;
  flex: none;
  background: var(--ax-blue);
}

.ax-footer__col a,
.ax-footer a {
  color: var(--ax-paper);
  text-decoration: none;
  font-size: 0.9375rem;
}
.ax-footer__col p { line-height: 1.4; }
.ax-footer a:hover { color: var(--ax-blue-light); text-decoration: underline; }

/* The phone is the action; give it weight over the rest of the column. */
.ax-footer__phone a {
  font-family: var(--ax-font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ax-white);
}
.ax-footer__phone a:hover { color: var(--ax-blue-light); }

.ax-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  max-width: var(--ax-maxw);
  margin: 0 auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 12%);
  text-align: left;
  color: var(--ax-mist);
  font-size: 0.875rem;
}

/* The privacy policy has to be reachable from every page, and it was not:
   Kadence's footer builder has no navigation element enabled, so the footer
   menu was created, assigned to the "footer" location and never rendered.
   Putting the links in the footer HTML block — which does render — is both
   simpler than configuring the builder and impossible to switch off by
   accident. */
.ax-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
}

.ax-footer__links a {
  color: var(--ax-mist);
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 22%);
}

.ax-footer__links a:hover,
.ax-footer__links a:focus-visible {
  color: var(--ax-white);
  border-bottom-color: currentcolor;
}

/* ==========================================================================
   Inner-page headers carry a photograph

   A flat gradient band was the same on all fifteen pages, so every subpage
   opened identically and none of them felt like part of a site with pictures
   in it. Each now gets a relevant image behind the title, darkened enough to
   keep the heading well past AA.
   ========================================================================== */

.entry-hero-container-inner {
  background-size: cover;
  background-position: center 40%;
}

body:not(.home) .entry-hero-container-inner {
  background-image:
    linear-gradient(180deg, rgb(14 20 25 / 58%), rgb(14 20 25 / 74%)),
    url('/wp-content/uploads/2026/07/nurkowie-sciana-skalna-adriatyk.jpg');
}

.ax-page-o-nas .entry-hero-container-inner,
.ax-page-about-us .entry-hero-container-inner {
  background-image:
    linear-gradient(180deg, rgb(14 20 25 / 58%), rgb(14 20 25 / 74%)),
    url('/wp-content/uploads/2026/07/nurek-suchy-skafander-rafa.jpg');
}
.ax-page-kursy .entry-hero-container-inner,
.ax-page-courses .entry-hero-container-inner {
  background-image:
    linear-gradient(180deg, rgb(14 20 25 / 58%), rgb(14 20 25 / 74%)),
    url('/wp-content/uploads/2026/07/nurek-nad-laka-podwodna.jpg');
}
.ax-page-galeria .entry-hero-container-inner {
  background-image:
    linear-gradient(180deg, rgb(14 20 25 / 52%), rgb(14 20 25 / 74%)),
    url('/wp-content/uploads/2026/07/konik-morski.jpg');
}
.ax-page-krajowe .entry-hero-container-inner,
.ax-page-kalendarz .entry-hero-container-inner {
  background-image:
    linear-gradient(180deg, rgb(14 20 25 / 58%), rgb(14 20 25 / 74%)),
    url('/wp-content/uploads/2026/07/szczupak-w-roslinnosci-jezioro.jpg');
}
.ax-page-zagraniczne .entry-hero-container-inner,
.ax-page-trips .entry-hero-container-inner {
  background-image:
    linear-gradient(180deg, rgb(14 20 25 / 58%), rgb(14 20 25 / 74%)),
    url('/wp-content/uploads/2026/07/lawica-dorad.jpg');
}
.ax-page-cennik .entry-hero-container-inner,
.ax-page-price-list .entry-hero-container-inner {
  background-image:
    linear-gradient(180deg, rgb(14 20 25 / 58%), rgb(14 20 25 / 74%)),
    url('/wp-content/uploads/2026/07/murena-w-szczelinie.jpg');
}
.ax-page-kontakt .entry-hero-container-inner,
.ax-page-contact .entry-hero-container-inner {
  background-image:
    linear-gradient(180deg, rgb(14 20 25 / 58%), rgb(14 20 25 / 74%)),
    url('/wp-content/uploads/2026/07/dwa-sumy.jpg');
}

/* Taller so the photograph reads as an image rather than as a texture. */
body:not(.home) .entry-hero .entry-header {
  padding-block: clamp(4rem, 3rem + 5vw, 8rem);
}

/* ==========================================================================
   Contact page

   The page was label-and-value pairs written as <strong> plus <br> inside plain
   paragraphs, in two ragged columns. Nothing lined up, the phone number — the
   thing the page exists to give you — sat mid-paragraph in body text, and the
   legally required company block looked like an afterthought.

   Everything here is core blocks with class names rather than a raw HTML
   block, because the client edits these values himself and the visual editor
   has to keep working.
   ========================================================================== */

.ax-contactcard {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  background: #fff;
  border: 1px solid rgb(29 55 74 / 10%);
  border-radius: var(--ax-radius);
  box-shadow: 0 1px 2px rgb(14 20 25 / 4%), 0 12px 28px -18px rgb(14 20 25 / 28%);
}

.ax-contactcard__row {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.85rem;
  border-block-start: 1px solid rgb(29 55 74 / 10%);
  margin: 0 !important;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.ax-contactcard__row:first-child { border-block-start: 0; padding-block-start: 0; }

.ax-contactcard__label {
  font-family: var(--ax-font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ax-muted);
}

/* The phone number is the primary action on this page, so it is sized like one
   and stays a tap target on mobile. */
.ax-contactcard__row--phone { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.ax-contactcard__row--phone a {
  font-family: var(--ax-font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ax-blue-deep);
  text-decoration: none;
}
.ax-contactcard__row--phone a:hover,
.ax-contactcard__row--phone a:focus-visible { text-decoration: underline; }

.ax-infocards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-block: 2rem;
}

.ax-infocard {
  padding: 1.4rem 1.35rem;
  background: rgb(255 255 255 / 62%);
  border: 1px solid rgb(29 55 74 / 10%);
  border-radius: var(--ax-radius);
}
.ax-infocard > *:first-child { margin-block-start: 0; }
.ax-infocard > *:last-child { margin-block-end: 0; }
.ax-infocard h3 {
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  margin-block-end: 0.6rem;
}
.ax-infocard p { font-size: 0.9688rem; line-height: 1.6; }

/* An interactive OpenStreetMap embed, driven by the coordinates on Ustawienia →
   Dane firmy so the owner can place the pin himself. OSM's embed sets no cookies
   and no tracking, so — unlike a Google Maps iframe — it needs no consent banner. */
.ax-map {
  display: block;
  margin: 0;
  border-radius: var(--ax-radius);
  overflow: hidden;
  border: 1px solid rgb(29 55 74 / 12%);
  background: var(--ax-paper);
}
.ax-map img,
.ax-map__frame {
  display: block;
  width: 100%;
  height: auto;
}
.ax-map__frame {
  aspect-ratio: 16 / 9;
  border: 0;
}
.ax-map figcaption {
  padding: 0.85rem 1.1rem;
  font-size: 0.9062rem;
  color: var(--ax-muted);
  background: #fff;
  border-block-start: 1px solid rgb(29 55 74 / 10%);
}

/* ==========================================================================
   Gallery lightbox

   Paired with the script in functions.php. The overlay sits above everything,
   darkens the page and shows the full-resolution image centred, with the alt
   text as a caption. No library — the whole thing is a few lines of vanilla JS.
   ========================================================================== */

.ax-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgb(8 12 16 / 92%);
  backdrop-filter: blur(4px);
  animation: ax-lightbox-in 0.18s ease-out;
}
.ax-lightbox[hidden] { display: none; }

@keyframes ax-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ax-lightbox figure {
  margin: 0;
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ax-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--ax-radius);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 70%);
}

.ax-lightbox figcaption {
  color: var(--ax-mist);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
}

.ax-lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
/* The cross is drawn from two centred bars rather than a "×" glyph. The glyph
   carries its own font metrics and sat noticeably high and right of the
   circle's centre; two bars pinned to the middle cannot be off-centre. */
.ax-lightbox__close::before,
.ax-lightbox__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.15rem;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.ax-lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ax-lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ax-lightbox__close:hover,
.ax-lightbox__close:focus-visible { background: rgb(255 255 255 / 22%); }

@media (prefers-reduced-motion: reduce) {
  .ax-lightbox { animation: none; }
}

/* ==========================================================================
   Browsable month calendar ([alexunder_calendar])

   Rendered by the script in functions.php from events embedded in the page, so
   paging between months is instant and needs no server — which is the reason it
   exists, since the plugin's own month view cannot run on a static host.
   ========================================================================== */

.ax-cal {
  margin-block: 1.5rem 2.5rem;
  border: 1px solid rgb(29 55 74 / 12%);
  border-radius: var(--ax-radius);
  overflow: hidden;
  background: #fff;
}

.ax-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--ax-ink);
}
.ax-cal__title {
  margin: 0;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  color: var(--ax-white);
  text-align: center;
  flex: 1;
}
.ax-cal__nav {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.ax-cal__nav:hover,
.ax-cal__nav:focus-visible { background: rgb(255 255 255 / 20%); }
/* Chevron drawn from two borders, no icon font. */
.ax-cal__nav span {
  width: 0.6rem;
  height: 0.6rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  margin-left: 3px;
}
.ax-cal__nav--next span { transform: rotate(-135deg); margin-left: -3px; }

.ax-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: rgb(29 55 74 / 10%);
}
.ax-cal__dow {
  padding: 0.6rem 0.5rem;
  background: var(--ax-paper-light);
  font-family: var(--ax-font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ax-muted);
  text-align: center;
}
.ax-cal__cell {
  position: relative;
  min-height: 6.5rem;
  padding: 0.4rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow: hidden;
}
.ax-cal__cell.is-outside { background: var(--ax-paper-light); }
.ax-cal__cell.is-outside .ax-cal__num { color: rgb(86 115 124 / 45%); }
.ax-cal__num {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ax-muted);
  align-self: flex-end;
  line-height: 1;
}
.ax-cal__cell.is-today .ax-cal__num {
  color: #fff;
  background: var(--ax-blue-deep);
  border-radius: 999px;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
}

.ax-cal__ev {
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.2rem 0.4rem;
  border-radius: 5px;
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ax-cal__ev.is-cont { min-height: 0.5rem; opacity: 0.55; }
.ax-cal__ev:hover { filter: brightness(1.08); text-decoration: none; }
.ax-cal__ev--sea { background: var(--ax-blue-deep); }
.ax-cal__ev--lake { background: #2f6d5e; }
.ax-cal__ev--course { background: var(--ax-coral-cta); }

.ax-cal__empty {
  margin: 0;
  padding: 1.25rem;
  text-align: center;
  color: var(--ax-muted);
  font-size: 0.9375rem;
}

@media (max-width: 40em) {
  .ax-cal__dow { padding: 0.5rem 0.1rem; font-size: 0.6rem; letter-spacing: 0; }
  .ax-cal__cell { min-height: 4.25rem; padding: 0.3rem; }
  .ax-cal__ev { font-size: 0; padding: 0; height: 0.4rem; border-radius: 3px; margin-top: 0.15rem; }
  .ax-cal__ev.is-cont { display: none; }
}

/* ==========================================================================
   404

   Replaces Kadence's default English-plus-search-box error page. No search:
   the static export has nothing to search and the form would submit to a dead
   handler. Just the way back.
   ========================================================================== */

.ax-404 {
  max-width: 40rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 2rem + 6vw, 7rem);
  text-align: center;
}
.ax-404__code {
  margin: 0;
  font-family: var(--ax-font-heading);
  font-size: clamp(4rem, 3rem + 8vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ax-blue);
  opacity: 0.25;
}
.ax-404__title {
  margin: 0.5rem 0 0;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
}
.ax-404__body {
  margin: 1rem auto 2rem;
  max-width: 34ch;
  color: var(--ax-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.ax-404__actions { margin: 0 0 2.5rem; }
.ax-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.5rem;
  margin: 0;
  padding: 1.5rem 0 0;
  list-style: none;
  border-top: 1px solid rgb(29 55 74 / 12%);
}
.ax-404__links a {
  color: var(--ax-blue-deep);
  text-decoration: none;
  font-weight: 500;
}
.ax-404__links a:hover { text-decoration: underline; }

/* A quiet inline note — used on the courses hub to explain the Advanced Open
   Water Diver prerequisite that Deep and Rescue reference but no single course
   sells. Reads as guidance, not as body copy. */
.entry-content .ax-note {
  margin-block: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--ax-blue-deep);
  background: rgb(22 163 217 / 7%);
  border-radius: 0 var(--ax-radius) var(--ax-radius) 0;
  font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--ax-text);
}