/**
 * Theme Name:     rih
 * Author:         Niels van Dijk
 * Template:       twentytwentyfive
 * Text Domain:	   rih
 * Description:    Child theme based in Twenty-Twenty Five for rihaccountants.nl
 */

/* rules */

:root {
--wp--preset--color--base: #FFFFFF;
  --wp--preset--color--contrast: #111111;
  --wp--preset--color--accent-1: #0093FF;
  --wp--preset--color--accent-2: #95D7FF;
  --wp--preset--color--accent-3: #7962FB;
  --wp--preset--color--accent-4: #E6F3FF;
  --wp--preset--color--accent-5: #FB7FA3;
  --wp--preset--color--accent-5: #F8F8F8;
}

html {
    scroll-behavior: smooth;
}

/* header */

.logged-in header {
	top: 32px;
}

header {
  position: fixed;
  background: transparent;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

header.header--hidden {
  transform: translateY(-100%);
}

svg.custom-logo {
  width: 315px;
}

svg.custom-logo .cls-1 {
  fill: #fff;
}

header.scrolled {
  background: white;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

header.scrolled ul li {
color: #000;
}

header.scrolled svg.custom-logo .cls-1 {
  fill: #000;
}
	
#hero {
  position: relative;
  overflow: hidden;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-title-hero {
	box-shadow: inset 0px -100px 150px #000000e8;
}

/* Push your hero content above the video */
#hero > *:not(.hero-video-bg) {
  position: relative;
  z-index: 2;
}

#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
background-image: repeating-linear-gradient(
    45deg,
    #0000 0px,
    #0000 3px,
    rgba(32, 112, 197, 0.48) 2px,
    rgba(0, 0, 0, 0.79) 4px
  ),
  radial-gradient(circle, rgb(0, 177, 250) 1px, #002a3480 1px);
background-size: 4.66px 4.66px, 40px 40px;
}


nav ul li a {
  position: relative;
  padding-bottom: 3px;
  text-decoration: none;
}

nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: currentColor; /* matches your link color automatically */
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

nav ul li a:hover {
  text-decoration: none;
}

nav ul li a:hover::after {
  width: 100%;
}

.main-menu-btn {
background-color: var(--wp--preset--color--accent-1) !important;
  color: #fff !important;
  padding: 5px 10px !important;
  display: block;
}

.entry-content {
	margin-block-start: 0rem;
}

/* ======= blocks */

section {
	margin-block-start: 0 !important;
}

.hero {
	display: flex;
	align-items: center;
}

/* The mask wrapper — clips overflow */
h1 span {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom; /* prevents clipping descenders */
}

/* The inner element that actually animates */
h1 span em {
  display: inline-block;
  font-style: normal;
  transform: translateY(110%);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Triggered state */
h1.is-visible span em {
  transform: translateY(0);
}

.anim-columns .wp-block-column {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;

}

.anim-columns .wp-block-column.is-visible {
  opacity: 1;
  transform: translateY(0);
}


.blurb {
  background: var(--wp--preset--color--accent-1);
  padding: .5em 1em;
  border-radius: 20px;
  font-size: 80%;
  font-weight: bold;
  color: var(--wp--preset--color--base);
}

.blurb::before {
  content: '';
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm84.5-361l-119.4 164.2-69.1-69.1-33.9 33.9 88.9 88.9 19.8 19.9 16.5-22.7 135.9-186.9 14.1-19.4-38.8-28.3-14.1 19.4z"/></svg>');
  width: 20px;
  background-color: currentColor;
  display: inline-block;
  mask-repeat: no-repeat;
  mask-size: contain;
  height: 20px;
  transform: translateY(2px) translateX(-5px);
}



.rih-list {
  list-style: none;
  padding: 0;
}

.rih-list li {
display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid #f0f0f0;
  padding: .3em 0em 0.5em;
}

.rih-list li::before {
  content: '';
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 480l-448 0 0-448 448 0 0 448zM32 448l384 0 0-384-384 0 0 384zM342.3 172.5l-9.4 12.9-128 176-11 15.2-88.6-88.6 22.6-22.6 62.1 62.1 117-160.8 9.4-12.9 25.9 18.8z"/></svg>');
width: 16px;
  background-color: currentColor;
  display: inline-block;
  mask-repeat: no-repeat;
  mask-size: contain;
  height: 16px;
  transform: translateY(6px) translateX(0px);
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}




/* ======= style */
.is-display-inline-block {
	display: inline-block;
}

ul {
list-style: inside;
  padding: 0;
}


.attn-heading::before {
  content: '';
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M571.4 267.3l11.3-11.3-11.3-11.3-144-144-11.3-11.3-22.6 22.6 11.3 11.3 116.7 116.7-521.4 0 0 32 521.4 0-128 128 22.6 22.6 155.3-155.3z"/></svg>');
  width: 20px;
  background-color: currentColor;
  display: inline-block;
  mask-repeat: no-repeat;
  mask-size: contain;
  height: 20px;
  transform: translateY(4px) translateX(0px);
  margin-right: 1em;
}

.attn-link a {
text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 80%;
position: relative;
  padding: .3em .5em;
       transition: color 0.5s cubic-bezier(0.86, 0, 0.07, 1);

}

.attn-link a:hover {
  transform: scaleX(1);
  transform-origin: left;         /* enter: expands from the left */
  color: #fff;
  
}

.attn-link a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wp--preset--color--accent-1);

  transform: scaleX(0);
  transform-origin: right;        /* exit: collapses toward the right */
     transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}

