/*
**  Kippis - modern look: clean airy layout + liquid-glass accents.
**  Always loaded (see kippis_enqueue_scripts in functions.php); scoped to body.kippis-modern (kippis_body_classes).
**  Accent colours and the cover image come from Theme Options (kippis_echo_color_vars). Fonts are not overridden.
*/
body.kippis-modern {
  --h-accent:  var(--k-menu-top);
  --h-accent2: var(--k-widget-title-bg);
  --h-text:    var(--k-modern-text, #1f2421);
  --h-muted:   color-mix(in srgb, var(--h-text) 66%, var(--h-bg));
  --h-line:    color-mix(in srgb, var(--h-text) 9%, transparent);
  --h-bg:      var(--k-modern-bg, #f6f7f2);
  --h-glass:   #ffffff;   /* Base colour of the glass; dark backgrounds switch it (see .kippis-dark). */
  --h-card-a:  72%;       /* How solid the post cards are. Changed by the Glass effect option. */
  --h-widget-a: 66%;
  --h-haze:    1;         /* Strength of the colour haze behind the glass. */
  --h-radius:  20px;
  --h-radius-sm: 12px;
  --h-gap:     28px;
  --h-blur:    20px;
  --h-rim:     inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55);
  --h-shadow:  0 1px 2px rgba(25,35,20,.05), 0 12px 32px -12px rgba(25,35,20,.16);
  --h-shadow-up: 0 2px 4px rgba(25,35,20,.06), 0 22px 44px -16px rgba(25,35,20,.24);
  --h-ease:    .3s cubic-bezier(.2,.8,.2,1);
  background-color: var(--h-bg) !important;   /* Colour only: a background image from Theme Options stays visible. */
  color: var(--h-text) !important;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}
body.kippis-modern *, body.kippis-modern *::before, body.kippis-modern *::after { box-sizing: border-box; }

/* Pale colour haze so the glass has something to refract. Much softer than the full glass variant. */
body.kippis-modern::before {
  content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30vmax 30vmax at 8% 30%,  color-mix(in srgb, var(--h-accent)  28%, transparent), transparent 70%),
    radial-gradient(28vmax 28vmax at 95% 20%, color-mix(in srgb, var(--h-accent2) 30%, transparent), transparent 70%),
    radial-gradient(34vmax 34vmax at 70% 95%, color-mix(in srgb, var(--h-accent)  18%, transparent), transparent 70%);
  filter: blur(30px);
  opacity: var(--h-haze);
}

body.kippis-modern #all {
  width: auto !important; max-width: 1180px; margin: 0 auto !important; padding: 0 24px !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; color: inherit !important;
}
body.kippis-modern #pagebody, body.kippis-modern #pagefoot { width: auto !important; }

/* ---------- Header: title + search row, then a wide cover (slider-ready) ---------- */
body.kippis-modern #pagehead {
  width: auto !important; height: auto !important;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 24px;
  padding: 30px 0 0; background: none !important; color: inherit !important;
}
body.kippis-modern #pagehead hgroup { grid-column: 1; grid-row: 1; }
body.kippis-modern #site-title, body.kippis-modern #site-description { float: none; display: block; width: auto; padding: 0; }
body.kippis-modern h1#site-title a {
  color: var(--h-text) !important; text-shadow: none !important;
  font-size: var(--k-title-size, 32px); line-height: 1.1; letter-spacing: -.015em; font-weight: 700;
}
body.kippis-modern h1#site-title a::before {
  content: ""; display: inline-block; width: .5em; height: .5em; border-radius: 50%;
  background: var(--h-accent2); box-shadow: 0 0 0 .13em #fff, 0 0 0 .21em var(--h-accent2);
  margin-right: .5em; vertical-align: .1em;
}
body.kippis-modern #site-description { color: var(--h-muted) !important; text-shadow: none !important; font-size: 15px !important; margin-top: 4px; letter-spacing: 0; }

body.kippis-modern #pagehead .search_wrap { position: static !important; grid-column: 2; grid-row: 1; }
body.kippis-modern #pagehead .search_form {
  float: none; display: flex; padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--h-glass) 60%, transparent); box-shadow: var(--h-shadow), var(--h-rim);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
body.kippis-modern #pagehead .search-box {
  width: 12em; height: 38px; padding: 0 14px; border: 0 !important; background: transparent !important;
  font: inherit; font-size: 15px; transition: width var(--h-ease);
}
body.kippis-modern #pagehead .search-box:focus { outline: none; width: 15em; }
body.kippis-modern #pagehead #searchsubmit {
  height: 38px; padding: 0 18px; border: 0 !important; border-radius: 999px !important;
  background: var(--h-accent) !important; color: #fff !important; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}

