/* RKI-like header/footer styles (adapted from ros-edu components.css) */

:root{
  --header-height: 64px;
  --header-menu-bar-height: 56px;
  --radius-header: 24px;
  --radius-pill: 999px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-xl: 18px;

  --space-xs: 6px;
  --space-sm: 10px;
  --space-base: 14px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-3xl: 36px;

  --transition-fast: .15s ease;
  --transition-base: .2s ease;

  /* Map to our palette from main.css */
  --color-primary: var(--green);
  --color-primary-dark: var(--dark);
  --color-primary-hover: rgba(180,30,35,.18);
  --color-primary-light: rgba(180,30,35,.35);
  --color-main: var(--dark);
  --color-white: var(--white);
  --color-blue: #1565C0;
  --color-footer: #6E6E6E;
  --color-gray-100: #F6F6F6;
  --color-gray-200: #EFEFEF;
  --color-gray-300: #EBEBEB;
  --color-gray-400: #D6D6D6;
  --color-gray-500: #999999;
  --color-gray-600: #7B7B7B;
  --color-gray-700: #555555;
  --color-gray-800: #414141;
  --color-gray-900: #1B1B1C;
  --color-gray-hover: #E0E0E0;
  --color-catalog-icon: var(--color-primary);
}

/* Minimal utilities */
.container{
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}
.w-100{ width: 100%; }
.img-fluid{ max-width: 100%; height: auto; display:block; }
.mb-2{ margin-bottom: 8px; }

/* Header/footer are always visible */

/* Page shell — header + screen fill viewport */
.rki-page{
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  padding-top: 12px;
  padding-bottom: 12px;
  box-sizing: border-box;
  overflow: hidden;
}
.rki-shell{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--radius-header);
  overflow: hidden;
}
.rki-shell > .screen{
  flex: 1;
  min-height: 0;
}

/* =====================
   HEADER
   ===================== */
.site-header{
  height: auto;
  flex-shrink: 0;
}
.site-header__primary{
  height: var(--header-height);
}
.site-header .header-inner{
  border-radius: var(--radius-header);
  background: var(--color-white);
  display:flex;
  align-items:center;
  height:100%;
  gap: var(--space-lg);
  padding: 0 24px;
  border: 1px solid rgba(0,0,0,.06);
}
.site-header__primary .header-inner{
  border-radius: var(--radius-header) var(--radius-header) 0 0;
}
.header-logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
}
.header-logo img{ height:26px; width:auto; display:block; }

.header-collab{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-shrink: 0;
}
.collab-x{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--color-primary);
}
.collab-x .ico{
  width: 16px;
  height: 16px;
  stroke-width: 2.25;
}
.header-anamio{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--color-main);
}
.header-anamio img{
  height: 28px;
  border-radius: 10px;
  object-fit: contain;
  display:block;
}
.header-anamio__text{
  font-size: 14px;
  font-weight: 700;
  color: var(--color-main);
}

