/* Catchboard brand system 1.3
   Approved direction: white chrome, two-tone wordmark, deep logo-green content. */

:root{
  --brand-ink:#111b1a;
  --brand-green:#087348;
  --brand-green-bright:#10945d;
  --brand-deep:#04382b;
  --brand-deeper:#022a22;
  --brand-panel:#0a4938;
  --brand-panel-soft:#0d5541;
  --brand-gold:#d99a00;
  --brand-cream:#f8faf7;
  --brand-line:rgba(255,255,255,.14);
  --brand-muted:#bdd1c9;
  --cb-navy:var(--brand-deeper);
  --cb-navy-2:var(--brand-deep);
  --cb-navy-3:var(--brand-panel);
  --cb-aqua:var(--brand-green-bright);
  --cb-aqua-strong:var(--brand-green);
  --cb-aqua-soft:#e5f5ed;
}

html{background:var(--brand-deep)}
body{background:var(--brand-deep)}

/* Shared white header and two-tone Catchboard wordmark */
.site-header{
  position:sticky;
  top:0;
  z-index:90;
  min-height:88px;
  height:88px;
  padding-left:max(28px,calc((100vw - 1240px)/2));
  padding-right:max(28px,calc((100vw - 1240px)/2));
  color:var(--brand-ink);
  background:#fff!important;
  border-bottom:1px solid #e2e9e5;
  box-shadow:0 5px 18px rgba(1,34,25,.06);
}
.brand-wrap{gap:9px;color:var(--brand-ink)!important}
.brand-mark{
  width:68px!important;
  height:68px!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.brand-mark img{width:68px!important;height:68px!important;object-fit:contain!important}
.brand-copy{gap:1px}
.brand{
  display:inline-flex;
  font-family:"Arial Black","Segoe UI Black","Segoe UI",Arial,sans-serif;
  font-size:25px!important;
  font-weight:900!important;
  line-height:.95;
  letter-spacing:-.055em!important;
}
.brand-catch{color:var(--brand-ink)}
.brand-board{color:var(--brand-green)}
.tagline{margin-top:4px;color:#34433f!important;font-size:10px!important;font-weight:650!important;line-height:1.1}
.primary-nav{height:88px;gap:22px}
.primary-nav a{height:88px;padding:0 8px;color:#263b35!important;font-size:13px;font-weight:750}
.primary-nav a:hover,.primary-nav a.active{color:var(--brand-green)!important}
.primary-nav a.active:after{left:8px;right:8px;height:3px;background:var(--brand-green)!important}
.header-actions{min-width:132px;justify-content:flex-end}
.header-login{
  min-height:42px!important;
  padding:0 25px!important;
  color:#fff!important;
  background:var(--brand-green)!important;
  border:1px solid var(--brand-green)!important;
  border-radius:9px!important;
  font-weight:800!important;
}
.header-login:hover{background:var(--brand-deep)!important;border-color:var(--brand-deep)!important}
.header-profile,.mobile-header-account>a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:4px 7px 4px 5px;
  color:var(--brand-ink)!important;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
}
.header-profile:hover,.mobile-header-account>a:hover{background:#edf6f1}
.header-profile-avatar{
  position:relative;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  overflow:hidden;
  color:var(--brand-green);
  background:#e5f4ec;
  border:1px solid #c8dfd3;
  border-radius:50%;
}
.header-profile-avatar .ui-icon{width:20px;height:20px}
.header-profile-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mobile-header-account{display:none}

/* White footer with prepared legal and contact navigation */
.site-footer{
  display:grid!important;
  grid-template-columns:1.1fr auto 1fr;
  align-items:center;
  gap:34px;
  width:100%!important;
  max-width:none!important;
  min-height:112px;
  margin:0!important;
  padding:24px max(30px,calc((100vw - 1180px)/2))!important;
  color:#4f625c!important;
  background:#fff!important;
  border:0!important;
  border-top:1px solid #e2e9e5!important;
}
.footer-brand{display:grid;grid-template-columns:auto 1fr;align-items:end;width:max-content}
.footer-wordmark{font-family:"Arial Black","Segoe UI Black","Segoe UI",Arial,sans-serif;font-size:22px;font-weight:900;line-height:1;letter-spacing:-.055em}
.footer-wordmark span{color:var(--brand-ink)}
.footer-wordmark b{color:var(--brand-green)}
.footer-brand small{margin-left:7px;color:#83918c;font-size:9px;font-weight:600}
.footer-brand p{grid-column:1/-1;margin:5px 0 0;color:#4a5b55;font-size:11px}
.footer-links{display:flex;align-items:center;justify-content:center;gap:24px}
.footer-links a{color:#2d413b;font-size:12px;font-weight:700}
.footer-links a:hover,.footer-links a.active{color:var(--brand-green)}
.footer-meta{display:grid;justify-items:end;gap:3px;color:#6b7c76;font-size:10px}

/* Marketing home: image followed by one deep-green content field */
.marketing-page{background:var(--brand-deep)!important}
.marketing-page .site-header{position:sticky!important;inset:auto!important;min-height:88px!important}
.marketing-page .container{background:var(--brand-deep)}
.marketing-hero{min-height:470px;padding-top:48px}
.marketing-hero .hero-shade{background:linear-gradient(90deg,rgba(2,31,25,.94) 0%,rgba(2,31,25,.73) 43%,rgba(2,31,25,.2) 74%,rgba(2,31,25,.02) 100%)}
.hero-content h1{display:flex;font-family:"Arial Black","Segoe UI Black","Segoe UI",Arial,sans-serif;font-weight:900;letter-spacing:-.06em}
.hero-catch{color:#fff}
.hero-board{color:#16a368}
.hero-content h2{color:#fff}
.hero-content .eyebrow{color:#e6b334!important}
.button-aqua,.button-primary{
  color:#fff!important;
  background:var(--brand-green-bright)!important;
  border-color:var(--brand-green-bright)!important;
}
.button-aqua:hover,.button-primary:hover{background:#18a96c!important;border-color:#18a96c!important}
.button-outline-light{border-color:#21a66d;color:#fff}
.trust-row .ui-icon{color:var(--brand-gold)}
.benefit-grid{max-width:1180px;margin:0 auto!important;padding:26px 22px 30px!important;background:transparent!important}
.benefit-grid article{
  background:linear-gradient(145deg,var(--brand-panel-soft),var(--brand-panel))!important;
  border:1px solid var(--brand-line)!important;
  border-radius:10px!important;
  box-shadow:0 12px 30px rgba(1,24,19,.18)!important;
}
.benefit-grid i{color:var(--brand-gold)!important;background:rgba(255,255,255,.08)!important}
.benefit-grid h3{color:#fff!important}
.benefit-grid p{color:var(--brand-muted)!important}
.home-events{margin:0 auto!important;padding:6px 28px 36px!important;color:#fff}
.home-events h2,.home-events .section-heading h2{color:#fff!important}
.home-events .section-heading p{color:var(--brand-muted)!important}
.home-events .text-link{color:#f0b72e!important}
.public-event-card{color:#fff;background:var(--brand-panel)!important;border:1px solid var(--brand-line)!important;box-shadow:0 12px 30px rgba(1,24,19,.2)!important}
.public-event-card h3{color:#fff}
.public-event-card p{color:var(--brand-muted)!important}
.public-event-card .button-soft{color:#073525;background:#f2b83c;border-color:#f2b83c}
.marketing-page .zero-state{color:#fff;background:var(--brand-panel);border-color:var(--brand-line)}
.marketing-page .zero-state h3{color:#fff}
.platform-cta{background:var(--brand-deeper)!important;border-top:1px solid var(--brand-line)}

/* Branded shell for public subpages and signed-in areas */
.app-page,.events-page{background:var(--brand-deep)!important}
.app-page .container,.events-page .container{min-height:calc(100vh - 200px)}
.app-page .page-header,.events-page .page-header{border-left-color:var(--brand-green-bright)}
.app-page>.container>.back-link,.events-page>.container>.back-link{color:#d9ebe4}
.app-page .section-heading>div>h2,.events-page .section-heading>div>h2{color:#fff}
.app-page .section-heading>div>p,.events-page .section-heading>div>p{color:var(--brand-muted)}
.app-page .eyebrow,.events-page .eyebrow{color:var(--brand-green)}
.app-page .eyebrow.light,.events-page .eyebrow.light{color:#e9bd55}
.events-heading{color:#fff}
.events-heading h1{color:#fff}
.events-heading p{color:var(--brand-muted)!important}
.event-row-modern{box-shadow:0 10px 24px rgba(1,25,19,.14)}
.filter-chips a.active{background:var(--brand-green)!important;border-color:var(--brand-green)!important}
.text-link,.profile-actions a,.profile-tournaments a,.catch-media-link{color:var(--brand-green)!important}
.button-secondary{border-color:#a9cabb;color:#075f3e}
.button-secondary:hover{border-color:var(--brand-green);background:#edf7f2;color:var(--brand-green)}
.badge.open,.badge.registration_open{background:#13925c;color:#fff}
.participant-id,.identity-ticket,.control-status{background:#edf6f1}
.metric-ribbon article{box-shadow:0 8px 20px rgba(1,25,19,.1)}
.panel,.quick-card,.event-card,.challenge-ticket,.photo-card,.submission-facts,.decision-card,.security-note,.submit-bar,.calendar-info-card,.calendar-event-card{box-shadow:0 10px 28px rgba(1,25,19,.12)}
.mobile-tournament-cockpit{background:linear-gradient(145deg,var(--brand-panel),var(--brand-deeper))!important}
.cockpit-grid a{border:1px solid #dbe9e2}
.ranking-live-state{background:#e8f6ee;color:var(--brand-green)}
.ranking-view-tabs a.active{color:var(--brand-green);border-bottom-color:var(--brand-green)}
.submission-steps button.active b{background:var(--brand-green);border-color:var(--brand-green)}
.submission-steps button.active span{color:var(--brand-green)}
.profile-page{background:var(--brand-deep)!important}
.profile-photo-preview{color:var(--brand-green);background:#e5f4ec}
.legal-page .container{width:min(920px,calc(100% - 36px))}
.legal-layout{display:grid;gap:16px;margin-bottom:42px}
.legal-notice{padding:15px 17px;color:#5f4300;background:#fff3d1;border:1px solid #efcc70;border-radius:10px;font-size:13px;line-height:1.55}
.legal-section h2{margin:0 0 10px;color:var(--brand-ink);font-size:20px}
.legal-section p{margin:8px 0;color:#53635e;line-height:1.65}

/* Login keeps the same structure but joins the new green/white identity. */
.login-page{background:var(--brand-deep)!important}
.login-page .site-header{position:relative!important;display:grid!important;background:#fff!important}
.login-page .header-actions{display:flex!important}
.login-page .site-footer{display:grid!important}
.login-stage{background:linear-gradient(150deg,var(--brand-deep),var(--brand-deeper))}
.login-panel{background:#eef4f0}
.login-watermark{opacity:.09}

@media(min-width:581px){
  .public-event-grid{grid-template-columns:1fr}
  .public-event-card{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);min-height:170px}
  .public-event-card .event-image{height:100%;min-height:170px}
  .public-event-card .event-card-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;column-gap:28px;padding:18px 22px}
  .public-event-card .event-card-body h3,.public-event-card .event-card-body p{grid-column:1}
  .public-event-card .event-card-body .button{grid-column:2;grid-row:1/6;align-self:center;min-width:180px;margin:0}
}

@media(max-width:1100px) and (min-width:581px){
  .site-header{grid-template-columns:1fr auto auto;gap:12px;padding-left:20px;padding-right:20px}
  .primary-nav{display:none}
  .mobile-menu{display:block;position:relative}
  .mobile-menu summary{list-style:none;padding:8px;color:var(--brand-green);cursor:pointer}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu nav{position:absolute;right:0;top:53px;display:grid;width:250px;padding:10px 16px 16px;background:#fff;border:1px solid #dae7e0;border-radius:0 0 10px 10px;box-shadow:0 15px 30px rgba(0,30,21,.14)}
  .mobile-menu nav a{padding:11px 4px;color:var(--brand-ink);border-bottom:1px solid #edf2ef}
}

@media(max-width:580px){
  html,body{background:var(--brand-deep)}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .site-header,
  .marketing-page .site-header,
  .event-detail-page .site-header,
  .angler-page .site-header,
  .ranking-page .site-header,
  .submit-page .site-header,
  .profile-page .site-header{
    position:sticky!important;
    top:0;
    display:flex!important;
    align-items:center;
    min-height:74px!important;
    height:74px!important;
    padding:0 12px!important;
    background:#fff!important;
    border-bottom:1px solid #e2e9e5;
  }
  .brand-wrap{gap:5px;min-width:0;margin-right:auto}
  .brand-mark{width:48px!important;height:56px!important;flex:0 0 48px}
  .brand-mark img{width:48px!important;height:56px!important}
  .brand{font-size:18px!important}
  .tagline{margin-top:3px;font-size:8px!important;white-space:nowrap}
  .primary-nav,.header-actions{display:none!important}
  .mobile-header-account{display:flex;align-items:center;margin-left:4px}
  .mobile-header-account>a{gap:5px;padding:3px;font-size:10px;white-space:nowrap}
  .mobile-header-account .header-profile-avatar{width:32px;height:32px;flex-basis:32px}
  .mobile-header-account .header-profile-avatar .ui-icon{width:17px;height:17px}
  .mobile-header-login{min-height:34px!important;padding:0 10px!important;color:#fff!important;background:var(--brand-green)!important;border-radius:7px!important}
  .mobile-menu{display:block;position:static;margin-left:2px}
  .mobile-menu summary{padding:7px 0 7px 6px!important;color:var(--brand-green)!important}
  .mobile-menu summary .ui-icon{width:25px;height:25px}
  .mobile-menu nav{top:74px!important;padding:10px 16px 18px!important;background:#fff!important;border-top:1px solid #e2e9e5;box-shadow:0 14px 26px rgba(0,36,25,.13)!important}
  .mobile-menu nav a{padding:11px 5px!important;color:#213a33!important;border-top:0!important;border-bottom:1px solid #edf2ef;font-size:13px;font-weight:700}
  .mobile-menu nav form{padding-top:8px}
  .mobile-logout{width:100%;color:#fff!important;background:var(--brand-green)!important;border:0;border-radius:7px}
  .mobile-menu-divider{display:block;height:8px;border-bottom:1px solid #dbe7e1}

  .site-footer,.login-page .site-footer{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center;
    gap:16px!important;
    min-height:0;
    margin:0 0 calc(66px + env(safe-area-inset-bottom))!important;
    padding:24px 18px!important;
    text-align:center;
  }
  .footer-brand{justify-items:center}
  .footer-links{flex-wrap:wrap;gap:10px 18px}
  .footer-meta{justify-items:center}

  .mobile-bottom-nav,.participant-bottom-nav{background:#fff!important;border-top-color:#d9e6df!important}
  .mobile-bottom-nav a,.participant-bottom-nav a{color:#71827c!important}
  .mobile-bottom-nav a.active,.participant-bottom-nav a.active{color:var(--brand-green)!important}

  /* Mobile home keeps its proven structure, now in the approved palette. */
  .marketing-page .container{background:var(--brand-deep)!important}
  .marketing-hero{padding-top:38px}
  .hero-content h1{font-size:41px}
  .benefit-grid{margin:0 14px 22px!important;padding:7px 14px!important;background:var(--brand-panel)!important;box-shadow:0 10px 28px rgba(1,23,18,.18)!important}
  .benefit-grid article{background:transparent!important;border:0!important;border-bottom:1px solid var(--brand-line)!important;border-radius:0!important;box-shadow:none!important}
  .benefit-grid h3{color:#fff!important}
  .benefit-grid p{color:var(--brand-muted)!important}
  .home-events{padding-left:18px!important;padding-right:18px!important}
  .public-event-card{background:var(--brand-panel)!important}

  /* Every mobile subpage receives a white global header and green page canvas. */
  .app-page .container,
  .events-page .container,
  .event-detail-page .container,
  .angler-page .container,
  .ranking-page .container,
  .submit-page .container,
  .profile-page .container{
    background:var(--brand-deep)!important;
  }
  .events-page .container{padding-top:4px}
  .events-heading h1{color:#fff}
  .event-row-modern{padding:8px;background:#fff!important;border-radius:9px;box-shadow:0 7px 18px rgba(1,24,18,.15)}
  .event-row-modern>div:nth-child(2){padding-right:19px}
  .event-detail-page .back-link,
  .submit-page .back-link,
  .ranking-page .detail-header,
  .submit-page .detail-header,
  .profile-header{
    background:var(--brand-deeper)!important;
  }
  .event-detail-page .back-link{margin-top:0}
  .event-detail-page .event-overview,.event-detail-page .detail-tabs,.event-detail-page .detail-tab-panels{background:#fff!important}
  .event-detail-page .detail-tabs{top:74px}
  .angler-page .mobile-tournament-cockpit{background:linear-gradient(145deg,var(--brand-panel),var(--brand-deeper))!important}
  .angler-page #fanghistorie,.angler-page #nachrichten,.angler-page #mehr,.mobile-latest-catches{background:#fff!important}
  .submit-page .wizard-form{margin:0 12px 18px;padding:1px 15px 18px!important;background:#fff;border-radius:0 0 10px 10px}
  .submit-page .section-panel{background:#fff!important}
  .ranking-page .ranking-view-tabs{top:74px;background:#fff!important}
  .ranking-page .ranking-panel{margin:0 0 18px!important;padding:12px!important;background:#fff!important;border-radius:10px!important}
  .profile-header{color:#fff}
  .profile-header h1{color:#fff}
  .profile-layout{gap:12px}
  .profile-card{background:#fff!important}
  .admin-page .page-header,.admin-page .panel,.admin-page .quick-card,.review-page .panel,.account-page .panel{background:#fff}
  .legal-page .container{width:calc(100% - 28px)!important;padding:0!important}
  .legal-header{margin-top:14px;background:#fff!important}
  .legal-header h1{color:var(--brand-ink)!important}
  .legal-header p{color:#5b6d66!important}
  .legal-section{padding:17px}
  .login-page .header-actions{display:none!important}
  .login-page .mobile-header-account{display:flex}
  .login-shell{min-height:0}
}

@media(max-width:390px){
  .brand-mark{width:43px!important;flex-basis:43px}
  .brand-mark img{width:43px!important}
  .brand{font-size:16px!important}
  .tagline{font-size:7px!important}
  .mobile-header-account>a>span:last-child{display:none}
}