/*
Theme Name: Froab AB
Theme URI: 
Author: Beargrove AB
Author URI: https://beargrove.se
Description: 
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 
Tags: 
*/

:root { --color-primary: #F2E436; --color-text: #0f172a; }

/* Basic reset */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #0f172a;
  background: #f8fafc; /* same as .site-footer */
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
main {
	
}

/* Add padding-top on all pages except the frontpage */
body:not(.home) main{
  padding-top: 0;
}

body:not(.home) main > .container{
  padding-top: 2rem;
}


/* Prevent first heading margin from escaping upwards */
main > .container > :first-child {
  margin-top: 0;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1100px, 92%); margin: 0 auto; }



/* Menu */
.menu {padding-inline-start:0px;}
.menu-item {list-style:none; padding: 5px 15px; margin-bottom: 2px;}

.site-nav{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.primary-menu{
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.primary-menu a{
  color: #000;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.nav-toggle{
  display: none;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;
  color: #fff;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
}

@media (max-width: 900px){
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .primary-menu{
    display: none;
    position: absolute;
    top: 72px;
    right: 1rem;
    left: 1rem;
    flex-direction: column;
    gap: 0;
    background: rgba(10,16,28,0.98);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    overflow: hidden;
    z-index: 9999;
  }

  .primary-menu li{
    border-top: 1px solid rgba(255,255,255,0.10);
  }

  .primary-menu li:first-child{
    border-top: 0;
  }

  .primary-menu a{
    display: block;
    padding: 1rem 1rem;
  }

  body.nav-open .primary-menu{
    display: flex;
  }
}





<!---------------------------------------------------------------------------------------------------------->

/* Header base: all pages */
.site-header {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: 100;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 0 0 rgba(15, 23, 42, 0);
  transition:
    background-color .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    padding .25s ease;
}

/* Front page: header over video */
.home .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: 0 0 0 rgba(15, 23, 42, 0);
}

/* Extra states (keep for safety) */
.site-header.is-over-splash {
  background: transparent;
  box-shadow: none;
  border-bottom-color: transparent;
}

/* Solid header state after the splash */
.site-header.is-solid {
  background-color: #ffffff;
  border-bottom-color: #e2e8f0;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .12);
}

.home .site-header .primary-menu a{
  color: #fff;
	}
.home .site-header.is-solid .primary-menu a{
  color: #000;
	}

/* Header inner layout */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
}

@media (max-width: 900px) {
  .header-inner {
    padding: 0.6rem 0;
  }
}

/* Logo text + mark */
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.4rem; /* base size */
	line-height: 1;
}