body.kippis-modern #pagehead::after {
  content: ""; grid-column: 1 / -1; grid-row: 2; height: var(--k-cover-h, 340px); margin-top: 22px;
  border-radius: calc(var(--h-radius) + 6px);
  background-image: var(--k-cover); background-size: cover; background-position: center;
  box-shadow: var(--h-shadow);
}
/* No header image chosen in Theme Options: no cover, the menu sits under the title. */
body.kippis-modern.kippis-no-cover #pagehead::after { display: none; }
body.kippis-modern.kippis-no-cover #main_menu { margin-top: 24px; }

/* Slider caption (for a future slider; not output by the theme yet): a glass card on the cover. */
body.kippis-modern .hero-demo {
  display: flex !important; grid-column: 1 / -1; grid-row: 2; align-self: end; z-index: 1;
  justify-content: space-between; align-items: flex-end; padding: 0 28px 64px;
}
body.kippis-modern .hero-card {
  max-width: 440px; padding: 20px 24px; border-radius: var(--h-radius);
  background: color-mix(in srgb, var(--h-glass) 55%, transparent); box-shadow: var(--h-shadow), var(--h-rim);
  -webkit-backdrop-filter: blur(var(--h-blur)) saturate(170%); backdrop-filter: blur(var(--h-blur)) saturate(170%);
}
body.kippis-modern .hero-card small { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h-accent); }
body.kippis-modern .hero-card b { display: block; font-size: 24px; line-height: 1.25; margin: 4px 0 12px; color: var(--h-text); }
body.kippis-modern .hero-card a { font-weight: 600; font-size: 15px; color: var(--h-accent); }
body.kippis-modern .hero-dots { display: flex; gap: 8px; padding: 10px 14px; border-radius: 999px; background: color-mix(in srgb, var(--h-glass) 45%, transparent); box-shadow: var(--h-rim); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
body.kippis-modern .hero-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(31,36,33,.25); }
body.kippis-modern .hero-dots i:first-child { width: 22px; border-radius: 999px; background: var(--h-accent); }

/* ---------- Glass menu floating over the bottom edge of the cover, sticky ---------- */
body.kippis-modern #main_menu {
  position: sticky; top: 14px; z-index: 100; float: none;
  width: fit-content !important; max-width: 100%;
  margin: -30px auto 44px; padding: 7px;
  border-radius: 999px; border: 0;
  background: color-mix(in srgb, var(--h-glass) 58%, transparent) !important;
  box-shadow: var(--h-shadow-up), var(--h-rim);
  -webkit-backdrop-filter: blur(var(--h-blur)) saturate(180%); backdrop-filter: blur(var(--h-blur)) saturate(180%);
}
body.kippis-modern #main_menu > div > ul, body.kippis-modern #main_menu > ul { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
body.kippis-modern #main_menu a {
  color: var(--h-text) !important; background: transparent !important;
  padding: 9px 20px; border-radius: 999px; line-height: 1.3; font-size: 15px; font-weight: 500;
  transition: background-color var(--h-ease), color var(--h-ease);
}
body.kippis-modern #main_menu li:hover > a, body.kippis-modern #main_menu a:focus {
  background: color-mix(in srgb, var(--h-accent) 12%, transparent) !important; color: var(--h-accent) !important;
}
body.kippis-modern #main_menu .current-menu-item > a, body.kippis-modern #main_menu .current_page_item > a {
  background: var(--h-accent) !important; color: #fff !important;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--h-accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.3);
}
body.kippis-modern #main_menu ul ul {
  top: calc(100% + 12px) !important; left: 0; padding: 8px; width: auto; min-width: 15em;
  border-radius: var(--h-radius-sm);
  background: color-mix(in srgb, var(--h-glass) 80%, transparent); box-shadow: var(--h-shadow-up), var(--h-rim);
  -webkit-backdrop-filter: blur(var(--h-blur)) saturate(180%); backdrop-filter: blur(var(--h-blur)) saturate(180%);
}
body.kippis-modern #main_menu ul ul::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
body.kippis-modern #main_menu ul ul li { float: none; }
body.kippis-modern #main_menu ul ul a { width: auto; border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 400; box-shadow: none !important; background: transparent !important; color: var(--h-text) !important; }
body.kippis-modern #main_menu ul ul li:hover > a { background: color-mix(in srgb, var(--h-accent) 10%, transparent) !important; color: var(--h-accent) !important; }

/* ---------- Columns: same order and proportions, airy gutters ---------- */
body.kippis-modern #pagebody { display: flow-root; }
body.kippis-modern #content { padding: 0 calc(var(--h-gap) / 2); background: none !important; color: inherit !important; overflow: visible; }
body.kippis-modern #sidebar-left  { padding-right: calc(var(--h-gap) / 2); background: none !important; }
body.kippis-modern #sidebar-right { padding-left:  calc(var(--h-gap) / 2); background: none !important; }

