/* ============================================================
   Sauer — 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Inter:wght@300;400;500&display=swap');

:root {
  --bg:       transparent;
  --bg2:      rgba(0,0,0,0.3);
  --surface:  rgba(0,8,4,0.50);
  --border:   rgba(80,140,100,0.14);
  --border2:  rgba(80,140,100,0.26);
  --accent:   #22d3ee;
  --accent2:  #34d399;
  --green:    #22c55e;
  --text:     #eef4f0;
  --soft:     #94b8a8;
  --muted:    #4d6b5c;
  --text-muted: #5a7a6a;
}

/* ── Dark mode: Forest Night ── */
html.dark {
  --text:     #eef4f0;
  --soft:     #94b8a8;
  --muted:    #4d6b5c;
  --surface:  rgba(0,8,4,0.50);
  --border:   rgba(80,140,100,0.14);
  --border2:  rgba(80,140,100,0.26);
}

html.dark body {
  color: #eef4f0;
}

html.dark, html.dark body { background-color: transparent !important; }
/* Dark background image set via inline style in base.html.twig */

/* ── Light mode: Sunflower Field ── */
html:not(.dark) {
  --text:     #1a1a0a;
  --soft:     #4a4a2a;
  --muted:    #6b6b3a;
  --surface:  rgba(255,255,255,0.45);
  --border:   rgba(120,100,0,0.2);
  --border2:  rgba(120,100,0,0.35);
  --accent:   #b45309;
  --accent2:  #d97706;
  --text-muted: #5a5a3a;
}

html:not(.dark) body {
  color: #1a1a0a;
}

html:not(.dark) body { background-color: transparent !important; }
/* Light background image set via inline style in base.html.twig */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: transparent;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5 {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 1rem;
}

#body-wrapper, .section-wrapper { position: relative; z-index: 1; }

.container { max-width: 860px; margin: 0 auto; padding: 0 2rem; }

/* Nav */
#navbar {
  background: rgba(0,4,2,0.80) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(80,140,100,0.14) !important;
}

