/* Theme based on provided palette and Montserrat font
   Palette from image: #009BDB, #00FFFF, #6A3FBC, #C8B2FB, #1A1A1A
*/

@font-face {
  font-family: 'MontserratCustom';
  src: url('/static/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --color-primary: #009BDB; /* bright blue */
  --color-accent: #00FFFF;  /* cyan */
  --color-purple: #6A3FBC;  /* deep purple */
  --color-lilac: #C8B2FB;   /* light lilac */
  --color-dark: #1A1A1A;    /* dark almost-black */
  --color-muted: #F6F7F8;

  --radius: 12px;
  --card-shadow: 0 4px 8px rgba(26,26,26,0.06);
  --card-shadow-hover: 0 10px 24px rgba(26,26,26,0.12);

  /* Navbar layout tunables */
  --navbar-container-pad-left: 0px;
  --navbar-logo-offset: -114px; /* negative moves logo left; tune to match reference */
}

/* Icon-only button style: same size/height, outlined stroke color only */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:6px;
  background: transparent;
  border: 1.5px solid transparent;
  color: var(--color-primary);
  font-size: 18px; /* icon font-size */
  line-height:1;
  padding:0;
}
.icon-btn.outline-primary{ border-color: rgba(5,40,58,0.12); color: rgba(5,40,58,0.95); }
.icon-btn.outline-danger{ border-color: rgba(220,53,69,0.12); color: rgba(220,53,69,0.95); }
.outline-info { color: #0dcaf0; border-color: #0dcaf0; }
.outline-info:hover { background-color: #0dcaf0; color: white; }
.icon-btn:hover{ background: rgba(0,0,0,0.03); }

/* Typography variables (migrated from base.html) */
:root {
  --font-sans: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --base-font-size: 16px;
  --scale-ratio: 1.125;
  --h1-size: calc(var(--base-font-size) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio));
  --h2-size: calc(var(--base-font-size) * var(--scale-ratio) * var(--scale-ratio));
  --h3-size: calc(var(--base-font-size) * var(--scale-ratio));
  --lead-size: calc(var(--base-font-size) * 1.0625);
  --heading-letter-spacing: -0.01em;
  --text-letter-spacing: 0em;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}

html,body{
  font-family: 'MontserratCustom', var(--font-sans);
  color: var(--color-dark);
  background: var(--color-muted);
}

/* Typographic rules */
body {
  font-size: var(--base-font-size);
  line-height: 1.5;
  letter-spacing: var(--text-letter-spacing);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 { font-size: var(--h1-size); font-weight: var(--font-weight-bold); letter-spacing: var(--heading-letter-spacing); margin-bottom: 0.5rem; }
h2, .h2 { font-size: var(--h2-size); font-weight: var(--font-weight-medium); letter-spacing: var(--heading-letter-spacing); margin-bottom: 0.5rem; }
h3, .h3 { font-size: var(--h3-size); font-weight: var(--font-weight-medium); letter-spacing: var(--heading-letter-spacing); margin-bottom: 0.5rem; }
p.lead, .lead { font-size: var(--lead-size); color: #555; }

.navbar-brand { font-family: var(--font-sans); letter-spacing: 0.01em; }
.navbar .nav-link { font-weight: var(--font-weight-medium); }
.btn { font-family: var(--font-sans); font-weight: var(--font-weight-medium); letter-spacing: 0.01em; }

/* Navbar */
.navbar, .site-navbar{
  /* Default: solid dark navbar */
  background-color: rgb(5, 40, 58) !important; /* #05283A */
  color: #fff;
}
.navbar a, .navbar .nav-link { color: #fff !important; }

/* Dropdown items inside navbar should be dark text for readability */
.navbar .dropdown-menu .dropdown-item {
  color: #000 !important;
  background-color: #fff;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item.active {
  background-color: #f1f1f1;
  color: #000 !important;
}

/* Hero popup */
.hero-popup {
  background: rgba(0,0,0,0.72);
  color: #fff;
  border-radius: 28px;
  padding: 2rem;
  text-align:center;
  max-width: 960px;
  margin: 2rem auto;
}

/* Tiles grid */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 1rem;
}

.tile-card{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.tile-card:hover{ transform: translateY(-6px); box-shadow: var(--card-shadow-hover); }
.tile-card .tile-body{ padding: 1rem; }

/* Buttons */
.btn-accent{
  background: linear-gradient(180deg,var(--color-accent), var(--color-primary));
  color: #111;
  border-radius: 8px;
  padding: .5rem .9rem;
  border: none;
}
.btn-accent:hover{ filter: brightness(.95); }

.btn-primary{ background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover{ background: #0086c8; }

/* Stats pill */
.stats-pill{ display:inline-flex; gap:.8rem; align-items:center; background:#fff; padding:.6rem 1rem; border-radius:999px; box-shadow: 0 6px 14px rgba(0,0,0,0.06); }

/* Video card */
.video-card{ border-radius: 12px; overflow:hidden; background:#fff; box-shadow: var(--card-shadow); }
.video-card img{ width:100%; height:150px; object-fit:cover; display:block; }

/* Footer */
.site-footer{ background: #6a3f8c; color: #fff; padding: 2rem; border-top-left-radius: 30px; border-top-right-radius: 30px; }

/* Utility */
.rounded-lg{ border-radius: 12px; }
.text-muted{ color: #6c757d; }

/* Accessibility focus */
:focus{ outline: 3px solid rgba(0,255,255,0.18); outline-offset: 2px; }

/* Navbar logo (right side) */
.navbar-logo img { height: 34px; width: auto; display: block; }
.navbar-logo .nav-link { padding: 0; }

/* Move logo visually more to the left by reducing container padding and adjusting brand image */
.navbar .container { padding-left: var(--navbar-container-pad-left); padding-right: 8px; }
.navbar-brand img { margin-left: var(--navbar-logo-offset); }

/* Reduced navbar height */
.navbar { min-height: 80px; padding-top: 8px; padding-bottom: 8px; }

/* Use flex gap for consistent spacing and center the separators inside the gap */
.navbar .navbar-nav { display: flex; gap: 40px; align-items: center; }
.navbar .navbar-nav > li { position: relative; display: flex; align-items: center; }

/* Vertical separators between main nav items (centered in gap), thicker and white */
.navbar .navbar-nav > li + li::before {
  content: '';
  position: absolute;
  left: -20px; /* approx half of gap (40px) */
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  width: 1.6px; /* thinner separator */
  background: rgba(255,255,255,0.9);
  border-radius: 1px;
  opacity: 0.95;
}