/* ---------- Posts: airy white glass cards ---------- */
body.kippis-modern article { margin: 0 0 var(--h-gap); }
body.kippis-modern .article, body.kippis-modern .search-result {
  border: 0 !important; border-radius: var(--h-radius) !important; color: inherit !important;
  padding: 34px 38px;
  background: color-mix(in srgb, var(--h-glass) var(--h-card-a), transparent) !important; box-shadow: var(--h-shadow), var(--h-rim);
  -webkit-backdrop-filter: blur(var(--h-blur)) saturate(160%); backdrop-filter: blur(var(--h-blur)) saturate(160%);
  transition: transform var(--h-ease), box-shadow var(--h-ease);
}
body.kippis-modern article:hover > .article { transform: translateY(-2px); box-shadow: var(--h-shadow-up), var(--h-rim); }
body.kippis-modern .entry-title { font-size: 30px; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 8px; font-weight: 700; }
body.kippis-modern .entry-title a, body.kippis-modern h1, body.kippis-modern h2, body.kippis-modern h3 { color: var(--h-text) !important; background: none !important; }
body.kippis-modern .entry-title a:hover { color: var(--h-accent) !important; }
body.kippis-modern .entry-meta { font-size: 14px; font-style: normal; color: var(--h-muted); }
body.kippis-modern .entry-meta a { color: var(--h-muted) !important; }
body.kippis-modern .entry-content { margin: 20px 0 0; }
body.kippis-modern .entry-content p { margin: 0 0 1.1em; }
body.kippis-modern .entry-content img, body.kippis-modern .ph { border-radius: var(--h-radius-sm); }
body.kippis-modern footer.entry-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--h-line); }
body.kippis-modern a { color: var(--h-accent); background: none !important; }
body.kippis-modern .entry-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.kippis-modern .entry-content .continue-reading a { text-decoration: none; }

body.kippis-modern blockquote {
  margin: 1.4em 0; padding: 14px 20px; border: 0; border-radius: var(--h-radius-sm);
  background: color-mix(in srgb, var(--h-accent2) 14%, transparent) !important; color: var(--h-text) !important;
  font-size: 1.12em; font-style: italic; box-shadow: inset 3px 0 0 var(--h-accent2);
}
body.kippis-modern blockquote p { margin: 0; }

body.kippis-modern nav#nav-single, body.kippis-modern nav#nav-above, body.kippis-modern nav#nav-below {
  background: none !important; border: 0 !important; padding: 0; margin: 0 0 18px; display: flex; justify-content: space-between;
}
body.kippis-modern .nav-previous, body.kippis-modern .nav-next { float: none; font-size: 14px; font-weight: 500; }

/* ---------- Widgets: glass cards with a familiar, clearly marked header ---------- */
body.kippis-modern .widget {
  margin: 0 0 var(--h-gap); padding: 0 0 8px; overflow: hidden;
  border: 0 !important; border-radius: var(--h-radius) !important; color: inherit !important;
  background: color-mix(in srgb, var(--h-glass) var(--h-widget-a), transparent) !important; box-shadow: var(--h-shadow), var(--h-rim);
  -webkit-backdrop-filter: blur(var(--h-blur)) saturate(160%); backdrop-filter: blur(var(--h-blur)) saturate(160%);
  font-size: 15px;
}
body.kippis-modern .widget-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px; padding: 14px 20px;
  border: 0 !important; border-radius: 0 !important;
  background: color-mix(in srgb, var(--h-accent2) 26%, rgba(255,255,255,.4)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--h-accent2) 40%, transparent) !important;
  color: var(--h-text) !important; font-size: 15px; font-weight: 700; letter-spacing: .01em;
}
body.kippis-modern .widget-title::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--h-accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-accent2) 30%, transparent);
}
body.kippis-modern .widget ul { margin: 0; padding: 0 20px; }
body.kippis-modern .widget li { padding: 9px 0; border-bottom: 1px solid var(--h-line); line-height: 1.45; }
body.kippis-modern .widget li:last-child { border-bottom: 0; }
body.kippis-modern .widget li a { color: var(--h-text); display: flex; justify-content: space-between; align-items: center; transition: color var(--h-ease); }
body.kippis-modern .widget li a::after { content: "\203A"; color: var(--h-muted); opacity: 0; transform: translateX(-4px); transition: opacity var(--h-ease), transform var(--h-ease); }
body.kippis-modern .widget li a:hover { color: var(--h-accent); }
body.kippis-modern .widget li a:hover::after { opacity: 1; transform: none; }
body.kippis-modern .widget p { margin: 10px 20px; color: var(--h-muted); line-height: 1.6; }

