/*
Theme Name: SoNetA
Theme URI: https://www.socialewegwijzeralmere.nl
Author: SoNetA
Description: Sociaal Netwerk Almere - officieel website thema
Version: 1.1
*/

:root{--navy:#1e3a6e;--orange:#e8541a;--yellow:#f5c200;--green:#2dab6e;--purple:#7b3fa0;--light:#f7f5f0;--text:#1a1a2e;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:DM Sans,sans-serif;background:var(--light);color:var(--text);overflow-x:hidden;}

/* NAV */
nav{background:var(--navy);padding:0 5vw;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;height:72px;box-shadow:0 4px 24px rgba(30,58,110,0.18);}
.nav-logo{height:44px;background:white;border-radius:8px;padding:4px 10px;display:flex;align-items:center;}
.nav-logo img{height:36px;}
.nav-links{display:flex;gap:2rem;list-style:none;align-items:center;}
.nav-links>li{position:relative;}
.nav-links>li>a{color:rgba(255,255,255,0.85);text-decoration:none;font-size:0.95rem;font-weight:500;letter-spacing:0.02em;transition:color 0.2s;white-space:nowrap;}
.nav-links>li>a:hover,.nav-links>li>a.active{color:var(--yellow);}
.has-dropdown>a::after{content:'▾';font-size:0.7rem;opacity:0.7;margin-left:4px;}

/* HOVER BRIDGE FIX (prevents dropdown closing when moving mouse to menu) */
.has-dropdown{
  position:relative;
}
.has-dropdown::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:100%;
  width:260px;      /* slightly wider than dropdown */
  height:16px;      /* covers the gap between nav item and dropdown */
  background:transparent;
}

/* DROPDOWN */
.dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:white;
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.15);
  min-width:220px;
  padding:0.5rem;
  opacity:0;
  pointer-events:none;
  z-index:200;
  list-style:none;
  transition:opacity 0.2s, transform 0.2s;
  transition-delay:0s;
}
.has-dropdown:hover .dropdown{
  opacity:1;
  pointer-events:all;
  transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
.has-dropdown:not(:hover) .dropdown{
  transition-delay:0s;
}
.dropdown::before{
/*   content:'';
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  width:12px;
  height:12px;
  background:white;
  rotate:45deg;
  border-radius:2px; */
  pointer-events:none;
}
.dropdown li a{display:flex;align-items:center;gap:0.6rem;padding:0.65rem 1rem;color:var(--text);text-decoration:none;font-size:0.9rem;font-weight:500;border-radius:8px;transition:background 0.15s;white-space:nowrap;}
.dropdown li a:hover{background:var(--light);}
.dropdown-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0;}

/* NAV CTA */
.nav-cta{background:var(--orange)!important;color:white!important;padding:0.5rem 1.2rem!important;border-radius:40px!important;font-weight:600!important;}

/* BREADCRUMB */
.breadcrumb{background:white;padding:0.85rem 5vw;border-bottom:1px solid #eee;font-size:0.85rem;color:#888;display:flex;gap:0.5rem;align-items:center;}
.breadcrumb a{color:var(--navy);text-decoration:none;font-weight:500;}
.breadcrumb a:hover{color:var(--orange);}

/* PAGE HERO */
.page-hero{padding:5rem 5vw 4rem;position:relative;overflow:hidden;}
.page-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange),var(--yellow),var(--green),var(--purple));}
.page-hero-label{display:inline-block;font-size:0.75rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;padding:0.35rem 1rem;border-radius:40px;margin-bottom:1.25rem;}
.page-hero h1{font-family:Fraunces,serif;font-size:clamp(2rem,3.5vw,3rem);color:white;font-weight:900;line-height:1.15;max-width:680px;}
.page-hero p{color:rgba(255,255,255,0.75);font-size:1.05rem;max-width:620px;margin-top:1rem;line-height:1.7;}
.page-content{max-width:1000px;margin:0 auto;padding:3.5rem 5vw 6rem;}

