/*
Theme Name: CleanSeal
Theme URI: https://www.cleanseal.ie/
Author: KSM
Description: Custom theme for A Class Cleaning Services - CleanSeal.ie
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cleanseal
*/

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
    --cs-green: #96BC33;
    --cs-green-dark: #7da02a;
    --cs-blue: #2EBCEC;
    --cs-blue-dark: #1a9fd0;
    --cs-dark-grey: #444444;
    --cs-body-text: #404040;
    --cs-white: #ffffff;
    --cs-black: #000000;
    --cs-light-grey: #f5f5f5;
    --cs-font: 'Poppins', sans-serif;
	--text-xs: 1rem;
	--text-s: 1.4rem;
	--text-m: 2rem;
	--text-l: clamp(2rem, 1.6667rem + 1.0667vw, 3rem);
	--text-xl: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
	--text-xxl: clamp(3rem, 1.9437rem + 3.3803vw, 4rem);
	--grid-gap: 1rem;
	--space-xs: 1rem;
	--space-s: 2rem;
	--space-m: 4rem;
	--space-l: 6rem;
	--space-xl: 8rem;
	--space-xxl: 10rem;
	
}


/* TEXT STUFF */

:where([class*="text--"],h1,h2,h3,h4,h5,h6).text--larger {
	font-size: calc(var(--text-size) * var(--text-multiplier));
}

h1 {
  font-size: var(--text-xxl);
  --text-size: var(--text-xxl);
  line-height: 1.2;
  margin-bottom: 0.5em;
}
h2 {
  font-size: var(--text-xl);
	--text-size: var(--text-xl);
  line-height: 1.2;
  margin-bottom: 0.5em;
}
h3 {
  font-size: var(--text-l);
	--text-size: var(--text-l);
  line-height: 1.3;
  margin-bottom: 0.4em;
}
h4 {
  font-size: var(--text-m);
  --text-size: var(--text-m);
  line-height: 1.3;
  margin-bottom: 0.4em;
}
h5 {
  line-height: 1.4;
  margin-bottom: 0.3em;
}
h6 {
  line-height: 1.4;
  margin-bottom: 0.3em;
}

.text--xs {
	font-size: var(--text-xs);
	--text-size: var(--text-xs);
}
.text--s {
	font-size:  var(--text-s);
	--text-size: var(--text-s);
}
.text--m {
	font-size: var(--text-m);
	--text-size: var(--text-m);
}
.text--l {
	font-size: var(--text-l);
	--text-size: var(--text-l);
}
.text--xl {
	font-size: var(--text-xl);
	--text-size: var(--text-xl);
}
.text--xxl {
	font-size: var(--text-xxl);
	--text-size: var(--text-xxl);
  font-weight:800;
}
.text--hero {font-size: 4rem; font-weight:800;}

