/* Ruffieu.com 2026 progressive enhancement layer */
:root {
  --rf-max: 1180px;
  --rf-green-950: #102b23;
  --rf-green-900: #173a2f;
  --rf-green-800: #20503f;
  --rf-green-700: #28644e;
  --rf-green-100: #e8f1ed;
  --rf-green-050: #f5f8f6;
  --rf-gold: #c6a35b;
  --rf-text: #24302b;
  --rf-muted: #65736c;
  --rf-line: #d9e1dd;
  --rf-surface: #ffffff;
  --rf-radius: 18px;
  --rf-shadow: 0 10px 35px rgba(16, 43, 35, .08);
  color-scheme: light;
}

html { scroll-padding-top: 84px; }
body { min-height: 100dvh; }

/* Modern rendering and interaction primitives */
img { content-visibility: auto; }
.tw-para, .thumbnail, .gallery-idx { contain: layout paint style; }
.twpara-row { content-visibility: auto; contain-intrinsic-size: 1px 520px; }

@supports (text-wrap: balance) {
  h1, h2, h3, #logo { text-wrap: balance; }
}

@supports (selector(:has(*))) {
  .tw-para:has(> .pobj.obj-before:first-child) { overflow: clip; }
  #mainmenu > li:has(.dropdown-menu) > a { cursor: pointer; }
}

@supports (backdrop-filter: blur(12px)) {
  #toolbar3 { background: color-mix(in srgb, var(--rf-green-950) 92%, transparent); }
}

/* Hero */
#toolbar1 .navbar-inner {
  min-height: clamp(240px, 31vw, 390px) !important;
  background-position: center 48% !important;
}
#toolbar1 .container-fluid {
  min-height: clamp(240px, 31vw, 390px) !important;
}
#logo #logo-lt, #logo #logo-rt {
  font-size: clamp(2.7rem, 6vw, 5.4rem) !important;
  letter-spacing: -.055em !important;
}
#logo #logo-sl { max-width: 620px; }

/* Navigation */
#toolbar3 { border-bottom: 1px solid rgba(255,255,255,.08); }
#toolbar3 .navbar-inner { max-width: var(--rf-max); }
#mainmenu > li > a, #mainmenu .dropdown-toggle {
  position: relative;
}
#mainmenu > li > a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--rf-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}
#mainmenu > li > a:hover::after,
#mainmenu > li > a:focus-visible::after,
#mainmenu > li.active > a::after { transform: scaleX(1); }

/* Content hierarchy */
#content { max-width: var(--rf-max); margin-inline: auto; }
#topic { container-type: inline-size; }
#topic > h1, #content > h1 {
  color: var(--rf-green-950);
  letter-spacing: -.04em;
}
.twpara-row > .tw-para,
#top-sb > .tw-para,
#content > .tw-para,
#topic-inner > .tw-para {
  border-color: color-mix(in srgb, var(--rf-line) 88%, white) !important;
  border-radius: var(--rf-radius) !important;
  box-shadow: var(--rf-shadow) !important;
}
.tw-para .ptext, .tw-para .ptext p, .tw-para .ptext div {
  color: var(--rf-text) !important;
}
.tw-para .ptext p { max-width: 76ch; }
.tw-para .ptext a { text-decoration-thickness: .08em; }

/* Image treatment */
.tw-para img, .pobj img, .thumbnail img, .gallery-idx img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.pobj img:not([width]), .gallery-idx img { border-radius: 14px; }

/* Native-ish cards and tables */
.table, table { width: 100%; }
@media (max-width: 700px) {
  .table-responsive, table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Modern page entrance, only when motion is welcome */
.rf-modern .twpara-row, .rf-modern #top-sb > .tw-para {
  animation: rf-enter .42s both;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}
@keyframes rf-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* PWA install button created by JS only when the browser supports installation */
.rf-install {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  padding: .55rem .85rem;
  background: rgba(255,255,255,.09);
  color: #fff;
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
}
.rf-install:hover, .rf-install:focus-visible { background: rgba(255,255,255,.17); }

/* Offline notification */
.rf-network {
  position: fixed;
  z-index: 10060;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  max-width: min(92vw, 520px);
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--rf-green-950);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  font-size: 14px;
  font-weight: 650;
}

/* Cross-document view transitions in supporting browsers */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* Mobile */
@media (max-width: 979px) {
  #mainmenu > li > a::after { display: none; }
  #toolbar3 .navbar-inner { min-height: 60px; }
  .btn-navbar { min-height: 42px; }
  #mainmenu .dropdown-menu { border-radius: 12px !important; }
}
@media (max-width: 767px) {
  #toolbar1 .navbar-inner, #toolbar1 .container-fluid { min-height: 230px !important; }
  #logo #logo-lt, #logo #logo-rt { font-size: clamp(2.45rem, 13vw, 4rem) !important; }
  #topic { padding-top: 22px !important; }
  .twpara-row > .tw-para, #top-sb > .tw-para, #content > .tw-para, #topic-inner > .tw-para {
    border-radius: 15px !important;
    box-shadow: 0 5px 18px rgba(16,43,35,.07) !important;
  }
}

/* Accessibility */
@media (prefers-contrast: more) {
  :root { --rf-line: #9ba8a1; --rf-text: #111713; }
  a { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}