/*********************************************************
  NORFRA — PRIMARY NAV (header)

    Assumptions:
  - Header Navigation block has class "primary-nav"
  - JS wraps button + container in <span class="menu-button-container">
  - JS toggles .menu-button-container.is-open (single source of truth)

**********************************************************/

/* ======================================================
   0) VARIABLES (for easy tuning)
   ====================================================== */
:root{
  /* --- Geometry --- */
  --nav-border-width: 2px;
  --nav-border-radius: 5px;
  --nav-bg: #fcfbf6;
  --nav-hover-bg: rgba(202, 193, 193, 0);

  /* --- Typography --- */
  --nav-font: var(--wp--preset--font-family--general-sans, "General Sans", sans-serif);
  --nav-font-size: .95rem;
  --nav-font-weight: 600;
  --nav-link-hover-color: var(--wp--preset--color--accent, #BC8F5A);
  --nav-text-transform: uppercase;

  /* --- Spacing --- */
  --nav-button-vpad: .40rem;
  --nav-button-hpad: .90rem;
  --nav-link-pad-block: .7rem;
  --nav-link-pad-inline: 0.5rem;
  --nav-link-hover-indent: 1.5rem;
  --nav-arrow-offset: .8rem;
}

/* ======================================================
   1) WORDPRESS GUARDS (stacking / overflow)
   ====================================================== */
.header--overlay { position: absolute; z-index: 1500 !important; }

header.wp-block-template-part,
.header--overlay,
header .wp-block-group,
header .wp-block-navigation.primary-nav {
  overflow: visible !important;
}

.wp-block-cover { position: relative; z-index: 0 !important; } /* hero under header */

/* Keep wrapper visible (hide only WP’s text close button) */
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-navigation__responsive-close{
  display: block !important;
}

/* ======================================================
   2) Button (appearance)
   ====================================================== */
header .wp-block-navigation.primary-nav
.wp-block-navigation__responsive-container-open{
  display:flex; align-items:center;
  box-sizing:border-box; line-height:1;
  border: var(--nav-border-width) solid currentColor !important;
  border-radius: var(--nav-border-radius) !important;
  background: var(--nav-bg) !important;
  color: inherit;
  padding: var(--nav-button-vpad) var(--nav-button-hpad);
  cursor: pointer;
  outline:none !important; box-shadow:none !important;

  font-family: var(--nav-font) !important;
  font-weight: 600 !important;
  text-transform: var(--nav-text-transform) !important;
}

header .wp-block-navigation.primary-nav
.wp-block-navigation__responsive-container-open .menu-text{
  display:flex; align-items:center; justify-content:center;
  padding-right: var(--nav-button-hpad);
  font-size:1rem; font-weight:600;
}

header .wp-block-navigation.primary-nav
.wp-block-navigation__responsive-container-open .menu-plus{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding-left: var(--nav-button-hpad);
  font-size:1rem; font-weight:600;
}

header .wp-block-navigation.primary-nav
.wp-block-navigation__responsive-container-open .menu-plus::before{
  content:""; position:absolute; left:0; top:-.50rem; bottom:-.50rem;
  border-left: var(--nav-border-width) solid currentColor;
}

header .wp-block-navigation.primary-nav
.wp-block-navigation__responsive-container-open .menu-plus::after{
  content:"+"; transition: transform .15s ease;
}

header .wp-block-navigation.primary-nav
.menu-button-container.is-open
.wp-block-navigation__responsive-container-open .menu-plus::after{
  transform: rotate(45deg); /* + → × */
}

/* ======================================================
   3) DROPDOWN (anchoring & visibility)
   ====================================================== */
header .wp-block-navigation.primary-nav
.menu-button-container{
  position:relative !important;
  display:inline-block;
  z-index:2000 !important;
}

/* Popover under button — keep the clean seam overlap */
header .wp-block-navigation.primary-nav
.menu-button-container > .wp-block-navigation__responsive-container{
  position:absolute !important;
  top: calc(100% -3px) !important;  /* overlap button by 3px */
  left:0 !important;
  width:100% !important; height:auto !important;
  margin:0 !important; padding:0 !important;
  border:0 !important; box-shadow:none !important;
  background:none !important; overflow:visible !important;
  z-index:3000 !important;
  display:none !important; visibility:hidden !important;
}

header .wp-block-navigation.primary-nav
.menu-button-container.is-open > .wp-block-navigation__responsive-container{
  display:block !important; visibility:visible !important;
}

/* ======================================================
   4) PANEL BOX (dropdown body)
   ====================================================== */
header .wp-block-navigation.primary-nav
.menu-button-container > .wp-block-navigation__responsive-container
.wp-block-navigation__responsive-dialog{
  position:relative !important;
  border: var(--nav-border-width) solid currentColor !important;
  border-radius: 0 0 var(--nav-border-radius) var(--nav-border-radius) !important;
  margin-top: 0px !important; /* sit under button */
  background: var(--nav-bg) !important;
  padding:0 !important; min-width:100% !important;
  box-sizing:border-box !important;
}

/* Flatten button’s bottom corners when open */
header .wp-block-navigation.primary-nav
.menu-button-container.is-open
.wp-block-navigation__responsive-container-open{
  border-radius: var(--nav-border-radius) var(--nav-border-radius) 0 0 !important;
}

/* Hide WP’s default “Close” text button */
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-navigation__responsive-container-close{
  display:none !important;
}

/* ======================================================
   5) LINK LIST (layout & hover)
   ====================================================== */
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-navigation__container,
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-page-list{
  list-style:none; margin:0 !important; padding:0 !important; border:0 !important;
}

header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-navigation__container > li,
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-page-list > li{
  border:0 !important;
}

header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-navigation__container > li > *,
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-page-list > li > *{
  border:0 !important; box-shadow:none !important; outline:none !important;
}

/* Breathing room above first link */
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-navigation__responsive-container-content{
  margin:0 !important;
  padding-top:.5rem !important;
}

/* Link text (RIGHT aligned) */
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-navigation__container a,
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-page-list a{
  display:block;
  position:relative;
  text-decoration:none;
  color:currentColor;

  font-family: var(--nav-font);
  font-size: var(--nav-font-size) !important;
  font-weight: var(--nav-font-weight) !important;
  line-height:1.35;

  text-align:left;
  padding-block: var(--nav-link-pad-block);
  padding-inline: var(--nav-link-pad-inline);

  text-transform: var(--nav-text-transform);

  transition: background-color .2s ease, padding .2s ease;
}

/* Hover: background + inward nudge */
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-navigation__container a:hover,
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-page-list a:hover{
  background: var(--nav-hover-bg);
  padding-right: var(--nav-link-hover-indent);
  color: var(--nav-link-hover-color);
}

/* Hover arrow (on the right side) */
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-navigation__container a::before,
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-page-list a::before{
  content:"›";
  position:absolute;
  top:50%;
  right: var(--nav-arrow-offset);
  transform: translateY(-50%) translateX(5px);
  opacity:0;
  transition: opacity .2s ease, transform .2s ease;
  font-weight:600;
}

header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-navigation__container a:hover::before,
header .wp-block-navigation.primary-nav
.menu-button-container .wp-block-page-list a:hover::before{
  opacity:1;
  transform: translateY(-50%) translateX(0);
}

/* ===========================================
   DROPDOWN ANIMATION
   =========================================== */

@keyframes dropdownSlide {
  from {
    opacity: 0;
    transform: scaleY(0.8);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* When menu opens, animate from the button downward */
header .wp-block-navigation.primary-nav
.menu-button-container.is-open
.wp-block-navigation__responsive-dialog {
  transform-origin: top center;
  animation: dropdownSlide 0.18s ease-out;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  header .wp-block-navigation.primary-nav
  .menu-button-container.is-open
  .wp-block-navigation__responsive-dialog {
    animation: none;
  }
}

/*********************************************************
  NORFRA — EMPLOYEE CONTACT INFO

    Purpose:
  - Displays employee contact information with icons
  - Email (mailto:), Phone (tel:), LinkedIn links
  - Icons via SVG background images
  - Uses Block Bindings API

    Block classes:
  - .employee-contact (base class)
  - .employee-contact--email
  - .employee-contact--phone
  - .employee-contact--linkedin

**********************************************************/

.employee-contact {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

/* Hide empty contact blocks */
.employee-contact:empty {
	display: none;
}

.employee-contact a {
	text-decoration: none;
	color: inherit;
}

.employee-contact a:hover {
	text-decoration: underline;
}

/* Icons using ::before pseudo-element with SVG */

.employee-contact--email::before,
.employee-contact--phone::before,
.employee-contact--linkedin::before {
	content: "";
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Email Icon */
.employee-contact--email::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

/* Phone Icon */
.employee-contact--phone::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* LinkedIn Icon */
.employee-contact--linkedin::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

/* Optional: Adjust icon color by changing stroke color in SVG 
   To change icon color, replace 'currentColor' in the SVG data URLs above
   with your desired color code (e.g., '%23000000' for black) */


/*********************************************************
  NORFRA — EMPLOYEE QUERY LOOP ALIGNMENT

    Purpose:
  - Reserves 2 line heights for all titles
  - Text aligns to bottom of reserved space
  - Images align perfectly

**********************************************************/

.employee-grid .wp-block-post-title {
  min-height: 2.8em;
  display: flex;
  align-items: flex-end;
  line-height: 1.4;
}

/* Background Grid */
body {
  background-color: #fcfbf6;
  background-image: url('../images/grid-background.svg');
  background-size: 100% auto; /* Desktop */
  background-position: center top;
  background-repeat: repeat-y;
}

/* Tablet */
@media (max-width: 1024px) {
  body {
    background-size: 1400px auto;
  }
}

/* Mobile */
@media (max-width: 768px) {
  body {
    background-size: 900px auto;
  }
}

@media (max-width: 480px) {
  body {
    background-size: 750px auto;
  }
}