/* ---------- Buttons and fields ---------- */
body.kippis-modern input[type="text"], body.kippis-modern input[type="email"], body.kippis-modern textarea {
  height: 42px; padding: 0 14px; border: 1px solid var(--h-line); border-radius: 10px;
  background: color-mix(in srgb, var(--h-glass) 85%, transparent); font: inherit; font-size: 15px; color: inherit; width: 100% !important;
}
body.kippis-modern textarea { height: auto; padding: 12px 14px; }
body.kippis-modern input:focus, body.kippis-modern textarea:focus { outline: none; border-color: var(--h-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-accent) 18%, transparent); }
body.kippis-modern input[type="submit"], body.kippis-modern .continue-reading a, body.kippis-modern .comment-reply-link {
  display: inline-block; height: auto; padding: 10px 20px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--h-accent) !important; color: #fff !important; font: inherit; font-size: 15px; font-weight: 600;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--h-accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform var(--h-ease), filter var(--h-ease);
}
body.kippis-modern input[type="submit"]:hover, body.kippis-modern .continue-reading a:hover { transform: translateY(-1px); filter: brightness(1.07); }
body.kippis-modern .widget input[type="submit"] { width: 100%; }

/* ---------- Footer ---------- */
body.kippis-modern #pagefoot { padding: 0; }
body.kippis-modern #site-generator {
  margin: 20px 0 24px; padding: 22px 28px; border-radius: var(--h-radius); text-align: left;
  background: #1f2421; color: #c9ccc7;
}
body.kippis-modern #site-generator span { color: #c9ccc7 !important; font-size: 14px !important; }
body.kippis-modern #site-generator a { color: #f1f3ef !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(241,243,239,.35); }
body.kippis-modern #site-generator a:hover { text-decoration-color: currentColor; }

@media (max-width: 900px) {
  body.kippis-modern #pagebody { display: flex; flex-direction: column; }
  body.kippis-modern #content { order: -1; float: none !important; width: auto !important; padding: 0 !important; }
  body.kippis-modern #sidebar-left, body.kippis-modern #sidebar-right { float: none !important; width: auto !important; padding: 0 !important; }
  body.kippis-modern #pagehead { grid-template-columns: 1fr; }
  body.kippis-modern #pagehead .search_wrap { grid-column: 1; grid-row: auto; }
  body.kippis-modern #pagehead::after, body.kippis-modern .hero-demo { grid-row: 3; }
  body.kippis-modern #pagehead::after { height: 240px; }
  body.kippis-modern .article { padding: 24px; }
  body.kippis-modern .hero-dots { display: none; }
}

/* ---------- Glass effect option ---------- */
body.kippis-modern.glass-light  { --h-card-a: 92%; --h-widget-a: 88%; --h-haze: .55; --h-blur: 12px; }
body.kippis-modern.glass-strong { --h-card-a: 52%; --h-widget-a: 46%; --h-haze: 1.4; --h-blur: 26px; }

/* ---------- Dark page background (chosen in Modern look) ---------- */
body.kippis-modern.kippis-dark {
  --h-glass: #1c211d;
  --h-rim:   inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.07);
  --h-shadow:    0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
  --h-shadow-up: 0 2px 4px rgba(0,0,0,.35), 0 22px 44px -16px rgba(0,0,0,.7);
}
body.kippis-modern.kippis-dark #site-generator { background: color-mix(in srgb, var(--h-glass) 80%, #000); }
body.kippis-modern.kippis-dark h1#site-title a::before { box-shadow: 0 0 0 .13em var(--h-bg), 0 0 0 .21em var(--h-accent2); }

