/*!
Theme Name: blackthornSTAV
Theme URI: http://underscores.me/
Author: Stavros Gazis
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: blackthorn
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

blackthorn is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/



  .card h3,
  .col h3 {

    margin: 2px 0px 15px 0px;
  }

  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Inter:wght@400;500;600&display=swap');

  /* BRAND COLOURS */
  :root {
    --deep-green: #0d2b2b;
    --gold: #f4c06a;
    --offwhite: #faf8f5;
    --text: #222;
    --muted: #666;
    --radius: 14px;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    --transition: all 0.35s ease;
  }

  .page-title {
    display: none;
  }

  /* BASE */
  body {
    font-family: "Inter", sans-serif;
    background: var(--offwhite);
    color: var(--text);
    margin: 0;
    padding: 0;
    line-height: 1.7;
    overflow-x: hidden;
  }

  h1,
  h2,
  h3 {
    font-family: "Playfair Display", serif;
    line-height: 1.3;
    color: var(--deep-green);
  }

  .container {
    max-width: 1150px;
    /*   margin: 0 auto; */
    /*   padding: 4rem 1.5rem; */
  }

  /* HERO SECTION */
  .hero {
    background: radial-gradient(circle at top left, #144c4c 0%, #0d2b2b 80%);
    color: #fff;
    text-align: center;
    padding: 7rem 1rem;
    position: relative;
    overflow: hidden;
  }

  .hero::after {
    content: "";
    position: absolute;
    top: -20%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: var(--gold);
    filter: blur(120px);
    opacity: 0.25;
  }

  .hero h1 {
    font-size: 2.8rem;
    color: #fff;
    animation: fadeSlideUp 1.2s ease both;
  }

  .hero .tagline {
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-size: 1rem;
    animation: fadeSlideUp 1.5s ease both;
  }

  .hero .intro {
    max-width: 700px;
    margin: 1rem auto 2rem;
    font-size: 1.1rem;
    color: #eaeaea;
    animation: fadeSlideUp 1.8s ease both;
  }

  .btn-primary {
    display: inline-block;
    background: var(--gold);
    color: var(--deep-green);
    padding: 0.9rem 2rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    animation: fadeSlideUp 2s ease both;
  }

  .btn-primary:hover {
    background: #ffd98e;
    transform: translateY(-4px);
  }

  /* COMPARISON SECTION */
  .compare {
    background: var(--offwhite);
  }

  .compare h2 {
    text-align: center;
    color: var(--deep-green);
    margin-bottom: 2.5rem;
  }

  .comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
  }

  .col {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
  }

  .col:hover {
    transform: translateY(-6px);
  }

  .col.legal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #ffefef 0%, #fbe3e3 100%);
    opacity: 0.6;
    z-index: 0;
  }

  .col h3 {
    position: relative;
    z-index: 1;
    color: var(--deep-green);
  }

  .col ul {
    position: relative;
    z-index: 1;
    padding-left: 1.2rem;
  }

  /* WHY US */
  .why-us {
    background: linear-gradient(135deg, #ffffff, #f5f5f2);
  }

  .why-us h2 {
    text-align: center;
    color: var(--deep-green);
    margin-bottom: 2.5rem;
  }

  .why-us .grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .card {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    border-top: 4px solid transparent;
    transition: var(--transition);
  }

  .card:hover {
    border-top: 4px solid var(--gold);
    transform: translateY(-5px);
  }

  /* CTA SECTION */
  .cta {
    background: var(--deep-green);
    color: #fff;
    text-align: center;
    padding: 5rem 1rem;
    position: relative;
    overflow: hidden;
  }

  .cta::before {
    content: "";
    position: absolute;
    right: -15%;
    bottom: -10%;
    width: 350px;
    height: 350px;
    background: var(--gold);
    opacity: 0.2;
    filter: blur(100px);
  }

  .cta h2 {
    color: #fff;
    font-size: 2.2rem;
  }

  .cta p {
    max-width: 700px;
    margin: 1rem auto 2.5rem;
    color: #eaeaea;
    font-size: 1.1rem;
  }

  .cta .btn-primary {
    background: var(--gold);
    color: var(--deep-green);
  }

  .cta .btn-primary:hover {
    background: #ffd98e;
  }

  /* REVIEWS */
  .reviews {
    background: #F8F5F1;
    padding: 4rem 2rem;
    text-align: center;
  }

  .reviews h2 {
    font-size: 2rem;
    color: #0F172A;
    margin-bottom: 2rem;
    position: relative;
  }

  .reviews h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: #D4AF37;
    margin: 1rem auto 0;
  }

  .review-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    max-width: 1100px;
    margin: 0 auto;
  }

  .review-card {
    background: #fff;
    border-left: 4px solid #D4AF37;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15);
  }

  .review-card p {
    color: #334155;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.8rem;
    font-style: italic;
  }

  .reviewer {
    display: block;
    color: #B91C1C;
    font-weight: 600;
    font-size: 0.9rem;
  }

  /* MOBILE OPTIMIZATION */
  @media (max-width: 768px) {

    .comparison-grid,
    .why-us .grid,
    .review-grid {
      grid-template-columns: 1fr;
    }

    .hero h1 {
      font-size: 2rem;
    }

    .hero .intro {
      font-size: 1rem;
    }

    .btn-primary {
      padding: 0.7rem 1.5rem;
      font-size: 0.95rem;
    }

    .review-card {
      padding: 1rem;
    }

    .reviews h2,
    .compare h2,
    .why-us h2 {
      font-size: 1.8rem;
    }

    .card h3,
    .col h3 {
      font-size: 1.1rem;
    }

    .col ul li {
      font-size: 0.95rem;
    }
  }

  @media (max-width: 480px) {
    .hero h1 {
      font-size: 1.7rem;
    }

    .hero .intro {
      font-size: 0.95rem;
    }

    .btn-primary {
      padding: 0.6rem 1.2rem;
      font-size: 0.9rem;
    }

    .review-card p {
      font-size: 0.95rem;
    }
  }

  /* ANIMATIONS */
  @keyframes fadeSlideUp {
    0% {
      opacity: 0;
      transform: translateY(40px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }


  .article-loop.current-post {
    opacity: 0.5;
    pointer-events: none; /* disables clicks */
    cursor: default;
}

body {
    margin: 0px;
}


.contenDiv.page-content {
  font-family: Arial;
}


.menu-toggle.fixed {
  position: fixed;
  top: 1px;
  right: 0px;
    font-size: 16px;

  /*
    top: 4px;
      color: black;
    font-size: 16px;
  
    */
  z-index: 9999;
  // background: rgba(60, 60, 60, 0.45);
background: black;
  backdrop-filter: blur(3px);
  padding: 4px 4px 4px 4px;
  border-radius: 4px;
  opacity: 1;
  /* fade to fully visible */
}

body.no-scroll {
  overflow: hidden;
  /* prevent background page from scrolling */
  position: fixed;
  width: 100%;
}


/* Container: grid layout */
.my-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 57px 0px 0px 0px;
  padding: 0px 20px 0px 20px;
}


.breadcrumbs {
    font-family: Arial;
    color: gray;
    margin: 20px 0px 34px 16px;
    font-size: 12px;
  }

.breadcrumb_parent {
	text-decoration: none;
	color: #6F6F7E;
}

.breadcrumb_child {
  text-decoration: none;
  color: #6F6F7E;
}


/* Remove default link styling, make whole card clickable */
.my-posts>a {
  text-decoration: none;
  color: inherit;
  display: block;
  font-family: Arial;
}

.flex-info {
  display: none!important;
}


/* Article card */
.article-loop {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-loop:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Image */
.article-loop .attachment-post-thumbnail {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}


.article-loop h2 {
  font-size: 1.25rem;
  margin: 0.75rem 1rem 0.5rem 1rem;
  line-height: 1.3;

  display: -webkit-box;
  /* Needed for line clamp */
  -webkit-line-clamp: 2;
  /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  /* Required */
  overflow: hidden;
  /* Hide excess text */
  text-overflow: ellipsis;
  /* Add ... at the end */
}



/* Meta info */
.article-loop .flex-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #555;
  margin-bottom: 0.75rem;
}

.article-loop .flex-info p {
  margin: 0;
}

/* Excerpt */
.article-loop p:not(.flex-info p) {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  margin: 0 1rem 1rem 1rem;
}

/* Responsive typography */
@media (max-width: 600px) {
  .article-loop h2 {
    font-size: 1.1rem;
  }

  .article-loop .flex-info {
    font-size: 0.8rem;
  }

  .article-loop p:not(.flex-info p) {
    font-size: 0.95rem;
  }
}



.hero-section {
  position: relative;
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.hero-title-overlay {
	text-align: center !important;
	width: 100%;
}

/* Styling for the actual background image tag */
.hero-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures the image covers the entire container */
 /* filter: blur(8px); */
  /* Apply blur directly to the image */
  z-index: -1;
  /* Place it behind all other content in the section */
}


.about-us-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 300px;
  height: 300px;
  font-size: 1.5rem;
  font-family: sans-serif;
  font-weight: bold;
  color: white;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
  width: 100%;
}