/* Buttons */
a.button {
  background: #fff;
  color: #04060d !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 1.75rem;
  border-radius: 100px;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.2s; white-space: nowrap;
}
a.button:hover { background: #e2e8f0; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,255,255,0.1); }

a.button-outline {
  background: transparent;
  border: 1px solid rgba(34,211,238,0.28);
  color: var(--soft) !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 0.875rem;
  padding: 0.75rem 1.75rem; border-radius: 100px;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.2s; white-space: nowrap;
}
a.button-outline:hover { border-color: rgba(34,211,238,0.6); color: #fff !important; }

/* ── Hero ── */
.hero-section {
  min-height: 92vh;
  display: flex; align-items: center;
  position: relative; padding: 140px 0 100px;
  overflow: hidden; z-index: 1;
}

/* Subtle dark vignette behind hero text so it reads over the forest floor */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 80% at 30% 50%, rgba(0,6,3,0.65) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-section::after {
  content: '';
  position: absolute; top: 40%; left: 50%;
  transform: translate(-50%,-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse at center, rgba(34,211,238,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero-glow {
  position: absolute; border-radius: 50%;
  filter: blur(120px); pointer-events: none;
  animation: drift 14s ease-in-out infinite;
}
.hero-glow-1 { width:500px;height:500px; background:rgba(34,211,238,0.09); top:-150px; right:-50px; }
.hero-glow-2 { width:350px;height:350px; background:rgba(52,211,153,0.07); bottom:-50px; left:-80px; animation-delay:-6s; }

@keyframes drift {
  0%,100% { transform:translate(0,0); }
  50%      { transform:translate(25px,-35px); }
}

.hero-inner { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(80,140,100,0.25); background: rgba(0,8,4,0.45);
  color: var(--soft); padding: 5px 14px; border-radius: 100px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em;
  margin-bottom: 2.5rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: blink 2.5s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

.hero-headline {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 1.0; letter-spacing: -0.04em;
  margin-bottom: 1.75rem;
}
.hero-headline .grad {
  background: linear-gradient(135deg, #ffffff 0%, #7dd3fc 45%, #6ee7b7 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.hero-sub {
  font-size: 1.1rem; color: var(--soft);
  max-width: 520px; line-height: 1.75; margin-bottom: 2.5rem;
}

.hero-ctas { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ── Services list ── */
.services-section {
  padding: 80px 0;
  border-top: 1px solid var(--border);
  position: relative; z-index: 1;
}

.services-label {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2rem;
}

.services-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.services-list li {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 1rem;
  color: var(--soft);
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding-left: 1.25rem;
  transition: color 0.2s;
}
.services-list li:nth-child(4n) { border-right: none; }
.services-list li:nth-last-child(-n+4) { border-bottom: none; }
.services-list li:hover { color: #fff; }

/* ── Stats ── */
.stats-section {
  padding: 80px 0;
  border-top: 1px solid var(--border);
  position: relative; z-index: 1;
}

.stats-row {
  display: flex; align-items: center;
  gap: 0;
}

.stat {
  flex: 1; text-align: center; padding: 1rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}

.stat-div { width: 1px; height: 48px; background: var(--border); flex-shrink: 0; }

.stat-n {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900; font-size: 2.8rem;
  letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(135deg, #fff 0%, #7dd3fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.stat-l { font-size: 0.75rem; color: var(--muted); font-weight: 500; letter-spacing: 0.04em; }

/* ── CTA ── */
.cta-section {
  padding: 80px 0 120px;
  border-top: 1px solid var(--border);
  position: relative; z-index: 1;
}

.cta-wrap {
  border-radius: 24px; padding: 1px;
  background: linear-gradient(135deg, rgba(34,211,238,0.35), rgba(52,211,153,0.25), rgba(6,182,212,0.15));
}

.cta-inner {
  background: rgba(0,8,4,0.60); border-radius: 23px;
  padding: 4rem 3rem; text-align: center; position: relative; overflow: hidden;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.cta-inner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(34,211,238,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.cta-inner h2 {
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900;
  letter-spacing: -0.04em; margin-bottom: 0.75rem; position: relative;
}
.cta-inner p { color: var(--soft); font-size: 1rem; margin: 0; position: relative; }
.cta-actions {
  display: flex; justify-content: center; gap: 1rem;
  flex-wrap: wrap; margin-top: 2rem; position: relative;
}

/* ── Other pages (portal, docs, login, etc.) ── */
.card, .feature-card {
  background: rgba(0,8,4,0.65); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.75rem;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: all 0.3s; position: relative; overflow: hidden;
}
.card:hover, .feature-card:hover {
  border-color: var(--border2); transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; margin: 1.5rem 0 2.5rem; }
.portal-card {
  background: rgba(0,8,4,0.60); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.25rem 1rem; text-align: center; text-decoration: none !important;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: var(--text) !important; transition: all 0.25s;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.portal-card:hover {
  border-color: rgba(34,211,238,0.4); background: rgba(34,211,238,0.07);
  transform: translateY(-3px); color: #fff !important;
}
.portal-card .name { font-size: 0.85rem; font-weight: 600; font-family: 'Montserrat', sans-serif; }
.portal-card .desc { font-size: 0.72rem; color: var(--muted); }

.portal-section-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cat-accent, #6ee7b7); padding: 0.35rem 0.75rem;
  background: color-mix(in srgb, var(--cat-accent, #6ee7b7) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-accent, #6ee7b7) 30%, transparent);
  border-radius: 6px; margin: 1.75rem 0 0.75rem; display: inline-block;
}

/* Reorder mode */
body.reorder-active .portal-card {
  cursor: grab; border-style: dashed; border-color: rgba(34,211,238,0.4);
}
body.reorder-active .portal-card:active { cursor: grabbing; }
.sortable-ghost { opacity: 0.3; background: rgba(34,211,238,0.10) !important; border: 2px dashed #22d3ee !important; }
.sortable-chosen { box-shadow: 0 8px 32px rgba(34,211,238,0.25); transform: scale(1.03); z-index: 100; }

.app-icon {
  width: 52px; height: 52px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  overflow: hidden; flex-shrink: 0; transition: all 0.25s;
}
.app-icon img { width: 36px; height: 36px; object-fit: contain; }
.app-icon.app-letter {
  background: linear-gradient(135deg, var(--c1,#0891b2), var(--c2,#0d9488));
  border: none; color: #fff;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.95rem;
}

.login-wrapper, #login-wrapper { display:flex; align-items:center; justify-content:center; min-height:80vh; padding:2rem; }
.login-box {
  background: rgba(0,8,4,0.70); border: 1px solid var(--border);
  border-radius: 20px; padding: 2.5rem; width: 100%; max-width: 400px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
button[name="oauth2"], .form-oauth2 button {
  width: 100%; padding: 0.875rem 1.5rem; margin: 0.5rem 0;
  border: 1px solid rgba(34,211,238,0.35); border-radius: 12px;
  background: linear-gradient(135deg, #0891b2, #0d9488);
  color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.95rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.25s;
}
button[name="oauth2"]:hover, .form-oauth2 button:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(34,211,238,0.35); }

input, textarea, select {
  background: rgba(0,8,4,0.45) !important; border: 1px solid var(--border) !important;
  color: var(--text) !important; border-radius: 10px !important; padding: 0.75rem 1rem !important; width: 100%; transition: all 0.2s;
}
input:focus, textarea:focus, select:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(34,211,238,0.18) !important; }
label { color: var(--soft); font-size: 0.875rem; font-weight: 500; margin-bottom: 0.4rem; display: block; }

footer { background: transparent !important; border-top: 1px solid var(--border) !important; }
footer, footer * { color: var(--muted) !important; }
footer a:hover { color: var(--text) !important; }

hr { border:none; border-top:1px solid var(--border); margin:3rem 0; }
::selection { background:rgba(34,211,238,0.35); color:#fff; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(80,140,100,0.2); border-radius:2px; }

.notices.yellow { background:rgba(250,204,21,0.07); border-color:rgba(250,204,21,0.2); }
.notices.red    { background:rgba(239,68,68,0.07);  border-color:rgba(239,68,68,0.2); }
.notices.blue   { background:rgba(34,211,238,0.07); border-color:rgba(34,211,238,0.2); }
.notices.green  { background:rgba(34,197,94,0.07);  border-color:rgba(34,197,94,0.2); }

@media (max-width: 768px) {
  .hero-headline { font-size: 3.2rem; }
  .hero-section { min-height: auto; padding: 120px 0 80px; }
  .services-list { grid-template-columns: repeat(2, 1fr); }
  .services-list li:nth-child(2n) { border-right: none; }
  .services-list li:nth-child(4n) { border-right: 1px solid var(--border); }
  .services-list li:nth-last-child(-n+4) { border-bottom: 1px solid var(--border); }
  .services-list li:nth-last-child(-n+2) { border-bottom: none; }
  .stats-row { flex-wrap: wrap; }
  .stat { flex: 0 0 50%; }
  .stat-div { display: none; }
  .cta-inner { padding: 3rem 1.5rem; }
}

/* Grid utilities (used by content pages) */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media(max-width:900px) { .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* ── Light mode overrides: readable on sunflower background ── */
html:not(.dark) .portal-card {
  background: rgba(255,255,255,0.86);
  border-color: rgba(80,120,60,0.3);
  color: #1a0f00 !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 2px 18px rgba(0,0,0,0.18);
}
html:not(.dark) .portal-card:hover {
  background: rgba(255,255,255,0.96);
  border-color: rgba(60,100,40,0.5);
  color: #1a0f00 !important;
}
html:not(.dark) .portal-card .name { color: #1a1005; }
html:not(.dark) .portal-card .desc { color: #5a5030; }

html:not(.dark) .card,
html:not(.dark) .feature-card {
  background: rgba(255,255,255,0.88);
  border-color: rgba(100,130,80,0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 32px rgba(0,0,0,0.22), 0 1px 8px rgba(0,0,0,0.12);
  color: #1a0f00 !important;
}

html:not(.dark) .portal-section-label {
  background: rgba(255,240,180,0.5);
}

html:not(.dark) #svc-search {
  background: rgba(255,248,220,0.8) !important;
  border-color: rgba(180,140,0,0.3) !important;
  color: #1a1a0a !important;
}

html:not(.dark) #svc-search::placeholder { color: #8a7a40; }

html:not(.dark) .cat-pill {
  background: rgba(255,248,200,0.5) !important;
  border-color: rgba(160,120,0,0.3) !important;
  color: #5a4a10 !important;
}

html:not(.dark) #reorder-btn {
  background: rgba(255,248,220,0.8) !important;
  border-color: rgba(180,140,0,0.3) !important;
  color: #3a2a00 !important;
}

html:not(.dark) #reorder-hint {
  background: rgba(255,240,160,0.4) !important;
  border-color: rgba(180,140,0,0.3) !important;
  color: #5a4a10 !important;
}

html:not(.dark) .section-label { color: #7a5a00; }
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3 { color: #1a1005; }
html:not(.dark) p, html:not(.dark) li { color: #2a2010; }
html:not(.dark) a:not(.portal-card):not(.cat-pill) { color: #b45309; }

/* -- Light mode: navbar becomes warm amber glass -- */
html:not(.dark) #navbar {
  background: rgba(255,248,210,0.88) !important;
  border-bottom-color: rgba(160,120,0,0.2) !important;
}

/* Nav top-level link text */
html:not(.dark) header nav a,
html:not(.dark) header .header-nav a {
  color: #2a1a00 !important;
}
html:not(.dark) header nav a:hover,
html:not(.dark) header .header-nav a:hover {
  color: #7a3a00 !important;
}

/* Dropdown menu items in light mode */
html:not(.dark) header nav ul a,
html:not(.dark) header .header-nav ul a {
  color: #2a1a00 !important;
  background: transparent !important;
}
html:not(.dark) header nav ul a:hover,
html:not(.dark) header .header-nav ul a:hover {
  background: rgba(255,235,150,0.6) !important;
  color: #7a3a00 !important;
}

/* Dropdown container in light mode */
html:not(.dark) header nav ul[class*="absolute"],
html:not(.dark) header .header-nav ul[class*="absolute"] {
  background: rgba(255,248,210,0.97) !important;
  border-color: rgba(160,120,0,0.25) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Mobile hamburger icon */
html:not(.dark) header button svg { color: #2a1a00 !important; }

html:not(.dark) nav a { color: #2a1a00 !important; }
html:not(.dark) footer, html:not(.dark) footer * { color: #5a4a20 !important; }
html:not(.dark) footer a:hover { color: #7a3a00 !important; }

/* Theme toggle button in light mode */
html:not(.dark) .theme-toggle {
  border-color: rgba(140,100,0,0.4) !important;
  color: #3a2a00 !important;
}
html:not(.dark) .theme-toggle:hover {
  border-color: rgba(140,100,0,0.7) !important;
}

/* General content text in light mode - override Tailwind grays */
html:not(.dark) .text-gray-600,
html:not(.dark) .text-gray-500,
html:not(.dark) .text-gray-400 { color: #4a3a10 !important; }
html:not(.dark) .text-gray-700,
html:not(.dark) .text-gray-800 { color: #2a1a00 !important; }
html:not(.dark) .text-gray-300,
html:not(.dark) .text-gray-200,
html:not(.dark) .text-gray-100 { color: #3a2a00 !important; }

/* ---- Card spec text: monospace for server/hardware lists ---- */
.card h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.card p[style*="text-muted"],
.card > p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.card ul {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.82rem;
  line-height: 2;
  color: var(--text);
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.card ul li::before {
  content: "# ";
  opacity: 0.35;
  font-size: 0.7rem;
}
html:not(.dark) .card ul { color: #2a1a00; }
html:not(.dark) .card ul li::before { opacity: 0.3; }
html:not(.dark) .card h3 { color: #1a0f00; }

/* ---- Content page glass panel ---- */
body:not(.homepage):not(.portal-page) .flex-1 > section {
  position: relative;
}
body:not(.homepage):not(.portal-page) .flex-1 > section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body:not(.homepage):not(.portal-page) .flex-1 > section > * {
  position: relative;
  z-index: 1;
}
html:not(.dark) body:not(.homepage):not(.portal-page) .flex-1 > section::before {
  background: rgba(248,252,242,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html.dark body:not(.homepage):not(.portal-page) .flex-1 > section::before {
  background: rgba(0,6,3,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---- Text readability over forest/night background ---- */
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3 {
  text-shadow: 0 1px 8px rgba(255,255,255,0.55), 0 2px 16px rgba(255,255,255,0.3);
}
html:not(.dark) p, html:not(.dark) li, html:not(.dark) a:not(.portal-card) {
  text-shadow: 0 1px 5px rgba(255,255,255,0.45);
}
/* Dark mode: strong shadow so text reads over forest floor / leaves */
html.dark h1, html.dark h2, html.dark h3 {
  text-shadow: 0 2px 12px rgba(0,5,2,0.95), 0 4px 28px rgba(0,5,2,0.75);
}
html.dark p, html.dark li {
  text-shadow: 0 1px 8px rgba(0,5,2,0.85);
}

/* Search/pill/reorder on portal: dark mode stronger glass */
html.dark #svc-search {
  background: rgba(0,8,4,0.75) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html.dark .cat-pill {
  background: rgba(0,8,4,0.65) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}