.text--light {
  color: var(--light);
}
.text--dark {
  color: var(--dark);
}
.font--thin {font-weight: 300; }
.font--thick {font-weight: 700;}
.text--primary {color:var(--primary);}
.text--secondary {color:var(--secondary);}
.text--accent {color:var(--accent);}
.text--xs {
  font-size:var(--text-xs);
}
.text-link--white a {color: var(--light) !important;}
.text-link--dark a {color: var(--dark);}
.link--accent-ultra-light {
  color: var(--accent-ultra-light);
}
.text-stroke-dark { -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--dark);}
.text-stroke-light { -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--light);}
.text-stroke-secondary { -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--secondary);}
.text-link--primary a {color: var(--primary);}
.text-link--primary {color: var(--primary);}
.text-link--secondary a {color: var(--secondary);}
.text-link--secondary {color: var(--secondary) !important;}
.text-uppercase { text-transform:uppercase;}
.gap-xs {gap: var(--space-xs);}
.callout-text {font-size:var(--text-m); font-weight:700;}
.text--primary {color: var(--primary); }
.text--secondary {color: var(--secondary); }
.text--accent {color: var(--accent); }
.link--white a {color: #fff !important; }
.link--white {color: #fff !important; }
/* BUTTON */
.btn--primary {background-color: var(--primary); }
.btn--secondary {background-color: var(--secondary); }
.btn--accent {background-color: var(--accent); }
.center-content {margin-left:auto; margin-right:auto;}
.text-align {text-align:center;}
.set-width {width:1200px !important; max-width:100%;}
.set-width-1600 {width:1600px !important; max-width:100%;}
.set-height-600 {height:600px;}
.set-height-500 {height:500px;}
.set-height-400 {height:400px;}
.width--50 {width:50%;}
.width--80 {width:80%;}
.width--100 {width:100%;}
.background-primary {background-color: var(--primary); }
.background-secondary {background-color: var(--secondary); }
.background-accent {background-color: var(--accent); }
.background-contrast {background-color: var(--contrast); }
.background-white {background-color: var(--light); }
.margin-top--xs {margin-top:var(--space-xs); }
.margin-top--s {margin-top:var(--space-s); }
.margin-top--m {margin-top:var(--space-m); }
.margin-top--l {margin-top:var(--space-l); }
.margin-top--xl {margin-top:var(--space-xl); }
.margin-bottom--s {margin-bottom:var(--space-xs); }
.margin-bottom--s {margin-bottom:var(--space-s); }
.margin-bottom--m {margin-bottom:var(--space-m); }
.margin-bottom--l {margin-bottom:var(--space-l); }
.margin-bottom--xl {margin-bottom: var(--space-xl); }
.margin-middle--auto {margin-top:auto; margin-bottom:auto;}
.margin-center--auto {margin-left:auto; margin-right:auto;}
.gap--xs { gap:var(--space-xs);}
.gap--s { gap:var(--space-s); --grid-gap: var(--space-s); }
.gap--m { gap:var(--space-m); --grid-gap: var(--space-m); }
.gap--l { gap:var(--space-l); --grid-gap: var(--space-l); }
.gap--xl { gap:var(--space-xl); --grid-gap: var(--space-xl); }
.pad--xs { padding:var(--space-xs);}
.pad--s { padding:var(--space-s);}
.pad--m { padding:var(--space-m);}
.pad--l { padding:var(--space-l);}
.pad--xl { padding:var(--space-xl);}
.pad--top-m {padding-top:var(--space-m);}
.pad--bottom-m {padding-bottom:var(--space-m);}
.display-flex {display:flex;}
.display-block {display:block;}
.display-grid {display:grid;}
.display-inline {display:inline;}
.grid-3 {  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
}
.grid-4-mobile-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.grid-4-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
}
@media (max-width: 992px) {
  .grid-4 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .grid-4-2 {
   grid-template-columns: repeat(2, 1fr);
     gap: 1rem
  }
}
/* STICKY STUFF*/
.sticky {
  position: sticky;
	top:0;
}
.sticky-top--l {
  top: 10%;
}

/* BORDERS */
.border-top-light { border-top: 1px solid var(--shade-ultra-light); } 
.border-bottom-light {border-bottom: 1px solid var(--shade-ultra-light); }
.border-primary {border:2px solid var(--primary);}
.border-secondary {border:2px solid var(--secondary);}
.border-light {border:2px solid var(--light);}
.border-secondary-top {border-top:2px solid var(--secondary);}
.border-dashed-light {border: 4px dashed var(--light);}
.circle {border-radius:200px;}
a {
    color: #0073aa;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #005177;
}

img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--cs-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--cs-body-text);
    background-color: var(--cs-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--cs-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--cs-blue-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cs-font);
    line-height: 1.1;
}

h1 {
    font-size: 40px;
    font-weight: 600;
    color: var(--cs-green);
}

h2 {
    font-size: 30px;
    font-weight: 700;
    color: var(--cs-black);
}

h3 {
    font-size: 20px;
    font-weight: 700;
}

p {
    margin-bottom: 1em;
}

ul {
    list-style: none;
}