.about-us-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
 /* border: 1px solid white; */
  width: 92%;
  height: 100%;
  z-index: -1;
}

/* Removed .about-us-container::after since we only need one square */



/* ===========================
   Hero header
=========================== */
.hero-header {
  background: url('https://img.freepik.com/free-photo/high-angle-domino-pieces-arrangement_23-2149382438.jpg') no-repeat center center;
  background-size: cover;
  padding: 0px 0;
  color: #fff;
  position: relative;
  transition: padding 0.3s ease;
  z-index: 1000;
}


.custom-logo {
  width: 225px;
  height: 225px;
}


/* Inner hero with semi-transparent overlay */
.hero-inner {
  margin: 0 auto;
  background: rgba(68, 68, 68, 0.7);
  padding: 20px 20px 30px 20px;
  transition: padding 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.brand-text .site-title {
  margin: 0;
  font-size: 2rem;
  font-family: 'Lato', sans-serif;
  transition: font-size 0.3s ease;
  color: white;
}

.brand-text .site-slogan {
  margin: 0;
  font-size: 1rem;
  opacity: 0.9;
  font-family: 'Lato', sans-serif;
  transition: font-size 0.3s ease, opacity 0.3s ease;
}


/* Sticky header */
.hero-header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: all 0.3s ease;
}