.btn-catalog{
  display:inline-flex;
  align-items:center;
  gap: var(--space-sm);
  background: var(--color-gray-300);
  color: var(--color-primary-dark);
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  cursor:pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space:nowrap;
}
.btn-catalog:hover{ background: var(--color-gray-200); }
.btn-catalog .catalog-text{ color: inherit; }
.btn-catalog .icon--close-catalog{ display:none; }
.btn-catalog.is-open{ color: var(--color-primary); }
.btn-catalog.is-open .icon--catalog{ display:none; }
.btn-catalog.is-open .icon--close-catalog{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.search-input-wrap{
  display:flex;
  align-items:center;
  gap: 0;
  border: 1px solid var(--color-primary-hover);
  border-radius: 10px;
  padding: 5px;
  background: var(--color-white);
}
.search-input-wrap input{
  flex:1;
  border:0;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 1rem;
  outline:none;
  color: var(--color-gray-800);
  background: transparent;
}
.search-input-wrap input::placeholder{ color: var(--color-gray-500); }
.btn-search{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 38px;
  height: 38px;
  background: var(--color-primary);
  color: var(--color-white);
  border: 0;
  border-radius: 12px;
  cursor:pointer;
  transition: background var(--transition-fast);
}
.btn-search:hover{ background: rgba(180,30,35,.85); }

.header-nav{
  display:flex;
  align-items:center;
  gap: var(--space-lg);
  margin-left: auto;
}
.header-nav .btn-nav{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
  height: 44px;
  text-decoration:none;
  color: inherit;
  opacity: 1;
}
.header-nav .btn-nav.disabled{
  opacity: .55;
  pointer-events:none;
}
.header-nav .nav-text{
  color: #ADADAD;
  font-size: 12px;
  white-space:nowrap;
  transition: color var(--transition-fast);
}
.header-nav .btn-nav:hover .nav-text{ color: var(--color-primary); }
.header-nav .btn-nav .ico{ width: 22px; height: 22px; }

.site-header__menu-bar{
  background: var(--color-white);
  border-top: 1px solid #E8E8E8;
  min-height: var(--header-menu-bar-height);
  display:flex;
  align-items:center;
  padding: 12px 24px;
  gap: 20px;
  border-radius: 0 0 var(--radius-header) var(--radius-header);
  border: 1px solid rgba(0,0,0,.06);
  border-top: 0;
}
.header-secondary-nav__trigger{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--color-gray-700);
  font-size: 14px;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.header-secondary-nav__trigger:hover{ color: var(--color-primary); }
.header-secondary-nav__trigger .ico{ width: 20px; height: 20px; }

/* app buttons in menu bar */
.header-secondary-nav__trigger.is-app{
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  font-family: inherit;
}
.header-secondary-nav__trigger.is-app:hover{
  background: var(--color-gray-100);
}
.header-secondary-nav__trigger.is-app.active{
  background: var(--color-primary-hover);
  color: var(--color-primary);
}
.header-secondary-nav__trigger.is-app.active .header-secondary-nav__label{
  color: var(--color-primary);
}

/* Catalog overlay (optional) */
.catalog-overlay{
  position: fixed;
  top: calc(var(--header-height) + 8px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  visibility: hidden;
  opacity: 0;
  transition: visibility var(--transition-base), opacity var(--transition-base);
  overflow: hidden;
}
.catalog-overlay.is-open{ visibility: visible; opacity: 1; }
.catalog-overlay-inner{
  height:100%;
  overflow-y:auto;
  background: var(--color-white);
  padding: 28px;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* =====================
   FOOTER
   ===================== */
.site-footer-wrap{ padding: 24px 0 28px; }
.site-footer{
  padding: 30px;
  background: var(--color-white);
  border-radius: var(--radius-header);
  border: 1px solid rgba(0,0,0,.06);
}
.footer-top__grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  align-items:start;
}
.footer-logo img{ height: 26px; width:auto; display:block; }
.footer-col{ display:flex; flex-direction:column; gap: var(--space-sm); }
.footer-legal{
  margin:0;
  color: var(--color-footer);
  line-height:1.5;
  font-size: 14px;
}
.footer-heading{
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 var(--space-base);
  color: var(--color-main);
}
.footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.footer-link{ color: var(--color-footer); text-decoration:none; }
.footer-link:hover{ color: var(--color-primary); text-decoration:none; }
.footer-supports{ display:flex; flex-direction:column; gap: 14px; list-style:none; padding:0; margin:0; }
.footer-support{ margin:0; font-size: 14px; color: var(--color-footer); }
.footer-support-note{ font-size: 12px; color: var(--color-gray-500); }

.footer-dropdown{ display:flex; flex-direction:column; gap: 8px; }
.footer-link--toggle{ display:flex; align-items:center; gap: 8px; }
.footer-chevron{ width: 18px; height: 18px; transition: transform .2s ease; }
.footer-dropdown.is-open .footer-chevron{ transform: rotate(180deg); }
.footer-sublinks{
  list-style:none;
  margin:0;
  padding: 0 0 0 12px;
  display:none;
  flex-direction:column;
  gap: 8px;
  border-left: 1px solid var(--color-gray-400);
}
.footer-dropdown.is-open .footer-sublinks{ display:flex; }
.footer-sublinks .footer-link{ font-size: 13px; }

.footer-social{ display:flex; gap: 10px; margin-top: 18px; }
.footer-social-link{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--color-gray-300);
  color: var(--color-gray-800);
  text-decoration:none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.footer-social-link:hover{ background: var(--color-primary-hover); color: var(--color-primary); }
.footer-social-link .ico{
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}
.footer-app-label{ margin-top: 16px; color: var(--color-main); font-size: 14px; }

.footer-bottom{
  margin-top: 24px;
  background: var(--color-gray-300);
  padding: 18px;
  border-radius: var(--radius-xl);
}
.footer-bottom__flex{
  display:flex;
  justify-content: space-between;
  gap: 16px;
}
.footer-bottom-col{ display:flex; flex-direction:column; gap: 10px; }
.footer-bottom-text{
  margin:0;
  font-size: 12px;
  color: var(--color-gray-500);
  line-height:1.45;
}
.footer-copyright{
  margin-top:auto;
  margin-bottom:0;
  font-size: 12px;
  color: var(--color-gray-500);
  text-align:right;
}
.vr{ width: 1px; background: #E0E0E0; opacity: 1; }

@media (max-width: 960px){
  .site-header .container .header-inner{ gap: 12px; padding: 0 14px; }
  .header-nav .nav-text{ display:none; }
  .footer-top__grid{ grid-template-columns: 1fr 1fr; }
  .footer-bottom__flex{ flex-direction: column; }
  .vr{ display:none; }
}
@media (max-width: 640px){
  .container{ padding: 0 14px; }
  .btn-catalog .catalog-text{ display:none; }
  .site-header__menu-bar{ display:none; }
  .footer-top__grid{ grid-template-columns: 1fr; }
}