/* BUTTONS */
.btn-primary{display:inline-flex;align-items:center;gap:0.5rem;background:var(--orange);color:white;padding:0.85rem 1.75rem;border-radius:50px;text-decoration:none;font-weight:600;font-size:0.93rem;transition:all 0.2s;box-shadow:0 4px 16px rgba(232,84,26,0.3);cursor:pointer;border:none;font-family:DM Sans,sans-serif;}
.btn-primary:hover{background:#c94416;transform:translateY(-2px);}
.btn-outline{display:inline-flex;align-items:center;gap:0.5rem;background:transparent;color:var(--navy);padding:0.8rem 1.6rem;border-radius:50px;text-decoration:none;font-weight:600;font-size:0.93rem;transition:all 0.2s;border:2px solid var(--navy);}
.btn-outline:hover{background:var(--navy);color:white;}

/* FOOTER */
footer{background:#0f1f40;color:rgba(255,255,255,0.5);padding:2rem 5vw;display:flex;justify-content:space-between;align-items:center;font-size:0.85rem;flex-wrap:wrap;gap:1rem;}
footer a{color:rgba(255,255,255,0.5);text-decoration:none;}
footer a:hover{color:var(--yellow);}
.footer-links{display:flex;gap:1.5rem;}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none;}
.hamburger span{display:block;width:24px;height:2px;background:white;border-radius:2px;transition:all 0.3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* MOBILE MENU */
.mobile-menu{display:none;position:fixed;top:72px;left:0;right:0;background:var(--navy);padding:1.25rem 6vw 2rem;z-index:99;box-shadow:0 8px 32px rgba(0,0,0,0.25);border-top:1px solid rgba(255,255,255,0.08);}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block;color:rgba(255,255,255,0.85);text-decoration:none;font-size:1rem;font-weight:500;padding:0.85rem 0;border-bottom:1px solid rgba(255,255,255,0.07);}
.mobile-menu a:hover{color:var(--yellow);}
.mob-section{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.35);padding:1.1rem 0 0.35rem;display:block;}
.mob-sub{padding:0.65rem 0 0.65rem 1rem!important;font-size:0.95rem;opacity:0.85;}
.mob-cta{display:inline-block!important;background:var(--orange);color:white!important;padding:0.75rem 1.5rem;border-radius:40px;font-weight:600!important;margin-top:0.75rem;border-bottom:none!important;}

/* RESPONSIVE */
@media(max-width:900px){.nav-links{display:none!important;}.hamburger{display:flex;}}

/* CONTACT PAGE */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:3rem;}
.contact-card{background:white;border-radius:16px;padding:1.75rem;box-shadow:0 2px 16px rgba(0,0,0,0.06);border:1px solid #eee;}
.contact-card h3{font-family:Fraunces,serif;font-size:1.05rem;color:var(--navy);font-weight:900;margin-bottom:0.75rem;}
.contact-card p{color:#666;font-size:0.93rem;line-height:1.7;}
.contact-card a{color:var(--navy);font-weight:600;text-decoration:none;}
.contact-card a:hover{color:var(--orange);}
.form-wrap{background:white;border-radius:24px;padding:2.5rem;box-shadow:0 4px 24px rgba(0,0,0,0.06);border:1px solid #eee;max-width:700px;}
.form-wrap h2{font-family:Fraunces,serif;font-size:1.5rem;color:var(--navy);font-weight:900;margin-bottom:0.4rem;}
.form-sub{color:#888;font-size:0.9rem;margin-bottom:1.75rem;}
.form-group{margin-bottom:1.2rem;}
.form-group label{display:block;font-size:0.88rem;font-weight:600;color:var(--navy);margin-bottom:0.4rem;}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:0.8rem 1rem;border:2px solid #e8e8e8;border-radius:10px;font-family:DM Sans,sans-serif;font-size:0.93rem;color:var(--text);background:white;transition:border-color 0.2s;outline:none;}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--navy);}
.form-group textarea{min-height:130px;resize:vertical;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:700px){.contact-grid{grid-template-columns:1fr;}.form-row{grid-template-columns:1fr;}}

/* MADE BY AMALIA */
.made-by {
  color: var(--orange);
  font-weight: 600;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
}
.made-by:hover {
  color: var(--yellow) !important;
}
footer {
  position: relative;
}

@media (max-width: 768px) {
  .made-by {
    position: static;
    transform: none;
    width: 100%;
    text-align: center;
  }
  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-links {
    justify-content: center;
  }
}