/* Shrink class for scrolling */
.hero-header.shrink {
  margin: 0px 0px 46px 0px;
  padding: 0px!important;
}

     .custom-logo.shrink {
       width: 60px;
       transition: width 0.3s ease;
       height: 60px;
     }

.hero-header.shrink .hero-inner {
  padding: 40px 20px 40px 20px;
}

.hero-header.shrink .brand {
  gap: 10px;
  margin-bottom: 10px;
}

.hero-header.shrink .brand-text .site-title {
  font-size: 1.4rem;
}

.hero-header.shrink .brand-text .site-slogan {
  font-size: 0;
  opacity: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .brand {
    display: block;
    text-align: center;
  }
}


/* Shrink class for scrolling (or now for other pages) */
.hero-header.shrink {
  padding: 10px 0;
}


.hero-header.shrink .brand {
  gap: 10px;
  margin-bottom: 10px;
}

.hero-header.shrink .brand-text .site-title {
  font-size: 1.4rem;
}

.hero-header.shrink .brand-text .site-slogan {
  font-size: 10;
 // opacity: 0;
}





/* ===========================
   Base Navigation (Desktop)
=========================== */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* inline row */
  gap: 20px;
  text-align: center;
}


  .main-nav li {
      position: relative;
      font-family: Arial;
      font-size: 16px;
      text-align: left;
    
}

.main-nav a {
  text-decoration: none;
  color: #fff;
  padding: 8px 12px;
  display: block;
  transition: background 0.2s ease;
}

.main-nav a:hover {
  background: #f0f0f0;
}

/* Sub-menus hidden by default on desktop */
.main-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  /* below parent */
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 180px;
  list-style: none;
  padding: 8px 0;
  z-index: 999;
}

/* Show submenu on hover (desktop) */
@media (min-width: 769px) {
  .main-nav li:hover>.sub-menu {
    display: block;
  }
}
.main-nav a {
  color: #fff;
}

.main-nav .sub-menu li a {
  padding: 8px 15px;
  white-space: nowrap;
  color: #333;
}

.main-nav .sub-menu li a:hover {
  background: #eee;
}

/* Hide hamburger on desktop */
.menu-toggle {
  display: none;
  background: none;
  border: none;
 font-size: 24px;
  cursor: pointer;
  color: white;
}


.main-nav .menu li.current-menu-item>a {
  color: #999;
  /* gray text */
  pointer-events: none;
  /* optional: prevent clicking */
  opacity: 0.6;
  /* optional: slightly faded */
}