.laois_container,
.laois_top_header_inner,
.laois_nav_inner,
.laois_call_banner_inner,
.laois_footer_inner,
.laois_contact_inner {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   Mobile Header Bar
   ========================================================================== */

.laois_mobile_header {
    display: none;
}

/* ==========================================================================
   Top Header Bar
   ========================================================================== */

.laois_top_header {
    background-color: var(--cs-white);
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.laois_top_header_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.laois_site_logo {
    flex-shrink: 0;
}

.laois_site_logo img {
    width: 400px;
    max-width: 100%;
    height: auto;
}

.laois_site_logo a.custom-logo-link {
    position: relative;
    display: inline-block;
}

.laois_site_logo a.custom-logo-link::after {
    content: attr(title);
    position: absolute;
    bottom: -30px;
    left: 0;
    background-color: var(--cs-dark-grey);
    color: var(--cs-white);
    font-size: 13px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.laois_site_logo a.custom-logo-link:hover::after {
    opacity: 1;
}

.laois_site_description {
    font-size: 13px;
    color: var(--cs-green);
    font-weight: 400;
    margin-top: 4px;
    margin-bottom: 0;
}

.laois_header_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.laois_header_phone {
    font-size: 16px;
    font-weight: 600;
    color: var(--cs-blue);
}

.laois_header_phone a {
    color: var(--cs-blue);
    font-weight: 600;
}

.laois_header_phone a:hover {
    color: var(--cs-blue-dark);
}

/* Trust Badges */
.laois_trust_badges {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--cs-body-text);
}

.laois_trust_badges span {
    position: relative;
    padding-left: 10px;
}

.laois_trust_badges span::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--cs-green);
    font-weight: 700;
}

/* ==========================================================================
   Main Navigation
   ========================================================================== */

.laois_main_nav {
    background-color: var(--cs-dark-grey);
    position: relative;
    z-index: 100;
}

.laois_nav_inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.laois_nav_menu {
    display: flex;
    gap: 0;
}

.laois_nav_menu li a {
    display: block;
    padding: clamp(8px, 1vw, 12px) clamp(10px, 1.5vw, 20px);
    color: var(--cs-white);
    font-size: clamp(11px, 1.1vw, 14px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
}

.laois_nav_menu li a:hover,
.laois_nav_menu li.current-menu-item a {
    background-color: var(--cs-green);
    color: var(--cs-white);
}

/* Hamburger Menu */
.laois_hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 110;
}

.laois_hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--cs-white);
    margin: 2px 0;
    transition: all 0.3s ease;
}

.laois_hamburger.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.laois_hamburger.is-active span:nth-child(2) {
    opacity: 0;
}

.laois_hamburger.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.laois_hero {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--cs-dark-grey);
}

.laois_hero_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}

.laois_hero_overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 60px 20px;
}

.laois_hero_logo {
    max-width: 300px;
    height: auto;
    margin: 0 auto 15px;
}

.laois_hero_overlay h1 {
    font-size: 52px;
    font-weight: 700;
    color: var(--cs-white);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 5px;
}

.laois_hero_overlay h1 .green {
    color: var(--cs-green);
}

.laois_hero_overlay h1 .blue {
    color: var(--cs-blue);
}

.laois_hero_brand {
    max-width: 400px;
    margin: 0 auto 15px;
}

.laois_hero_subtitle {
    font-size: 20px;
    color: var(--cs-white);
    font-weight: 400;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   CTA Buttons Row
   ========================================================================== */

.laois_cta_row {
    display: flex;
    width: 100%;
}

.laois_cta_row .laois_cta_btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    color: var(--cs-white);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    transition: filter 0.3s ease;
}

.laois_cta_btn:hover {
    filter: brightness(1.1);
    color: var(--cs-white);
}

.laois_cta_btn--green {
    background-color: var(--cs-green);
}

.laois_cta_btn--blue {
    background-color: var(--cs-blue);
}

/* ==========================================================================
   Callout Boxes
   ========================================================================== */

.laois_callouts_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    overflow: hidden;
}