/* ---------- Background pattern option (tinted with the main colour) ---------- */
body.kippis-modern::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--h-accent);
  opacity: var(--h-pattern-opacity, .09);
  -webkit-mask-image: var(--h-pattern, none); mask-image: var(--h-pattern, none);
  -webkit-mask-size: var(--h-pattern-size, 140px); mask-size: var(--h-pattern-size, 140px);
}
body.kippis-modern.pattern-none::after { display: none; }
body.kippis-modern.pattern-daisy {
  --h-pattern-size: 150px;
  --h-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cg transform='translate(38 40)'%3E%3Ccircle r='4.5'/%3E%3Cg id='p'%3E%3Cellipse cy='-12' rx='3.6' ry='7.5'/%3E%3C/g%3E%3Cuse href='%23p' transform='rotate(45)'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(135)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(225)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cuse href='%23p' transform='rotate(315)'/%3E%3C/g%3E%3Cg transform='translate(112 108) scale(.6) rotate(20)'%3E%3Ccircle r='4.5'/%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='rotate(45)'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(135)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(225)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cuse href='%23p' transform='rotate(315)'/%3E%3C/g%3E%3Ccircle cx='110' cy='30' r='1.6' fill='%23000'/%3E%3Ccircle cx='40' cy='118' r='1.6' fill='%23000'/%3E%3Ccircle cx='80' cy='75' r='1.2' fill='%23000'/%3E%3C/svg%3E");
}
body.kippis-modern.pattern-leaves {
  --h-pattern-size: 180px;
  --h-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cg transform='translate(45 50) rotate(-30)'%3E%3Cpath d='M0 30 C0 12 0 -10 0 -30'/%3E%3Cpath d='M0 -18 C8 -24 14 -22 16 -16 C10 -12 5 -13 0 -18Z M0 -18 C-8 -24 -14 -22 -16 -16 C-10 -12 -5 -13 0 -18Z'/%3E%3Cpath d='M0 0 C9 -6 15 -4 17 2 C11 6 5 5 0 0Z M0 0 C-9 -6 -15 -4 -17 2 C-11 6 -5 5 0 0Z'/%3E%3Cpath d='M0 18 C8 12 14 14 16 20 C10 24 5 23 0 18Z'/%3E%3C/g%3E%3Cg transform='translate(135 130) rotate(25) scale(.75)'%3E%3Cpath d='M0 30 C0 12 0 -10 0 -30'/%3E%3Cpath d='M0 -18 C8 -24 14 -22 16 -16 C10 -12 5 -13 0 -18Z M0 -18 C-8 -24 -14 -22 -16 -16 C-10 -12 -5 -13 0 -18Z'/%3E%3Cpath d='M0 0 C9 -6 15 -4 17 2 C11 6 5 5 0 0Z M0 0 C-9 -6 -15 -4 -17 2 C-11 6 -5 5 0 0Z'/%3E%3C/g%3E%3C/svg%3E");
}
body.kippis-modern.pattern-dots {
  --h-pattern-size: 22px; --h-pattern-opacity: .14;
  --h-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.2'/%3E%3C/svg%3E");
}
body.kippis-modern.pattern-waves {
  --h-pattern-size: 120px 40px; --h-pattern-opacity: .10;
  --h-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 20 Q30 8 60 20 T120 20'/%3E%3C/svg%3E");
}

/* ---------- Slider on the cover (Modern look > Slider) ---------- */
body.kippis-modern .kippis-slider {
  grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1;
  height: var(--k-cover-h, 340px); margin-top: 22px; overflow: hidden;
  border-radius: calc(var(--h-radius) + 6px); box-shadow: var(--h-shadow);
}
body.kippis-modern .kippis-slide {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 28px 64px;
  background-image: var(--slide-img); background-size: cover; background-position: center;
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s;
}
body.kippis-modern .kippis-slide.is-active { opacity: 1; visibility: visible; }
body.kippis-modern .kippis-slide .hero-card { position: relative; }
body.kippis-modern .kippis-slider .hero-dots { position: absolute; right: 28px; bottom: 64px; z-index: 2; }
body.kippis-modern .hero-dots button {
  all: unset; cursor: pointer; width: 8px; height: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--h-text) 25%, transparent); transition: width var(--h-ease), background-color var(--h-ease);
}
body.kippis-modern .hero-dots button.is-active { width: 22px; background: var(--h-accent); }
body.kippis-modern .hero-dots button:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 2px; }
@media (max-width: 900px) {
  body.kippis-modern .kippis-slider { grid-row: 3; }
  body.kippis-modern .kippis-slide { padding: 0 16px 48px; }
  body.kippis-modern .kippis-slider .hero-dots { display: flex; right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.kippis-modern .kippis-slide { transition: none; }
}
/* ---------- Long site names and justified text (tuned on the live site, 2026-10-13) ---------- */
/* Long official names: smaller, balanced lines, never justified. */
/* "My size" (title-fixed): the size from Theme Options > Text > Site Title, a bit smaller on phones. */
body.kippis-modern h1#site-title a {
  font-size: min(var(--k-title-size, 32px), 7vw);
  line-height: 1.2;
}
body.kippis-modern #site-title,
body.kippis-modern #site-description { text-align: left !important; text-wrap: balance; }
/* Headings, menus, widgets and buttons never use "justify": it opens big gaps between words. */
body.kippis-modern h1, body.kippis-modern h2, body.kippis-modern h3,
body.kippis-modern h4, body.kippis-modern h5, body.kippis-modern h6,
body.kippis-modern .widget, body.kippis-modern #main_menu,
body.kippis-modern .entry-meta, body.kippis-modern .hero-card { text-align: left; }
body.kippis-modern .entry-content p { hyphens: auto; -webkit-hyphens: auto; }

/* Widgets without a title (image buttons, banners): no card around them, just the image. */
body.kippis-modern .widget:not(:has(.widget-title)) {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0;
  margin-bottom: 14px;
  border-radius: var(--h-radius-sm) !important;
  text-align: center;
}
body.kippis-modern .widget:not(:has(.widget-title)) img {
  display: block; margin: 0 auto; border-radius: var(--h-radius-sm);
  transition: transform var(--h-ease), box-shadow var(--h-ease);
}
body.kippis-modern .widget:not(:has(.widget-title)) a:hover img { transform: translateY(-2px); box-shadow: var(--h-shadow); }
body.kippis-modern .widget:not(:has(.widget-title)) p { margin: 0; }
/* ---------- Feedback from the live site, 2026-10-13 (round 2) ---------- */
/* Background photo from Theme Options (Main areas > Background image): full screen, no haze or pattern over it. */
body.kippis-modern.kippis-has-bg-image {
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}
body.kippis-modern.kippis-has-bg-image::before,
body.kippis-modern.kippis-has-bg-image::after { display: none; }
/* Over a photo the glass needs to be a bit more solid to keep text readable. */
body.kippis-modern.kippis-has-bg-image { --h-card-a: 84%; --h-widget-a: 80%; }
body.kippis-modern.kippis-has-bg-image #site-title a,
body.kippis-modern.kippis-has-bg-image #site-description {
  text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 0 18px rgba(255,255,255,.9) !important;
}