/* Add a down caret for items with submenus */
.main-nav li.menu-item-has-children>a::after {
  content: " ▼";
  /* Unicode down arrow */
  font-size: 0.7em;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

/* Optional: rotate the caret when submenu is open (for mobile toggle) */
@media (max-width: 768px) {
  .main-nav li.menu-item-has-children.active>a::after {
    transform: rotate(180deg);
  }
}
.menu-close {
  display: none;
}


/* =========================== Mobile Styles =========================== */

@media (max-width: 768px) {

  .menu-close {
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    z-index: 1100;
  }

  .main-nav {
    display: none;
    /* menu starts hidden */
    flex-direction: column;
    background: #fff;
    border: 1px solid #d1d1d1;
    /* choose one border */
    border-radius: 5px;
    padding: 10px;
    position: fixed;
    left: 0;
    top: 8px;
    width: 320px;
    /* fixed width */
    z-index: 1000;
    font-size: 16px;
    font-family: Arial;
    max-height: calc(82vh - 16px);
    /* scrollable */
    overflow-y: auto;
    box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.33);
  }

  .main-nav.active {
    display: flex;
    /* show when toggled */
  }

  .main-nav a {
    color: #333;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 8px;
      text-align: left;

  }

  .main-nav .sub-menu {
    display: flex;
    position: static;
    border: none;
    background: none;
    padding-left: 15px;
    flex-direction: column;
  }

  .menu-toggle {
    display: block;
    color: white;
    transition: all 0.3s ease-in-out;
    opacity: 0.8;
  }
}



/* ===========================
   Hero Section
=========================== */
.hero {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  position: relative;
}

.hero h1 {
font-family: Arial;
  font-size: 3rem;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  margin: 0;
}

/* ===========================
   General Content Styling
=========================== */
.page-content,
.post-content {
 /* max-width: 900px; */
  margin: 0 auto;
  padding: 5px 0px;
  font-family: Arial;
  /* font-family: 'Lora', serif; */
  color: #222;
  line-height: 1.8;
}

.page-title {
  /* font-family: 'Playfair Display', serif; */
  font-family: Arial;
  font-size: 2.2rem;
  margin-bottom: 30px;
  text-align: center;
  color: #111;
}


    .entry-content {
      margin: -20px 0px 0px 0px;
      padding: 46px 50px 56px 50px;
      max-width: 900px;
  margin: 0px auto;
    }


/* Paragraphs */
.entry-content p {
  font-size: 1.05rem;
  margin-bottom: 20px;
  color: #444;
}

/* Links */
.entry-content a {
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #111;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.entry-content a:hover {
  color: #555;
  border-color: #555;
}

/* Images */
.entry-content img {
  max-width: 100%;
  border-radius: 10px;
  margin: 30px 0;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.entry-content img:hover {
  transform: scale(1.02);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.15);
}

/* Headings inside content */
.entry-content h2,
.entry-content h3,
.entry-content h4 {

  /*font-family: Arial; */
  color: #424242;
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 19px;
  
}

/* Responsive */
@media (max-width: 900px) {
  .hero {
    height: 300px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .page-content,
  .post-content {
    padding: 5px 0px;
  }

  .page-title {
    font-size: 2rem;
  }
}
@media (max-width: 600px) {
.entry-content { 
  padding: 46px 11px 56px 11px;
}
}


@media (max-width: 460px) {

.section {
  padding: 0px 4px!important;
}
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


a {
  text-decoration: none;
  color: inherit;
}


.btn {
  background: #2b7389;
  /* Accent colour */
  padding: 0.8rem 2rem;
  border-radius: 30px;
  font-weight: bold;
  transition: background 0.3s ease;
}


.btn:hover {
  background: #d32f2f;
}

section {
  padding: 0px 20px;
  max-width: 1100px;
  margin: 0 auto;
}



section h2::after {
  content: "";
  width: 60px;
  height: 3px;
  display: block;
  margin: 10px auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.card {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}


.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.feature-card {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card h3 {
  color: #2b7389;
  /* accent colour */
  margin-bottom: 15px;
  text-align: center;
}

.feature-card p {
  text-align: center;
  color: #000;
}


.comparison-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.comparison-topic h3 {
  text-align: center;
  margin-bottom: 1rem;
}

.cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  /* allows mobile stacking */
  justify-content: center;
}

.feature-card {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 10px;
  width: 300px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex: 1 1 300px;
  /* grows but doesn't shrink too much */
}

.feature-card.mediation {
  border-top: 4px solid #4CAF50;
}

.feature-card.court {
  border-top: 4px solid #F44336;
}

.feature-card h4 {
  margin-top: 0;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 700px) {
  .cards {
    flex-direction: column;
    align-items: center;
  }
}