.attn-link a:hover::before {
  transform: scaleX(1);
  transform-origin: left;         /* enter: expands from the left */
}

.vertical-h3::before {
	content: '//';
}

.icon a::before {
  content: '';

  width: 20px;
  background-color: currentColor;
  display: inline-block;
  mask-repeat: no-repeat;
  mask-size: contain;
  height: 20px;
  transform: translateY(4px) translateX(0px);
  margin-right: 1em;
}

.icon-location a::before {
	  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Pro v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M265 279l-14.3-5.1-145-51.8 364.1-147.9-147.9 364.1-51.8-145-5.1-14.3zM61.2 240.2L240 304c50.5 141.4 77.2 216.1 80 224L338.1 483.5 511.2 57.4 528 16 486.6 32.8 60.5 205.9 16 224 61.2 240.2z"/></svg>');
}

.icon-phone a::before {
	  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M224 160l-56.8 56C190 275.2 236.8 322 296 344.8l56-56.8 160 96-64 128-16 0C193.4 512 0 318.6 0 80L0 64 128 0 224 160zm94.8 207.2l-14.7 14.9-19.6-7.5c-67.6-26-121.1-79.5-147.1-147.1l-7.5-19.6c6-5.9 23.9-23.6 53.8-53.1L115.8 41.9 32 83.8C34 301.7 210.3 478 428.2 480l41.9-83.8-113-67.8-38.3 38.9zm6-202.6l132.7-132.7-105.4 0 0-32 160 0 0 160-32 0 0-105.4-132.7 132.7-11.3 11.3-22.6-22.6 11.3-11.3z"/></svg>');
}

.icon-email a::before {
	  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M16 64l-16 0 0 384 512 0 0-384-496 0zm464 56l0 15.9-224 164.3-224-164.3 0-39.9 448 0 0 24zm0 55.6l0 240.4-448 0 0-240.4 214.5 157.3 9.5 6.9 9.5-6.9 214.5-157.3z"/></svg>');
}

footer {
background-color: #19326E;
background-image: radial-gradient(
  circle,
  rgb(0, 107, 151) 1px,
  transparent 1px
);
background-size: 40px 40px;
}

/* ======= hax */

/* Remove space above footer */
.wp-block-template-part[data-slug="footer"], footer.wp-block-template-part {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ======= responsive */

/* desktop */
@media screen and (min-width: 1025px) {

}

/* mobile */
@media screen and (max-width: 1024px) {
svg.custom-logo {
  width: 250px !important;
}
}

/* ======= keyframes */

@keyframes fadeRotateIn {
  from {
    opacity: 0.6;
    transform: rotate(-60deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}