/* Site title: no dot in front; on wide screens the full official name fits on one line. */
body.kippis-modern h1#site-title a::before { content: none; display: none; }
/* "On one line" (title-auto, Theme Options > Modern look): wide screens only. */
@media (min-width: 1100px) {
  /* The title gets the whole first row; the search moves under it on the right. */
  body.kippis-modern.title-auto #pagehead { container-type: inline-size; }
  body.kippis-modern.title-auto #pagehead hgroup { grid-column: 1 / -1; grid-row: 1; }
  body.kippis-modern.title-auto #pagehead .search_wrap { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 6px; }
  body.kippis-modern.title-auto h1#site-title a {
    white-space: nowrap;
    font-size: clamp(12px, calc(100cqi / 79), 20px);   /* ~79 letter widths fit the full official name */
    letter-spacing: -.01em;
  }
  /* Name with a part in brackets: the main part fits one line, the bracket part goes below. */
  body.kippis-modern.title-auto h1#site-title a:has(.kippis-title-sub) {
    font-size: clamp(14px, calc(100cqi / 60), 26px);   /* ~58 letter widths fit "... school No. 8", plus a small margin */
  }
  body.kippis-modern.title-auto #pagehead::after,
  body.kippis-modern.title-auto .kippis-slider { grid-row: 3; }
}

/* Navigation menu widgets (Appearance > Widgets > "Navigation menu"): a glass card with a list of sections. */
body.kippis-modern .widget_nav_menu ul { margin: 0; padding: 6px 12px 8px; list-style: none; }
body.kippis-modern .widget_nav_menu li { padding: 0; border-bottom: 1px solid var(--h-line); }
body.kippis-modern .widget_nav_menu li:last-child { border-bottom: 0; }
body.kippis-modern .widget_nav_menu li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; border-radius: 10px;
  color: var(--h-text) !important; font-weight: 600; font-size: 14.5px; line-height: 1.35;
  text-decoration: none;
  transition: background-color var(--h-ease), color var(--h-ease);
}
body.kippis-modern .widget_nav_menu li a::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--h-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-accent) 18%, transparent);
}
body.kippis-modern .widget_nav_menu li a { justify-content: flex-start; }
body.kippis-modern .widget_nav_menu li a::after { margin-left: auto; }
body.kippis-modern .widget_nav_menu li a:hover {
  background: color-mix(in srgb, var(--h-accent) 9%, transparent); color: var(--h-accent) !important;
}
/* A menu widget without a title still gets its card. */
body.kippis-modern .widget_nav_menu:not(:has(.widget-title)) {
  background: color-mix(in srgb, var(--h-glass) var(--h-widget-a), transparent) !important;
  box-shadow: var(--h-shadow), var(--h-rim) !important;
  -webkit-backdrop-filter: blur(var(--h-blur)) saturate(160%); backdrop-filter: blur(var(--h-blur)) saturate(160%);
  padding: 6px 0; text-align: left;
}
/* Menu items with the CSS class "kippis-button" (Appearance > Menus > CSS classes) look like a solid button. */
body.kippis-modern .widget_nav_menu li.kippis-button { border: 0; }
body.kippis-modern .widget_nav_menu li.kippis-button a {
  justify-content: center; margin: 4px 0; padding: 12px 16px;
  background: var(--h-accent) !important; color: #fff !important; border-radius: 12px;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--h-accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
body.kippis-modern .widget_nav_menu li.kippis-button a::before { display: none; }
body.kippis-modern .widget_nav_menu li.kippis-button a { text-align: center; }
body.kippis-modern .widget_nav_menu li.kippis-button a:hover { filter: brightness(1.08); color: #fff !important; }
/* Menu items with the CSS class "kippis-highlight": the most important link, tinted with the second colour. */
body.kippis-modern .widget_nav_menu li.kippis-highlight a {
  background: color-mix(in srgb, var(--h-accent2) 22%, transparent);
}
body.kippis-modern .widget_nav_menu li.kippis-highlight a::before { background: var(--h-accent2); }
/* Site title split by kippis_site_title_html(): the part in brackets on its own, slightly smaller line. */
body.kippis-modern .kippis-title-main { display: block; }
body.kippis-modern .kippis-title-sub  { display: block; font-size: .78em; font-weight: 600; margin-top: .2em; opacity: .9; }
/* Short header name (Theme Options > Modern look > Short name for the header): one line per line, larger. */
body.kippis-modern .kippis-title-line { display: block; }
body.kippis-modern h1#site-title a:has(.kippis-title-short) {
  white-space: normal !important;
  font-size: clamp(26px, 3.4vw, 46px) !important;      /* "Fit the width" */
  line-height: 1.08;
  letter-spacing: -.02em;
}
body.kippis-modern.title-fixed h1#site-title a:has(.kippis-title-short) {
  font-size: min(var(--k-title-size, 40px), 9vw) !important;   /* "My size" */
}
body.kippis-modern .kippis-title-line + .kippis-title-line { margin-top: .04em; }
/* Visible to screen readers only (the full official name). */
.kippis-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Site title split automatically into lines (before «quotes» and (brackets)) by kippis_site_title_html(). */
body.kippis-modern h1#site-title a:has(> .kippis-title-line) {
  white-space: normal !important;
  line-height: 1.12;
  letter-spacing: -.015em;
  font-size: clamp(18px, 5.2vw, 28px) !important;            /* phones and tablets: lines may wrap */
}
@media (min-width: 1100px) {
  /* "Fit the width": the longest line (~35 letter widths) fills the header width, up to 34px. */
  body.kippis-modern.title-auto h1#site-title a:has(> .kippis-title-line) {
    white-space: nowrap !important;
    font-size: clamp(18px, calc(100cqi / 35), 34px) !important;
  }
}
/* "My size": Theme Options > Text > Site Title size. */
body.kippis-modern.title-fixed h1#site-title a:has(> .kippis-title-line) {
  white-space: normal !important;
  font-size: min(var(--k-title-size, 32px), 7vw) !important;
}
/* ======================================================================================
   Round 3 (2026-10-13): site width, full-width menu, brighter hover, modern tables.
   All driven by Theme Options; no page needs editing.
   ====================================================================================== */

