/* assets/css/style.css */
:root{
  --bg-page:#f3f3f3;
  --bg-sheet:#ffffff;
  --bg-header:#ffffff;
  --bg-footer:#6f0d0d;

  --text:#333333;
  --h1:#b21f1f;
  --h:#8a6a00;

  --header-h:100px;
  --sheet-pad:30px;

  --shadow:0 6px 18px rgba(0,0,0,.08);

  --font:'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --w-light:300;
  --w-regular:400;
  --w-medium:500;
  --w-bold:700;
}

html, body{
  height:100%;
}

body{
  margin:0;
  font-family:var(--font);
  font-weight:var(--w-light);
  color:var(--text);
  background:var(--bg-page);
}

/* ======================================
   Tekstlinks (in p, li, enz.)
   ====================================== */

p a,
li a{
  position:relative;
  color:#6f0d0d;        /* donkerrood */
  text-decoration:none;
  padding-bottom:2px;     /* klein beetje ruimte voor lijn */
}

/* dun lijntje */
p a::after,
li a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:#6f0d0d;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}

p a:hover::after,
p a:focus-visible::after,
li a:hover::after,
li a:focus-visible::after{
  transform:scaleX(1);
}

p a:not(:hover)::after,
li a:not(:hover)::after{
  transform-origin:right;
}

/* Sticky header */
.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  height:var(--header-h);
  background:var(--bg-header);
  box-shadow:var(--shadow);
}

.site-logo img{
  height:52px;
  width:auto;
  display:block;
}

/* Menu */
.site-nav{
  display:flex;
  gap:22px;
  align-items:center;
}

.nav-link-anim{
  position:relative;
  text-decoration:none;
  color:var(--text);
  font-weight:var(--w-light);
  padding:6px 2px;
}

.nav-link-anim::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:100%;
  background:var(--h);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}

.nav-link-anim:hover::after,
.nav-link-anim:focus-visible::after{
  transform:scaleX(1);
}

.nav-link-anim:not(:hover)::after{
  transform-origin:right;
}

/* Wrapper zodat footer onderaan blijft bij weinig content */
.page-wrap{
  min-height:calc(100vh - var(--header-h));
  display:flex;
  flex-direction:column;
}

/* Bladspiegel */
.sheet{
  background:var(--bg-sheet);
  padding:var(--sheet-pad);
  margin-top:0;
  flex:1;
}

/* Typografie */
h1, h2, h3, h4, h5, h6{
  font-family:var(--font);
  margin:0 0 .6rem 0;
}

h1{
  color:var(--h1);
  font-weight:var(--w-bold);
  letter-spacing:-.3px;
}

h2{
  color:var(--h);
  font-weight:var(--w-medium);
}

h3{
  color:var(--h);
  font-weight:var(--w-medium);
}

p{
  margin:0 0 1rem 0;
  line-height:1.6;
}

/* Footer */
.site-footer{
  width:100%;
  background:var(--bg-footer);
  color:#fff;
  padding:26px 0;
}

.site-footer h3{
  color:#fff;
  font-weight:var(--w-medium);
  margin-bottom:.7rem;
}

.site-footer p{
  margin:0 0 .35rem 0;
  font-weight:var(--w-light);
  opacity:.92;
}

/* Mobiel */
@media (max-width: 576px){
  :root{
    --sheet-pad:20px;
  }

  .site-nav{
    gap:14px;
  }

  .site-logo img{
    height:44px;
  }
}


/* ===== FirePlus cards ===== */
:root{
  --fp-card-bg:#fff7eb;
  --fp-card-border:rgba(178,31,31,.14);
  --fp-card-radius:15px;
}

.fp-cards{ margin-top:18px; }

.fp-card{
  width:100%;
  height:170px;
  perspective:1000px;
}

.fp-card-inner{
  position:relative;
  width:100%;
  height:100%;
  border-radius:var(--fp-card-radius);
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .55s ease;
}

.fp-card-face{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  border-radius:var(--fp-card-radius);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:18px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.fp-card-front{
  background:var(--fp-card-bg);
  border:1px solid var(--fp-card-border);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}

.fp-icon{
  font-size:34px;
  color:var(--h1);
  line-height:1;
  margin-bottom:10px;
}

.fp-title{
  font-weight:var(--w-medium);
  color:var(--text);
  text-align:center;
}

.fp-card-back{
  background:var(--h1);
  color:#fff;
  transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg);
  text-align:center;
  font-weight:var(--w-regular);
}

/* desktop hover */
@media (hover:hover) and (pointer:fine){
  .fp-card:hover .fp-card-inner{
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
  }
}

/* touch/click */
.fp-card.is-flipped .fp-card-inner{
  transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg);
}

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

  .footer-links a{
    position:relative;
    display:inline-block;
    text-decoration:none;
    color:inherit;
    padding-bottom:3px;
    width:fit-content;
    opacity:.9;
    transition:opacity .18s ease;
  }

  .footer-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    height:2px;
    width:0;
    background:currentColor;
    opacity:.35;
    border-radius:2px;
    transition:width .22s ease;
  }

  .footer-links a:hover{
    opacity:1;
  }

  .footer-links a:hover::after{
    width:100%;
  }