/**
 * Look & feel van de hoofdsite (weyneshof.net) doorgetrokken naar het
 * portaal: papieren achtergrond en oranje header. Bewust minimaal —
 * alle overige styling van het portaal blijft ongemoeid.
 */

/* papieren achtergrond zoals de hoofdsite */
body,
body.bg-gray-50,
.min-h-screen.bg-gray-50,
main.bg-gray-50 {
    background-color: #fdfaf3 !important;
}

/* het logo van de hoofdsite: het gele plakkaatje, aflopend vanaf de
   bovenrand van de header (steekt onderaan uit de balk, zoals op de site) */
.weylogo {
    height: 96px;
    width: auto;
    align-self: flex-start;
    transform: rotate(-1.5deg);
    margin-top: -22px;   /* tegen de bovenrand aan (compenseert de header-padding) */
    margin-bottom: -52px; /* onderaan uit de balk laten hangen */
    position: relative;
    z-index: 40;
    transition: transform .25s ease;
}

a:hover .weylogo,
.weylogo:hover {
    transform: rotate(0deg);
}

/* mobiel: iets kleiner, maar ook daar aflopend over de onderrand */
@media (max-width: 767px) {
    .weylogo {
        height: 72px;
        margin-top: -24px;
        margin-bottom: -32px;
    }
}

/* mededelingsblokje in de stijl van de hoofdsite-notice (plakbriefje),
   rode variant */
.wey-notice {
    position: relative;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    background: #fde3e5;
    color: #b02733;
    border-radius: 4px 4px 4px 14px;
    padding: 18px 22px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    transform: rotate(-.35deg);
    font-size: .97rem;
    line-height: 1.6;
}

.wey-notice::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-style: solid;
    border-width: 0 0 18px 18px;
    border-color: transparent transparent rgba(60, 10, 10, .08) transparent;
}

.wey-notice a {
    color: #b02733;
    text-decoration: underline;
    font-weight: 700;
}

.wey-notice .wey-notice-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background: #ea5560;
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: .875rem;
    text-decoration: none;
}

.wey-notice .wey-notice-btn:hover {
    background: #d73a49;
    color: #fff;
    text-decoration: none;
}

/* zigzag-overgang naar de footer, zoals op de hoofdsite */
.foot-zz {
    line-height: 0;
    background: #fdfaf3;
    padding-top: 56px; /* ademruimte tussen de content en de footer */
}

.foot-scallop {
    display: block;
    width: 100%;
    height: 22px;
    margin-bottom: -1px;
}

/* de volledige footer van de hoofdsite (kolommen + legal-regel) */
footer.site-footer {
    background: #23cad6;
    color: #fff;
    padding: 52px 0 24px;
    line-height: 1.5;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 15px;
}

footer.site-footer .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}

footer.site-footer .cols {
    display: grid;
    gap: 40px;
    grid-template-columns: 2fr 1fr 1fr 1fr;
}

@media (max-width: 820px) {
    footer.site-footer .cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
    footer.site-footer .cols { grid-template-columns: 1fr; }
}

footer.site-footer h4 {
    color: #fff;
    font-family: 'Gorditas', sans-serif;
    font-weight: 700;
    margin-bottom: .7em;
    font-size: .95rem;
}

footer.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer.site-footer ul li { margin: .2em 0; }

footer.site-footer a {
    color: #fff;
    text-decoration: none;
}

footer.site-footer a:hover { text-decoration: underline; }

footer.site-footer .legal {
    margin-top: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .87rem;
    color: rgba(255, 255, 255, .85);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding-top: 20px;
}

footer.site-footer .legal-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

footer.site-footer .legal-links > * + * {
    border-left: 1px solid rgba(255, 255, 255, .4);
    padding-left: 12px;
    margin-left: 12px;
}

footer.site-footer .legal-links a { color: rgba(255, 255, 255, .85); }
footer.site-footer .legal-links a:hover { color: #fff; }

footer.site-footer .admin-login {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, .85);
    opacity: .75;
}

footer.site-footer .admin-login:hover { opacity: 1; }

/* footer-legal op mobiel: gecentreerd en gestapeld, zonder dividers */
@media (max-width: 640px) {
    footer.site-footer .legal {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
    }

    footer.site-footer .legal-links {
        flex-direction: column;
        gap: 6px;
    }

    footer.site-footer .legal-links > * + * {
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
    }
}