/* Site width (Theme Options > Modern look > Site width). */
body.kippis-modern.width-1320 #all { max-width: 1320px; }
body.kippis-modern.width-1440 #all { max-width: 1440px; }

/* Top menu, full width: spans all three columns, items spread evenly. */
body.kippis-modern.menu-full #main_menu { width: auto !important; margin-left: 0; margin-right: 0; border-radius: 22px; }
body.kippis-modern.menu-full #main_menu > div > ul,
body.kippis-modern.menu-full #main_menu > ul { justify-content: space-between; }
body.kippis-modern.menu-full #main_menu > div > ul > li,
body.kippis-modern.menu-full #main_menu > ul > li { flex: 1 1 auto; }
body.kippis-modern.menu-full #main_menu > div > ul > li > a,
body.kippis-modern.menu-full #main_menu > ul > li > a { text-align: center; }

/* Hover / keyboard focus: the "Hover/focus" colours from Theme Options > Primary menu, clearly visible. */
body.kippis-modern #main_menu li:hover > a,
body.kippis-modern #main_menu li > a:focus-visible,
body.kippis-modern #main_menu ul ul li:hover > a {
  background: var(--k-menu-hover-bg) !important;
  color: var(--k-menu-hover-fg) !important;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--k-menu-hover-bg) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
}
body.kippis-modern #main_menu a:focus-visible { outline: 3px solid var(--h-accent); outline-offset: 2px; }
/* The current page keeps the main colour, also under the mouse, so it is always recognisable. */
body.kippis-modern #main_menu .current-menu-item > a,
body.kippis-modern #main_menu .current_page_item > a { background: var(--h-accent) !important; color: #fff !important; }
/* The same hover colours in the side menus ("Разделы"). */
body.kippis-modern .widget_nav_menu li:not(.kippis-button) a:hover {
  background: var(--k-menu-hover-bg) !important; color: var(--k-menu-hover-fg) !important;
}

/* ---------- Tables in pages and posts ----------
   Old hand-written styles inside the tables (white borders, green column, colours, widths) are overridden here,
   so the pages themselves don't have to be edited. Colours come from Theme Options (main and second colour). */
