/*
Theme Name: TriPact
Theme URI: https://www.tripact.nl/
Author: TriPact
Author URI: https://www.tripact.nl/
Description: Uitbreidbaar WordPress-thema voor TriPact, expertisebureau voor inkoop, detachering en advies aan publieke organisaties. De hero bovenaan is de originele, ongewijzigde ontwerpafbeelding; alle content daaronder is vrij te bewerken via de blokeditor.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tripact
*/

:root{
  --navy:#32384D;
  --amber:#FB5508;
  --amber-deep:#FB5508;
  --cream:#F6F5F2;
  --ink:#1F2330;
  --rule:#E7A15A55;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Georgia","Iowan Old Style",serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;height:auto;display:block;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:10px 18px;z-index:1000;text-decoration:none;
}
.skip-link:focus{left:16px;top:16px;}

/* ---------- Header (only visible once a menu is assigned) ---------- */
.site-header{
  max-width:1536px;
  margin:0 auto;
  background:var(--cream);
}
.primary-nav{
  padding:18px 40px;
}
.primary-nav ul{
  list-style:none;
  display:flex;
  gap:26px;
  margin:0;padding:0;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:0.92rem;
}
.primary-nav a{
  text-decoration:none;
  color:var(--ink);
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s ease, color .2s ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible{
  color:var(--amber-deep);
  border-color:var(--amber-deep);
}

/* ---------- Hero: the original, unmodified TriPact visual ---------- */
.hero-visual{
  max-width:1536px;
  margin:0 auto;
}
.hero-image-frame{
  position:relative;
  line-height:0; /* remove whitespace under the image */
}
.hero-image-frame img{
  width:100%;
  height:auto;
  display:block;
}

/* Invisible hotspot exactly over "contact@tripact.nl" inside the image. */
.hero-hotspot--email{
  position:absolute;
  top:89%;
  left:66%;
  width:28%;
  height:8%;
  display:block;
}

/* Zone matching the footer bar's empty right-hand side; holds the LinkedIn button. */
.hero-hotspot-zone{
  position:absolute;
  top:90.6%;
  left:0;
  width:100%;
  height:9.4%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:2.4%;
  pointer-events:none; /* only the button inside is clickable */
}
.hero-linkedin-btn{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;justify-content:center;
  width:7%;
  aspect-ratio:1/1;
  min-width:26px;
  max-width:40px;
  border-radius:50%;
  border:1.5px solid var(--amber);
  color:var(--amber);
  background:transparent;
  transition:background 0.2s ease, color 0.2s ease;
}
.hero-linkedin-btn:hover,
.hero-linkedin-btn:focus-visible{
  background:var(--amber);
  color:var(--navy);
  outline:none;
}
.hero-linkedin-btn svg{
  width:52%;
  height:52%;
}

/* ---------- Extra content (editable via block editor) ---------- */
.tripact-extra-content{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px 72px;
  font-family:"Helvetica Neue",Arial,sans-serif;
  line-height:1.7;
}
.tripact-extra-content h2{
  font-family:"Baskerville","Georgia",serif;
  font-size:1.9rem;
  color:var(--navy);
}
.tripact-extra-content a{
  color:var(--amber-deep);
}

@media (max-width:860px){
  .primary-nav{padding:16px 24px;}
  .primary-nav ul{gap:18px;flex-wrap:wrap;}
  .tripact-extra-content{padding:32px 24px 56px;}
}

:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px;}