/* witte pil-knop in de headerbalk (zoals de aanmeldknop op de site) */
.wey-ctabtn{background:#fff;color:#23cad6;font-family:'Gorditas',sans-serif;font-weight:700;font-size:1rem;text-decoration:none;border-radius:30px;padding:5px 18px;box-shadow:0 1px 4px rgba(60,50,30,.14);white-space:nowrap;line-height:1.6}
.wey-ctabtn:hover{background:#233038;color:#fff}

/* ===== headerbalk: 1-op-1 de stijl van de hoofdsite, in turquoise ===== */
.site-header{position:sticky;top:0;z-index:50;background:#23cad6;box-shadow:0 1px 8px rgba(0,70,78,.18)}
.site-header .bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:0 28px;height:66px;max-width:1180px;margin:0 auto}
.site-header .logo{grid-column:1;justify-self:start;align-self:center;height:66px;display:flex;align-items:flex-start;position:relative;z-index:60}
.site-header .logo img{height:96px;width:auto;margin-top:-2px;transform:rotate(-1.5deg);transition:transform .25s ease}
.site-header .logo:hover img{transform:rotate(0deg)}
nav.mainnav{grid-column:2;justify-self:center}
nav.mainnav>ul{display:flex;gap:2px;list-style:none;align-items:center;margin:0;padding:0}
nav.mainnav a{display:block;padding:11px 15px;color:#fff;text-decoration:none;font-family:'Gorditas',sans-serif;font-weight:700;font-size:1.12rem;white-space:nowrap}
nav.mainnav a:hover{background:rgba(0,0,0,.12);border-radius:10px}
.bar-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:transparent;border:2px solid #fff;border-radius:30px;color:#fff;padding:5px 16px;cursor:pointer;box-shadow:0 1px 4px rgba(60,50,30,.14);line-height:0;height:36px;align-items:center}
.nav-toggle:hover{background:rgba(255,255,255,.15)}
.mn-mobile-only{display:none}

@media(max-width:900px){
  .site-header .logo img{height:58px;margin-top:0;transform:rotate(-1.5deg)}
  .site-header .logo{height:auto;align-items:center}
  .nav-toggle{display:inline-flex}
  nav.mainnav{display:none;position:absolute;left:0;right:0;top:100%;background:#23cad6;box-shadow:0 10px 24px rgba(0,70,78,.2);padding:10px 26px 24px;max-height:calc(100vh - 66px);overflow:auto;justify-self:auto}
  nav.mainnav.open{display:block}
  nav.mainnav>ul{flex-direction:column;align-items:stretch;gap:0}
  .mn-mobile-only{display:block}
}
@media(max-width:480px){
  .wey-ctabtn{display:none}
}

/* subtiele wisselknop naar het vrijwilligersportaal */
.wey-switch{color:#fff;font-size:.875rem;opacity:.65}
.wey-switch:hover{opacity:1;color:#fff}

/* de paginatitel staat in de fotoheader; de dubbele titel in de content verbergen */
h1.font-gorditas.text-3xl{display:none}
h1.font-gorditas.text-3xl + p{text-align:center}

/* fotoheader zoals de hoofdsite, compacter */
.wey-pagehero{position:relative;overflow:hidden}
.wey-pagehero .bgimg{position:absolute;inset:0;background-size:cover;background-position:center}
.wey-pagehero .scrim{position:absolute;inset:0;background:rgba(25,21,14,.38)}
.wey-pagehero .inner{position:relative;max-width:1000px;margin:0 auto;padding:58px 28px 70px;text-align:center}
.wey-pagehero h1{font-family:'Gorditas',sans-serif;font-weight:700;font-size:2.4rem;line-height:1.2;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.4);margin:0}
.wey-hero-scallop{display:block;width:100%;height:22px;margin-top:-21px;position:relative;z-index:3}
@media(max-width:640px){
  .wey-pagehero .inner{padding:38px 20px 48px}
  .wey-pagehero h1{font-size:1.7rem}
}

/* paginatabs: exact de pn-nav van de hoofdsite, volle breedte onder de fotoheader */
.wey-pn{position:sticky;top:66px;z-index:30;display:flex;gap:26px;flex-wrap:nowrap;justify-content:safe center;background:#fff;padding:14px 20px 12px;box-shadow:0 6px 14px -10px rgba(60,50,30,.25);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.wey-pn::-webkit-scrollbar{display:none}
.wey-pn button{position:relative;font-family:'Nunito',sans-serif;font-weight:800;font-size:.95rem;line-height:1.75;color:#6f6a61;border:0;padding:2px 2px 6px;background:none;cursor:pointer;white-space:nowrap;transition:color .2s ease}
.wey-pn button.text-gray-500{color:#6f6a61!important}
.wey-pn button:hover{color:#e8890c!important}
.wey-pn button::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:3px;border-radius:2px;background:#faa01d;transition:left .22s ease,right .22s ease}
.wey-pn button.text-weynes-600{color:#e8890c!important}
.wey-pn button.text-weynes-600::after{left:0;right:0}

/* zigzag onder de fotoheader kleurt mee met wat eronder komt:
   wit wanneer de tabbalk volgt (zoals de site dat met de pn-nav doet) */
.wey-hero-scallop:has(~ .wey-pn) path{fill:#fff}

/* notice-varianten zoals op de hoofdsite (geel = standaard briefje, cyaan = info) */
.wey-notice.geel{background:#fdf3c9;color:#5c5122;transform:rotate(.35deg)}
.wey-notice.geel a{color:#5c5122}
.wey-notice.cyaan{background:#d9f6f8;color:#155e66;transform:rotate(.35deg)}
.wey-notice.cyaan a{color:#155e66}
.wey-notice.groen{background:#ecf7d4;color:#3f5c10;transform:rotate(-.35deg)}
.wey-notice.groen a{color:#3f5c10}

/* pn-nav met linker- en rechtergroep (shop) + puntenpil */
.wey-pn-split{justify-content:space-between;overflow:visible}
.wey-pn-group{display:flex;gap:26px;align-items:center}
.wey-points{background:#91d02d;color:#fff;border-radius:999px;padding:3px 12px;font-weight:800;font-size:.85rem;align-items:center}

/* loginpagina: de home-knop blijft ook op mobiel zichtbaar */
.wey-ctabtn-always{display:inline-block!important}