body.kippis-modern .entry-content figure.wp-block-table { margin: 1.4em 0; overflow-x: auto; }
body.kippis-modern .entry-content table {
  width: 100% !important; height: auto !important;
  border-collapse: separate !important; border-spacing: 0 !important;
  margin: 1.4em 0; overflow: hidden;
  border: 1px solid var(--h-line) !important; border-radius: 16px;
  background: color-mix(in srgb, var(--h-glass) 92%, transparent) !important;
  box-shadow: var(--h-shadow);
  color: var(--h-text) !important;
  font-size: .95em; line-height: 1.5; text-align: left;
}
body.kippis-modern .entry-content figure.wp-block-table table { margin: 0; }
body.kippis-modern .entry-content table col { background: none !important; width: auto !important; }
body.kippis-modern .entry-content table th,
body.kippis-modern .entry-content table td {
  padding: 12px 16px !important;
  border: 0 !important; border-bottom: 1px solid var(--h-line) !important;
  background: transparent !important;
  color: var(--h-text) !important;
  width: auto !important;
  vertical-align: top;
  font-size: inherit !important;
}
body.kippis-modern .entry-content table td[style*="justify"] { text-align: left !important; }
body.kippis-modern .entry-content table th p,
body.kippis-modern .entry-content table td p { margin: 0 0 .35em; }
body.kippis-modern .entry-content table th p:last-child,
body.kippis-modern .entry-content table td p:last-child { margin-bottom: 0; }
body.kippis-modern .entry-content table tr:last-child > td { border-bottom: 0 !important; }

/* Header row: real <th> cells, or the first row of a table that has none. */
body.kippis-modern .entry-content table th,
body.kippis-modern .entry-content table:not(:has(th)) tr:first-child > td {
  background: var(--h-accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  vertical-align: middle;
  border-bottom: 0 !important;
}
body.kippis-modern .entry-content table:not(:has(th)) tr:first-child > td strong { color: #fff; }

/* Gentle stripes and a clear row highlight under the mouse. */
body.kippis-modern .entry-content table tr:nth-child(even) > td { background: color-mix(in srgb, var(--h-accent) 5%, transparent) !important; }
body.kippis-modern .entry-content table tr:hover > td { background: color-mix(in srgb, var(--h-accent2) 22%, transparent) !important; }

/* Tables with the class "table_col" (course lists of the staff pages): the first column is the label column. */
body.kippis-modern.tables-highlight .entry-content table.table_col tr > td:first-child {
  background: color-mix(in srgb, var(--h-accent2) 16%, transparent) !important;
  box-shadow: inset 4px 0 0 var(--h-accent2);
  font-weight: 600;
  min-width: 14em;
}
body.kippis-modern.tables-highlight .entry-content table.table_col tr:hover > td:first-child { background: color-mix(in srgb, var(--h-accent2) 30%, transparent) !important; }
body.kippis-modern .entry-content table.table_col em { font-weight: 400; color: var(--h-muted); }

/* Narrow screens: the table scrolls sideways instead of squeezing the text. */
@media (max-width: 700px) {
  body.kippis-modern .entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.kippis-modern.tables-highlight .entry-content table.table_col tr > td:first-child { min-width: 11em; }
}body.kippis-modern .entry-content table th:hover,
body.kippis-modern .entry-content table tr:hover > th,
body.kippis-modern .entry-content table:not(:has(th)) tr:first-child:hover > td { background: var(--h-accent) !important; }
/* ---------- "Back to top" button (Theme Options > Modern look) ---------- */
.kippis-totop {
  position: fixed; bottom: 24px; right: 24px; z-index: 9990;
  width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  color: var(--h-accent, #4f8a2b);
  background: color-mix(in srgb, var(--h-glass, #fff) 72%, transparent);
  box-shadow: var(--h-shadow-up, 0 10px 30px -10px rgba(0,0,0,.3)), var(--h-rim, inset 0 1px 0 rgba(255,255,255,.8));
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility .3s, background-color .25s, color .25s;
}
.kippis-totop.totop-left { right: auto; left: 24px; }
.kippis-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.kippis-totop svg { grid-area: 1 / 1; }
.kippis-totop-ring { width: 56px; height: 56px; transform: rotate(-90deg); }
.kippis-totop-ring circle { fill: none; stroke-width: 3; }
.kippis-totop-track { stroke: color-mix(in srgb, currentColor 18%, transparent); }
.kippis-totop-progress { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .1s linear; }
.kippis-totop-arrow { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.kippis-totop:hover,
.kippis-totop:focus-visible {
  background: var(--k-menu-hover-bg, #f2c230); color: var(--k-menu-hover-fg, #1f2421);
}
.kippis-totop:hover .kippis-totop-arrow { transform: translateY(-3px); }
.kippis-totop:focus-visible { outline: 3px solid var(--h-accent, #4f8a2b); outline-offset: 3px; }
@media (max-width: 700px) {
  .kippis-totop { width: 48px; height: 48px; bottom: 16px; right: 16px; }
  .kippis-totop.totop-left { left: 16px; }
  .kippis-totop-ring { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .kippis-totop, .kippis-totop-arrow, .kippis-totop-progress { transition: none; }
}
@media print { .kippis-totop { display: none; } }
/* Table style "Clean" (Theme Options > Modern look > Tables): the first column is a normal column. */
body.kippis-modern.tables-clean .entry-content table.table_col tr > td:first-child { min-width: 14em; }
body.kippis-modern.tables-clean .entry-content table td strong { font-weight: 600; }