/* ============================================
   code.overheid.nl — custom homepage styles
   Zet dit bestand in:
   custom/public/assets/css/codeoverheid.css
   en include het via custom/templates/base/head.tmpl
   ============================================ */

:root{
  --color-primary: #42145f;
  --color-accent: #f092cd;
  --color-open-pink: #f092cd;
}



/* Header: overschrijf Forgejo's standaard navbar */
.navbar,
#navbar {
  box-shadow: none !important;
}

/* Logo in de navbar vervangen */
.navbar .header.item img,
.navbar .item .logo {
  display: none;
}

.navbar .header.item::before {
  content: '';
  display: inline-block;
  width: 200px;
  height: 44px;
  background-image: url('/assets/img/logo-codeoverheid.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/* Navbar links en knoppen */
.navbar .item,
.navbar .item a {
  color: #333 !important;
}

.navbar .item a:hover {
  color: #3d1a6e !important;
}

/* Aanmelden-knop in navbar */
.navbar .item .button,
.navbar .sign.in {
  background: transparent !important;
  color: #3d1a6e !important;
  border: 1.5px solid #3d1a6e !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
}

.navbar .item .button:hover,
.navbar .sign.in:hover {
  background: #f0eaf8 !important;
}

/* ── Homepage layout ── */
.cod-page {
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
}

/* Hero */
.cod-hero {
  background: var(--color-open-pink);
  text-align: center;
  padding: 60px 32px 48px;
}

.cod-hero h1 {
  font-size: 64px;
  font-weight: 700;
  color: --color-primary;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  line-height: 1.2;
}

.cod-hero p {
  font-size: 16px;
  color: #fff;
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto 28px;
  opacity: 0.85;
}

.cod-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.cod-btn {
  background: #3d1a6e;
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 24px;
  border: none;
  text-decoration: none !important;
  display: inline-block;
}

.cod-btn:hover {
  background: #2e1254;
  color: #fff !important;
}

/* Cards */
.cod-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #e0e0e0;
}

@media (max-width: 768px) {
  .cod-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .cod-hero h1 {
    font-size: 26px;
  }
}

@media (max-width: 480px) {
  .cod-cards {
    grid-template-columns: 1fr;
  }
}

.cod-card { text-align: center;
  padding: 28px 24px;
  border-right: 1px solid #e0e0e0;
}

.cod-card:last-child {
  border-right: none;
}

.cod-icon { text-align: center;
  margin-bottom: 14px;
}

.cod-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: #3d1a6e;
  margin-bottom: 10px;
  line-height: 1.35;
}

.cod-card p {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

/* Logo vervangen */
.navbar .item.brand {
  padding: 0;
}

.navbar .item.brand img,
.navbar .item.brand svg {
  display: none !important;
}

.navbar .item.brand::after {
  content: '';
  display: inline-block;
  width: 180px;
  height: 44px;
  background-image: url('/assets/img/logo-codeoverheid.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.navbar .item a, 
.ui.menu .item{
  color:var(--color-primary);
}


/* Header roze */
.navbar {
  background: var(--color-open-pink) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Navbar hover wit */
#navbar .item:hover, #navbar a.item:hover {
  background: rgba(255,255,255,0.3) !important;
  border-radius: 4px;
}

/* Don't highlight behind the logo */
#navbar #navbar-logo:hover {
  background: none !important;
}

/* Knoppen rood -> paars */
.ui.primary.button,
.ui.button.primary,
button[type="submit"],
.ui.red.button,
.btn-primary {
  background: #42145f !important;
  border-color: #42145f !important;
  color: #fff !important;
}

.ui.primary.button:hover,
.ui.red.button:hover {
  background: #2e1254 !important;
  border-color: #2e1254 !important;
}

/* Sign in knop roze */
.ui.primary.button,
button[type="submit"] {
  background: #f092cd !important;
  border-color: #f092cd !important;
  color: #fff !important;
}

.ui.primary.button:hover,
button[type="submit"]:hover {
  background: #e060a0 !important;
}

/* Sign in knop hover roze */
.ui.primary.button:hover,
button[type="submit"]:hover {
  background: #f092cd !important;
  border-color: #f092cd !important;
  color: #fff !important;
  opacity: 0.85;
}

/* Input focus border roze */
input:focus,
textarea:focus,
.ui.input input:focus {
  border-color: #f092cd !important;
  box-shadow: 0 0 0 2px rgba(240, 146, 205, 0.3) !important;
}

/* Input focus border paars */
input:focus,
textarea:focus,
.ui.input input:focus {
  border-color: #42145f !important;
  box-shadow: 0 0 0 2px rgba(66, 20, 95, 0.3) !important;
}

/* Repo tab balk lichtgrijs */
.ui.tabular.menu,
.ui.secondary.pointing.menu {
  background: #f5f5f5 !important;
}

/* Repo tab balk */
.ui.tabular.menu,
.ui.secondary.pointing.menu {
  background: #fafafa !important;
}


@media (prefers-color-scheme: dark) {
  :root {
    --color-accent: #42145f;
    --color-primary: #f092cd;
  }
  .navbar{
    --color-text: #fff;
  }
  .ui.menu .item{
    color:#fff !important;
  } 

}