.laois_callout_box {
    position: relative;
    background-color: var(--cs-dark-grey);
    padding: 40px 30px;
    color: var(--cs-white);
    overflow: hidden;
}

.laois_callout_box:nth-child(2) {
    background-color: #3a3a3a;
}

.laois_callout_box h3 {
    color: var(--cs-green);
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.laois_callout_text {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 2;
}

.laois_callout_box .laois_bubbles {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    opacity: 0.15;
    z-index: 1;
}

@media (max-width: 992px) {
    .laois_callouts_grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Content Section
   ========================================================================== */

.laois_content_section {
    padding: 50px 0;
    background-color: var(--cs-white);
    background-image: url('/wp-content/uploads/bubbles-bg.svg');
    background-position: 100% 100%;
    background-size: 200px 200px;
    background-repeat: no-repeat;
}

/* Content Lists */
.laois_content_section ul,
.laois_container ul:not([class]) {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5em;
}

.laois_content_section ul li,
.laois_container ul:not([class]) li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 8px;
    line-height: 1.6;
}

.laois_content_section ul li::before,
.laois_container ul:not([class]) li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    font-size: 16px;
    color: var(--cs-green);
    background-color: rgba(150, 188, 51, 0.12);
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    margin-top: 3px;
}

/* WordPress Gallery */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.5em;
}

.gallery-item {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    text-align: center;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.gallery-icon {
    line-height: 0;
}

.gallery-caption {
    font-size: 13px;
    color: var(--cs-body-text);
    padding: 5px 0;
}

@media (max-width: 992px) {
    .gallery-item {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .gallery-item {
        flex: 1 1 100%;
    }
}

.laois_content_section h2 {
    margin-bottom: 20px;
  color: var(--cs-green);
}

.laois_content_section p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--cs-body-text);
}

.laois_content_section p a {
    color: var(--cs-blue);
    text-decoration: underline;
}

.laois_content_section p a:hover {
    color: var(--cs-blue-dark);
}

.laois_content_cta {
    margin-top: 25px;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 600;
}

.laois_content_cta a {
    color: var(--cs-blue);
}

/* ==========================================================================
   Contact Section
   ========================================================================== */

.laois_contact_section {
    padding: 50px 0;
    background-color: var(--cs-light-grey);
}

.laois_contact_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.laois_contact_left,
.laois_contact_right {
    min-width: 0;
}

#laois_map {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 4px;
}

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

/* ==========================================================================
   Services Grid
   ========================================================================== */

.laois_services_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 40px;
}

.laois_service_card {
    position: relative;
    background-color: var(--cs-dark-grey);
    padding: 40px 30px;
    color: var(--cs-white);
    overflow: hidden;
}

.laois_service_card:nth-child(2) {
    background-color: #3a3a3a;
}

.laois_service_card h3 {
    color: var(--cs-green);
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.laois_service_card p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 2;
}

.laois_service_card .laois_bubbles {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    opacity: 0.15;
    z-index: 1;
}

/* ==========================================================================
   Reviews Section
   ========================================================================== */

.laois_reviews_section {
    padding: 50px 0;
    background-color: var(--cs-light-grey);
}

.laois_reviews_section h2 {
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 24px;
}

.laois_reviews_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

.laois_review_card {
    background-color: var(--cs-white);
    padding: 25px;
    border-radius: 4px;
    box-shadow: 6px 6px 9px rgba(0, 0, 0, 0.2);
}