/* Base logo image block */
.site-header .brand-logo {
  display: inline-block;
  width: 125px;
  height: 40px;
  border-radius: 8px;
  background: url('https://dev.beargrove.se/wp-content/uploads/2025/11/froab.png')
              center / cover no-repeat;
	display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Front page, over video: larger logo and text */
.home .site-header:not(.is-solid) .brand {
  font-size: 2rem;
}

.home .site-header:not(.is-solid) .brand-logo {
  width: 200px;
  height: 65px;
}

/* Solid header: slightly smaller than base */
.site-header.is-solid .brand {
  font-size: 1.3rem;
	line-height: 1;
}

.site-header.is-solid .brand-logo {
  width: 125px;
  height: 40px;
	position: relative;
  top: 1px; /* adjust 1–2px until perfect */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Mobile logo adjustments */
@media (max-width: 900px) {
  .site-header .brand {
    font-size: 1.4rem;
  }

  .site-header .brand-logo {
    width: 125px;
    height: 40px;
  }

  /* On mobile, over video we can bump it a bit */
  .home .site-header:not(.is-solid) .brand {
    font-size: 1.6rem;
  }

  .home .site-header:not(.is-solid) .brand-logo {
    width: 250px;
    height: 50px;
  }
}

/* Make room for the fixed header on mobile */
@media (max-width: 900px) {
  .home-video-section {
    padding-top: 90px;
  }
}

/* Navigation */
.nav {
  display: flex;
  gap: 1rem;
}
.nav a {
  color: var(--color-text);
  font-weight: 600;
}


/* Smooth fade of header background */
.site-header {
  transition:
    background-color .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    padding .25s ease;
}

/* Transparent state on home (allow fade) */
.home .site-header:not(.is-solid) {
  background-color: rgba(255, 255, 255, 0); /* true transparent */
  border-bottom-color: rgba(255, 255, 255, 0);
  box-shadow: none;
}

/* Solid state (fades into this) */
.site-header.is-solid {
  background-color: rgba(255, 255, 255, 1);
  border-bottom-color: #e2e8f0;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .12);
}

/* Smooth logo + brand text scaling */
.site-header .brand,
.site-header .brand-logo {
  transition: 
    width .35s ease,
    height .35s ease,
    font-size .35s ease,
    transform .35s ease;
}

.home .site-header:not(.is-solid) .brand-logo {
  transform: scale(1.05);
}

/* Silhouette image at bottom of hero */
.home-hero::after {
  content: "";
  position: absolute;
  left: 0;
	right: -40%;
    bottom: -12px;
    height: 110px;
  background-image: url('https://dev.beargrove.se/wp-content/uploads/2025/11/excavator.png');
filter: invert(100%);
    -webkit-filter: invert(100%);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  pointer-events: none;
  z-index: 3; /* above overlay, below content */
}

<!---------------------------------------------------------------------------------------------------------->

/* Mobile nav */
.menu-toggle { display: none; }
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid #e2e8f0; border-radius: 8px; }
  .nav.open { display: flex; flex-direction: column; position: absolute; top: 126px; left: 0; right: 0; background: #e2e8f0; border-bottom: 1px solid #e2e8f0; padding: .75rem 4%; }
}

/* Hero section under video */
.home-hero {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 64px 4vw 80px;
background: linear-gradient(180deg, #111827 0%, #020617 100%);
color: #ffffff;
border-top: 2px solid #568;
}

.home-hero .container {
max-width: 1100px;
margin: 0 auto;
}

.home-hero h1,
.home-hero h2,
.home-hero h3 {
color: #ffffff;
}

.home-hero h1 {font-size: clamp(28px, 4vw, 44px); margin: 0 0 .5rem;}

.home-hero p {
font-size: clamp(16px, 2.2vw, 20px); margin: 0 0 1.25rem; opacity: .9;color: #e5e7eb;
}

@media (max-width: 900px) {
.home-hero {
padding: 48px 4vw 64px;
}
}


.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.btn { display: inline-block; padding: .75rem 1rem; border-radius: 10px; border: 1px solid transparent; font-weight: 700; }
.btn-primary { background: var(--color-primary); color: #0f172a; }
.btn-light { background: #fff; color: #0f172a; border-color: #e2e8f0; }

.hero-services-label{
  margin: 2rem 0 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.hero-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.hero-service-card {
  display: block;
  padding: 28px 32px;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(2,6,23,.35);
}

.hero-service-card:hover{
  border-color: rgba(255,255,255,.18);
	background: #2b2b2b;
	text-decoration: none;
}

.hero-service-card + .hero-service-card{
  border-left: 0;
}

.hero-service-card h3{
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.05;
  color: #ffd54a;
  letter-spacing: .01em;
}

.hero-service-card p{
  margin: 0;
  opacity: 0.9;
}

.hero-service-card__arrow{
  font-size: 1.25rem;
  line-height: 1;
}

@media (max-width: 768px) {
  .hero-services {
    grid-template-columns: 1fr;
  }
}



/* Grids */
.grid { display: grid; gap: 1rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

.card { 
	/*border: 1px solid #e2e8f0; 
	border-radius: 12px; 
	overflow: hidden;
	background-image: radial-gradient(#999 0.5px, #ffffd9 0.5px);
	background-size: 15px 15px;*/
}
.card-body { 
	/*padding: 1rem; */
}
/* New Footer */

.site-footer {
  background: #000;
  padding: 2rem 0 1.25rem;
  font-size: 15px;
  color: #fff;
}

/* Columns */
.footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .footer-cols {
    grid-template-columns: 1fr;
  }
}

/* Lists and links */
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: .25rem;
}

/* Base link color on light grey */
.site-footer a {
  color: #0f172a;
  text-decoration: none;
}

.site-footer a:hover {
  color: #f2e436; /* your yellow */
  text-decoration: underline;
}

/* Contact links stand out in brand yellow */
.footer-contact a {
  color: #f2e436;
  font-weight: 600;
}

.footer-contact a:hover {
  opacity: .85;
}

/* Copyright row aligned right */
.footer-bottom {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}

.footer-note {
  color: #64748b;
  font-size: 14px;
  margin: 0;
  text-align: right;
}


/* Content */

.home .services-section {
  padding: 2.5rem 0 3rem;
}

.home .services-section h2 {
  margin-bottom: .5rem;
}

.home .services-section p {
  max-width: 60ch;
  margin-bottom: 1.5rem;
}

.service-card h3 a {
  text-decoration: none;
  color: #0f172a;
}

.service-card h3 a:hover {
  text-decoration: underline;
}

.service-link {
  font-weight: 600;
  text-decoration: none;
  color: #0f172a;
  border-bottom: 1px solid #0f172a;
}

.service-link:hover {
  color: #f2e436;
  border-bottom-color: #f2e436;
}

.services-more {
  margin-top: 3rem;
}

.services-more h2 {
  margin-bottom: 1.2rem;
}

.services-more .card .card-body h3 {
  margin: 0 0 0rem;
}

.services-more .service-card h3 a {
  text-decoration: none;
  color: #0f172a;
}

.services-more .service-card h3 a:hover {
  text-decoration: underline;
}

.services-more .service-link {
  font-weight: 600;
  text-decoration: none;
  color: #0f172a;
  border-bottom: 1px solid #0f172a;
}

.services-more .service-link:hover {
  color: #f2e436;
  border-bottom-color: #f2e436;
}



.post-meta { color: #64748b; font-size: 14px; margin-bottom: .5rem; }
/*.breadcrumbs { font-size: 14px; margin-bottom: 1rem; color: #475569; }*/
.pagination { display: flex; gap: .5rem; }
.pagination a, .pagination span { padding: .5rem .75rem; border: 1px solid #e2e8f0; border-radius: 8px; }
.breadcrumbs { font-size: 14px; color: #475569; margin: 1rem 0; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.breadcrumbs .sep { margin: 0 .25rem; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* Forms */
.input, textarea { width: 100%; padding: .7rem .8rem; border: 1px solid #cbd5e1; border-radius: 8px; }
label { display: block; font-weight: 600; margin-bottom: .35rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 900px) { .form-row { grid-template-columns: 1fr; } }
.alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.alert-success { background: #ecfeff; border: 1px solid #a5f3fc; }
.alert-error { background: #fee2e2; border: 1px solid #fecaca; }

/* Parallax section */
.parallax-section {
  background-repeat: no-repeat;
}
.parallax-section { position: relative; min-height: 300px; background-size: cover; background-position: center center; overflow: hidden; will-change: background-position; }
.parallax-overlay { position: absolute; inset: 0; background: #0f172a; pointer-events: none; }
.parallax-content { position: relative; padding: 64px 0; color: #fff; }
@media (max-width: 900px) {
  .parallax-section {
    background-attachment: scroll;
    background-position: center top;
  }
}
@media (max-width: 900px) { .parallax-content { padding: 48px 0; } }
@media (prefers-reduced-motion: reduce) { .parallax-section { background-attachment: scroll; } }

/* Extra utility styles */
.h2, h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 .75rem; }
.h3, h3 { font-size: clamp(18px, 2.4vw, 22px); margin: 0 0 .5rem; }
.sidebar { margin-top: 1rem; }
.widget { padding: 1rem; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 1rem; background: #fff; }
.widget-title { margin-top: 0; }

/* Home video splash background */
.home-video-section {
  position: relative;
  width: 100vw;
  margin: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: var(--home-video-height, 100vh);
  overflow: hidden;
  display: flex;
  align-items: center;
	z-index: 0;
}

/* Dynamic height for mobile */
@media (max-width: 900px) {
  .home-video-section {
    min-height: var(
      --home-video-height-mobile,
      var(--home-video-height, 80vh)
    );
  }
}

/* Positioning options from Customizer */
.home-video-section.pos-top {
  align-items: flex-start;
}

.home-video-section.pos-center {
  align-items: center;
}

.home-video-section.pos-bottom {
  align-items: flex-end;
}

/* Video sits behind everything */
.home-video-media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.home-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark overlay */
.home-video-overlay {
  position: absolute;
  inset: 0;
	z-index: 1;
  background: #0f172a;
  pointer-events: none;
}

/* Content on top with side padding */
.home-video-content {
  position: relative;
  z-index: 2;
  padding: 64px 4vw;
  color: #fff;
  text-align: left;
}

.home-video-content h2 {
  margin: 0 0 .5rem;
  font-size: clamp(24px, 4vw, 40px);
}

.home-video-content p {
  margin: 0 0 1rem;
  max-width: 60ch;
}

.wp-block-video video {border-radius:12px;}


/* Sub pages header */
body:not(.home) .site-header {
  background-color: #000;
  border-bottom-color: #000;
  box-shadow: none;
}

/* Sub pages menu links */
body:not(.home) .site-header .primary-menu a {
  color: #fff;
}

/* Sub pages mobile toggle icon */
body:not(.home) .nav-toggle {
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}

body:not(.home) .site-header,
body:not(.home) .site-header.is-solid,
body:not(.home) .site-header.is-over-splash {
  background-color: #000;
  border-bottom-color: #000;
  box-shadow: none;
}

body:not(.home) .site-header .primary-menu a {
  color: #fff;
}

.page-top-image{
  width: 100%;
  height: 360px;
  overflow: hidden;
  background: #000;
	margin: 0;
}

.page-top-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px){
  .page-top-image{ height: 220px; }
}

/* Front page, solid header: mobile menu toggle visible on white */
.home .site-header.is-solid .nav-toggle{
  color: #475569;          /* grey text */
  border-color: #cbd5e1;   /* light grey border */
}

/* Mobile menu: keep links readable when header is solid */
@media (max-width: 900px){
  .home .site-header.is-solid .primary-menu{
    background: rgba(10,16,28,0.98);
    border-color: rgba(255,255,255,0.12);
  }

  .home .site-header.is-solid .primary-menu a{
    color: #ffffff;
  }
}

.wp-block-gallery.has-nested-images figure.wp-block-image {padding:10px;}