/* Replaces what Ionic used to provide: fonts, grid, button base, and a
   default layout state. home.compiled.css (from the app's SCSS) is loaded
   before this and supplies all the real design values. */

@font-face { font-family: UbuntuRegular; src: url('/assets/fonts/Ubuntu-Regular.ttf'); font-weight: normal; font-style: normal; }
@font-face { font-family: UbuntuMedium;  src: url('/assets/fonts/Ubuntu-Medium.ttf');  font-weight: normal; font-style: normal; }
@font-face { font-family: UbuntuBold;    src: url('/assets/fonts/Ubuntu-Bold.ttf');    font-weight: normal; font-style: normal; }

:root { --ion-color-description: #5B6C8A; }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: UbuntuRegular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #344e64 url('/assets/imgs/background.png') no-repeat center left / cover;
  background-attachment: fixed;
  min-height: 100vh;
}

img { max-width: 100%; }

/* --- Ionic grid --- */
.row { display: flex; flex-wrap: wrap; width: 100%; }
.col { flex: 1 1 0; padding: 5px; min-width: 0; }
.col-4   { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-4-5 { flex: 0 0 37.5%;    max-width: 37.5%; }
.col-1-5 { flex: 0 0 12.5%;    max-width: 12.5%; }

/* --- Ionic button --- */
.btn-testdrive, .btn-how, .signup-btn, .btn-login, .menu-btn, .menu-btn-footer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-radius: 5px;
  padding: 0 14px;
  font-family: UbuntuMedium, sans-serif;
}

.btn-testdrive {
  color: #fff;
  background: linear-gradient(197deg, rgb(255,141,0) 0%, rgb(255,141,0) 33.33%, rgb(255,113,0) 100%);
}
.btn-testdrive:hover { filter: brightness(1.06); }

.btn-how { color: rgb(255,113,0); background: #fff; }

.signup-btn { color: #1A269C; background: #fff; height: 40px; }

.btn-login, .menu-btn { color: #fff; background: none; height: 40px; }
.menu-btn-footer { color: #5B6C8A; background: none; height: 40px; }
.btn-login:hover, .menu-btn:hover, .menu-btn-footer:hover { opacity: .8; }

/* --- Default layout state ---
   The app's media queries cover fixed breakpoints and leave gaps (they relied
   on Ionic's platform classes). These give a desktop default plus one
   phone breakpoint, so no viewport shows both layouts or neither. */
/* :where() keeps these at zero specificity so every rule in
   home.compiled.css still wins, whatever the load order. */
:where(.heder-mobile), :where(.mobil-content) { display: none; }
:where(.gridd), :where(.web-component) { display: block; }
:where(.header-inner-content) { display: flex; }

@media (max-width: 767px) {
  .gridd, .web-component, .header-inner-content { display: none !important; }
  .heder-mobile, .mobil-content { display: block !important; }
  /* landscape-tablet-only links; the app hides these without !important,
     which the button base above would otherwise win against */
  .only_landscap { display: none !important; }
}

/* The app's benefit rows are 75px circle + 85%-wide text, which overflows
   below ~500px. Let the text take the remaining space instead. */
.div-inner-slide .div-label { width: auto; flex: 1 1 auto; }
.div-inner-slide .div-circle { flex: 0 0 auto; }
body { overflow-x: hidden; }

/* --- Mobile header + menu (replaces ion-menu-button and its side menu) --- */
.heder-mobile { background: #344e64; padding: 12px 15px; }
.heder-mobile .div-header-right { gap: 6px; }

.mobile-menu { position: relative; }
.mobile-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu-panel {
  position: absolute;
  top: 34px;
  left: 0;
  z-index: 10000;
  min-width: 210px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
}
.mobile-menu-panel a {
  color: #344e64;
  text-decoration: none;
  font-family: UbuntuMedium, sans-serif;
  font-size: 16px;
  padding: 11px 18px;
}
.mobile-menu-panel a:hover { background: #F4F4F7; }

/* --- Mobile footer --- */
.mobile-footer { background: #F4F4F7; padding: 26px 20px 34px; text-align: center; }
.mobile-footer nav { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 18px; }
.mobile-footer nav a { color: #5B6C8A; text-decoration: none; font-family: UbuntuMedium, sans-serif; font-size: 16px; }
.mobile-footer p { color: #5B6C8A; font-size: 13px; margin: 0; }

/* --- Desktop footer --- */
.grid-footer { padding: 18px 20px; }
.grid-footer .menu-section { flex-wrap: wrap; gap: 4px 10px; }