.laois_review_card .laois_review_title {
    font-size: 14px;
    font-weight: 700;
    color: var(--cs-black);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.laois_review_card .laois_review_stars {
    color: #f5a623;
    font-size: 18px;
    margin-bottom: 10px;
}

.laois_review_card .laois_review_text {
    font-size: 14px;
    color: var(--cs-body-text);
    line-height: 1.6;
    margin-bottom: 12px;
}

.laois_review_card .laois_review_author {
    font-size: 13px;
    font-weight: 600;
    color: var(--cs-dark-grey);
}

.laois_review_card .laois_review_date {
    font-size: 12px;
    color: #999;
}

.laois_reviews_link {
    text-align: center;
}

.laois_reviews_link a {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--cs-blue);
    color: var(--cs-white);
    border-radius: 9999px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.laois_reviews_link a:hover {
    background-color: var(--cs-blue-dark);
    color: var(--cs-white);
}

/* ==========================================================================
   Call Banner
   ========================================================================== */

.laois_call_banner {
    background-color: var(--cs-green);
    padding: 30px 0;
    text-align: center;
}

.laois_call_banner p {
    color: var(--cs-white);
    font-size: 18px;
    margin-bottom: 5px;
}

.laois_call_banner .laois_phone_number {
    font-size: 32px;
    font-weight: 700;
    color: var(--cs-white);
}

.laois_call_banner .laois_phone_number a {
    color: var(--cs-white);
}

.laois_call_banner .laois_phone_number a:hover {
    color: var(--cs-dark-grey);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.laois_site_footer {
    background-color: var(--cs-dark-grey);
    color: var(--cs-white);
    padding: 40px 0 20px;
}

.laois_footer_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.laois_footer_col h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--cs-green);
    margin-bottom: 10px;
    font-family: var(--cs-font);
}

.laois_footer_col p,
.laois_footer_col li {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}

.laois_footer_col a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.laois_footer_col a:hover {
    color: var(--cs-green);
}

.laois_footer_rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.laois_footer_rating .laois_stars {
    color: #f5a623;
    font-size: 16px;
}

.laois_footer_rating span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.laois_footer_bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 992px) {
    .laois_footer_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .laois_services_grid {
        grid-template-columns: 1fr;
    }

    .laois_reviews_grid {
        grid-template-columns: 1fr;
    }

    .laois_hero_overlay h1 {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    /* Show mobile header, hide desktop header and nav bar */
    .laois_mobile_header {
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        padding: 0;
        background-color: var(--cs-white);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 200;
    }

    .laois_top_header {
        display: none;
    }

    .laois_main_nav {
        display: none;
    }

    .laois_main_nav.is-open {
        display: block;
    }

    .laois_mobile_logo {
        padding: 12px 15px;
    }

    .laois_mobile_logo img {
        height: 40px;
        width: auto;
        max-width: 160px;
    }

    .laois_mobile_call {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--cs-green);
        width: 56px;
        height: 100%;
        transition: background-color 0.3s ease;
    }

    .laois_mobile_call:hover {
        background-color: var(--cs-green-dark);
    }

    .laois_mobile_call img {
        width: 24px;
        height: 24px;
        filter: brightness(0) invert(1);
    }

    .laois_hamburger--mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--cs-dark-grey);
        border: none;
        cursor: pointer;
        width: 60px;
        height: 100%;
        padding: 10px 0;
        gap: 0;
        transition: background-color 0.3s ease;
    }

    .laois_hamburger--mobile:hover {
        background-color: var(--cs-black);
    }

    .laois_hamburger_lines {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .laois_hamburger_lines span {
        display: block;
        width: 20px;
        height: 2px;
        background-color: var(--cs-white);
        transition: all 0.3s ease;
        border-radius: 2px;
    }

    .laois_hamburger_label {
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--cs-white);
        margin-top: 5px;
        letter-spacing: 0.5px;
        line-height: 1;
    }


    /* Desktop hamburger hidden on mobile (using mobile one instead) */
    .laois_hamburger--desktop {
        display: none;
    }

    .laois_nav_menu {
        display: none;
        flex-direction: column;
        background-color: var(--cs-dark-grey);
        z-index: 100;
    }

    .laois_nav_menu.is-open {
        display: flex;
		width:100%;
    }

    .laois_nav_menu li a {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .laois_cta_row {
        flex-wrap: wrap;
    }

    .laois_cta_row .laois_cta_btn {
        flex: 1 1 50%;
    }

    .laois_hero_overlay h1 {
        font-size: 28px;
    }

    .laois_hero_brand {
        max-width: 280px;
    }

    .laois_footer_grid {
        grid-template-columns: 1fr;
    }