/*
Theme Name: EPR law
Author: realityhouse
Author URI: https://realityhouse.co.uk/
Description: EPR law
Version: 1.0
*/

/* --------------------------------------------------
   IMPORT FONTS
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
/*@font-face {
   font-family: 'DM Sans';
   src: url('assets/fonts/DMSans-9ptItalic.woff2') format('woff2'),
       url('assets/fonts/DMSans-9ptItalic.woff') format('woff');
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'DM Sans';
   src: url('assets/fonts/DMSans-9ptRegular.woff2') format('woff2'),
       url('assets/fonts/DMSans-9ptRegular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}*/



/* --------------------------------------------------
   CSS VARIABLES (COLORS, SHADOWS, GRADIENTS)
-------------------------------------------------- */
:root {
  /* White */
  --epr-white: #FFFFFF;

  /* Purple Scale */
  --epr-purple-950: #1F076E;
  --epr-purple-900: #3811A1;
  --epr-purple-800: #4312C5;
  --epr-purple-700: #4F16EB;
  --epr-purple-600: #622EFF; /* Main color */
  --epr-purple-500: #704DFF;
  --epr-purple-400: #9280FF;
  --epr-purple-300: #B6AEFF;
  --epr-purple-200: #D5D2FF;
  --epr-purple-100: #E9E7FF;
  --epr-purple-50: #F2F2FF;

  /* Green Scale */
  --epr-green-950: #10280B;
  --epr-green-900: #254A1D;
  --epr-green-800: #2A561E;
  --epr-green-700: #306C1F;
  --epr-green-600: #3C8D23;
  --epr-green-500: #52B431; /* Main color */
  --epr-green-400: #71CC4F;
  --epr-green-300: #95DD79;
  --epr-green-200: #BEECAA;
  --epr-green-100: #DEF5D2;
  --epr-green-50: #F0FBEA;

  /* Metal Scale */
  --epr-metal-950: #14161E;
  --epr-metal-900: #1F2129; /* Main color */
  --epr-metal-800: #353841;
  --epr-metal-700: #484F5C;
  --epr-metal-600: #616678;
  --epr-metal-500: #7C8292;
  --epr-metal-400: #969CAC;
  --epr-metal-300: #B0B5C5;
  --epr-metal-200: #CACED9;
  --epr-metal-100: #E2E4EB;
  --epr-metal-50: #F4F5F7;

  /* Greyscale (Charcoal) */
  --epr-grey-500: #5C5C5E;
  --epr-grey-400: #7D7D80;
  --epr-grey-300: #C0C0C1;
  --epr-grey-200: #D1D1D1;
  --epr-grey-100: #E5E5E8;
  --epr-grey-50: #F5F5F7;

  /* Accent Colors */
  --epr-accent-yellow: #FFC200;
  --epr-accent-teal: #00E48F;
  --epr-accent-sky: #11BBEE;

  /* System Colors (Overrides green, yellow, red, blue) */
  --epr-green-500: #53D258;
  --epr-green-400: #75DB79;
  --epr-green-300: #98E49B;
  --epr-green-200: #BAEDBC;
  --epr-green-100: #DDF6DE;

  --epr-yellow-500: #FFC200;
  --epr-yellow-400: #FFCE32;
  --epr-yellow-300: #FFDD72;
  --epr-yellow-200: #FFEAA7;
  --epr-yellow-100: #FFF5D4;

  --epr-red-500: #E25C5C;
  --epr-red-400: #E87D7D;
  --epr-red-300: #EE9D9D;
  --epr-red-200: #F3BEBE;
  --epr-red-100: #F9DEDE;

  --epr-blue-500: #2D76F6;
  --epr-blue-400: #60A2FA;
  --epr-blue-300: #93C3FD;
  --epr-blue-200: #BFDAFE;
  --epr-blue-100: #DBE9FE;

  /* Drop Shadows */
  --epr-shadow-sm: 0 1px 2px rgba(179, 185, 193, 0.4);
  --epr-shadow-md: 0 4px 8px rgba(179, 185, 193, 0.4);
  --epr-shadow-lg: 0 16px 36px rgba(179, 185, 193, 0.3);

  /* Gradients (ERP Styles) */
  --epr-gradient-epr-purple: linear-gradient(77deg, var(--epr-purple-600), #331E83);
  --epr-gradient-epr-purple-reverse: linear-gradient(77deg, #331E83, var(--epr-purple-600));
  --epr-gradient-light-purple: linear-gradient(77deg, #4C00FF, #7E29FF);
  --epr-gradient-blue-green: linear-gradient(77deg, var(--epr-green-600), var(--epr-accent-sky));
  --epr-gradient-metal: linear-gradient(77deg, var(--epr-metal-900), var(--epr-metal-800));

  /* Gradients (Teal Accents) */
  --epr-gradient-teal-darkgreen: linear-gradient(77deg, #0C2E22, var(--epr-accent-teal));
  --epr-gradient-teal-sky: linear-gradient(77deg, var(--epr-accent-teal), var(--epr-accent-sky));
}

/* --------------------------------------------------
   FONT STYLES - HEADINGS, TEXT, LABELS
-------------------------------------------------- */

h1 {
   font-family: 'DM Sans', sans-serif;
   font-weight: 400;
   font-size: 56px;
   line-height: 64px;
}

h2 {
   font-family: 'DM Sans', sans-serif;
   font-weight: 400;
   font-size: 48px;
   line-height: 56px;
}

h3 {
   font-family: 'DM Sans', sans-serif;
   font-weight: 400;
   font-size: 40px;
   line-height: 48px;
}

h4 {
   font-family: 'DM Sans', sans-serif;
   font-weight: 400;
   font-size: 32px;
   line-height: 40px;
}

h5 {
   font-family: 'DM Sans', sans-serif;
   font-weight: 400;
   font-size: 24px;
   line-height: 32px;
}

h6 {
   font-family: 'DM Sans', sans-serif;
   font-weight: 400;
   font-size: 20px;
   line-height: 28px;
}

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

p, a, li {
   font-family: 'DM Sans', sans-serif;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
}

li {
   margin-bottom: 16px;
}

li::marker {
   font-weight: 700;
}

p a {
   font-weight: 700;
}

p a:hover {
   text-decoration: underline;
}

label {
   font-family: 'DM Sans', sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 22px;
}

.epr-tiny {
   font-size: 12px;
   line-height: 20px;
}

/* --------------------------------------------------
  BUTTONS & INTERACTIVE ELEMENTS
-------------------------------------------------- */

button,
input[type="submit"].button {
   color: var(--epr-white);
   font-size: 16px;
   font-weight: 700;
   background: var(--epr-metal-900);
   padding: 16px 38px !important;
   width: fit-content;
   border: 1px solid var(--epr-metal-900);
   border-radius: 8px !important;
   cursor: pointer;
   transition: all 0.3s ease-in-out;
}

button:hover,
input[type="submit"].button:hover {
   translate: 0px 1px;
   background: var(--epr-white);
   filter: drop-shadow(var(--epr-shadow-lg));
   color: var(--epr-metal-900);
}

button.download {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   background: var(--epr-white);
   color: var(--epr-metal-900);
   border: 1px solid var(--epr-white);
}

button.download svg path {
   stroke: var(--epr-metal-900);
   transition: all ease-in-out 0.3s;
}

button.download:hover {
   translate: 0px 1px;
   background: var(--epr-metal-900);
   color: var(--epr-white);
   border: 1px solid var(--epr-metal-900);
}

button.download:hover svg path {
   stroke: var(--epr-white);
}

:focus-visible {
   outline-color: var(--epr-metal-900);
}

/* --------------------------------------------------
  FONT STYLES - BOLD HELPERS
-------------------------------------------------- */

.epr-bold {
   font-weight: 700;
}

strong {
   font-weight: 700;
}

/* --------------------------------------------------
   GLOBAL STYLES
-------------------------------------------------- */

* {
   margin: 0;
}

html {
   scroll-behavior: smooth;
}


main {
   margin: 0;
   padding: 0 24px;
}

section {
   max-width: 1394px;
   margin: 64px auto 64px auto;
}

/* remove spinner from contact form 7 */
.wpcf7-spinner {
   display: none !important;
}

.error404 main {
    text-align: center;
}

/* --------------------------------------------------
   NAVIGATION STYLES
-------------------------------------------------- */

/* Sticky header with logo and navigation */
header {
   position: sticky;
   top: 0;
   z-index: 100;
   background: var(--epr-white);
   border-bottom: 1px solid var(--epr-metal-200);
   padding: 0px 24px;
}

/* Header inner container */
header .container {
   padding-top: 16px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   max-width: 1394px;
   margin: 0 auto;
   height: 84px;
   align-items: center;
}

/* Hamburger menu toggle (hidden by default) */
header .container .hamburger {
   display: none;
}

/* Logo styling */
#site-logo {
   justify-self: flex-start;
}

#site-logo img {
   width: 116px;
   height: 49px;
   filter: grayscale(1);
}

/* Main nav container */
#main-navigation {
   width: 100%;
}

/* Top-level nav list */
#main-navigation ul {
   display: flex;
   gap: 32px;
   list-style: none;
   justify-self: flex-end;
}

/* Contact button in nav */
#main-navigation ul li.contact a {
   padding: 12px 20px;
   font-weight: 700;
   color: var(--epr-white);
   background: var(--epr-metal-900);
   border-radius: 8px;
   border: 1px solid var(--epr-metal-900);
   transition: all 0.3s ease-in-out;
}

#main-navigation ul li.contact a:hover {
   translate: 0px 1px;
   background: var(--epr-white);
   color: var(--epr-metal-900);
   filter: drop-shadow(var(--epr-shadow-md));
}

/* Basic nav link styling */
nav a {
   text-decoration: none;
   color: var(--epr-metal-900);
   height: 100%;
   transition: all 0.3s ease-in-out;
   border-bottom: 2px solid transparent;
}

nav a:hover {
   border-bottom: 2px solid var(--epr-metal-900);
}

/* Remove underline from parent menu items */
#menu-main-menu > li.menu-item.menu-item-has-children > a {
   border: none;
}

/* Show chevron on dropdown links */
.menu-item-has-children > a {
   position: relative;
   display: flex;
   align-items: center;
   gap: 5px;
}

.menu-item-has-children > a::after {
   content: "";
   display: inline-block;
   width: 24px;
   height: 24px;
   margin-left: 5px;
   background-image: url('/wp-content/themes/EPRlaw/assets/images/Chevron-Down.svg');
   background-size: contain;
   background-repeat: no-repeat;
   transition: all ease-in-out 0.3s;
}

.menu-item-has-children:hover > a::after {
   transform: rotate(180deg);
}

/* Submenu container (hidden by default) */
.menu-item-has-children > .sub-menu {
   display: none !important;
   box-sizing: border-box;
   position: absolute;
   top: 100%;
   margin-top: 15px;
   background: var(--epr-white);
   list-style: none;
   padding: 24px;
   width: 560px;
   z-index: 999;
   filter: drop-shadow(var(--epr-shadow-lg));
}

/* Overlay area for improved hover targeting */
.menu-item-has-children > .hover-overlay {
   width: 129px;
   height: 120%;
   position: absolute;
   top: 0;
   z-index: -1;
   cursor: pointer;
}

/* Show submenu on hover */
.menu-item-has-children:hover > .sub-menu {
   display: grid !important;
   grid-template-columns: repeat(2, auto);
   grid-template-rows: repeat(4, auto);
   grid-auto-flow: column;
   gap: 24px 32px;
}

.menu-item-has-children:hover > .hover-overlay {
   z-index: 998;
}

/* Submenu link weight */
.menu-item-has-children > .sub-menu .menu-item a {
   font-weight: 700;
}

/* --------------------------------------------------
   HOMEPAGE HERO SECTION
-------------------------------------------------- */

/* Hero section with fixed height and margin */
section.hero {
   height: 750px;
   margin-top: 36px;
   border-radius: 24px;
}

/* Hero content container aligned left */
div.hero-content {
   margin-left: 64px;
   padding-top: 184px;
   width: 50%;
}

div.hero-content h1,
div.hero-content h6 {
   margin-bottom: 48px;
}

/* --------------------------------------------------
   HOMEPAGE ABOUT SECTION
-------------------------------------------------- */

/* Flex layout for image and text side-by-side */
section.about {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: 64px;
}

/* Image styling with max 50% width */
section.about img {
   width: 100%;
   max-width: 50%;
   border-radius: 24px;
}

/* Spacing for heading and paragraph blocks */
section.about h2,
section.about p {
   margin-bottom: 36px;
}

/* --------------------------------------------------
   HOMEPAGE SERVICES SECTION
-------------------------------------------------- */

/* Section heading spacing */
section.services h2 {
   margin-bottom: 64px;
}

/* Remove default list styles */
section.services ul.services-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

/* Service list item layout */
section.services ul li.service-item a {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   padding: 32px;
   border-radius: 24px;
   color: var(--epr-metal-900);
   text-decoration: none;
   transition: all ease-in-out 0.3s;
}

/* Hover state for service item */
section.services ul li.service-item a:hover {
   background: var(--epr-metal-900);
   color: var(--epr-white);
}

/* Service item heading */
section.services ul li.service-item a h4 {
   width: 440px;
   max-width: 40%;
}

/* Service item paragraph */
section.services ul li.service-item a p {
   width: 579px;
   max-width: 50%;
}

/* Icon styling within service item */
section.services ul li.service-item a svg {
   width: 48px;
   height: 48px;
   padding: 12px;
   border-radius: 100%;
   color: var(--epr-white);
   background: var(--epr-metal-900);
   transition: all ease-in-out 0.3s;
}

/* Hover state for service item icon */
section.services ul li.service-item a:hover svg {
   background: var(--epr-white);
   color: var(--epr-metal-900);
}


/* --------------------------------------------------
   HOMEPAGE PROFILE SECTION
-------------------------------------------------- */

/* Profile section container with padding and layout */
section.profile {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: flex-start;
   background: var(--epr-metal-50);
   border-radius: 24px;
   padding: 64px;
   gap: 64px;
}

/* Profile image styling */
section.profile img {
   width: 100%;
   max-width: 400px;
   border-radius: 24px;
}

/* Text content block beside the profile image */
section.profile .profile-content {
   max-width: 547px;
}

/* Profile heading */
section.profile .profile-content h2 {
   margin-bottom: 8px;
}

/* Profile paragraph spacing */
section.profile .profile-content p {
   margin-top: 36px;
}

/* Reset top margin if bold text appears first */
section.profile .profile-content p.epr-bold {
   margin-top: 0px;
}

/* CTA button spacing */
section.profile .profile-content a button {
   margin-top: 48px;
}

/* --------------------------------------------------
   HOMEPAGE FAQ SECTION
-------------------------------------------------- */

/* Container for FAQs section */
section.faqs-section {
   max-width: 957px;
   margin: 64px auto 64px auto;
   display: flex;
   flex-direction: column;
   gap: 32px;
}

/* Centered section heading */
section.faqs-section h2 {
   text-align: center;
}

/* Individual FAQ item layout */
section.faqs-section .faq-list div.faq-item {
   display: flex;
   flex-direction: column;
   padding: 32px 48px;
   border-radius: 24px;
   background: var(--epr-metal-50);
   margin-bottom: 24px;
   justify-content: flex-start;
   transition: all ease-in-out 0.3s;
   min-height: 80px;
   cursor: pointer;
}

/* Hover state */
section.faqs-section .faq-list div.faq-item:hover {
   background: var(--epr-metal-800);
   color: var(--epr-white);
}

/* Active state */
section.faqs-section .faq-list div.faq-item.active {
   background: var(--epr-metal-800);
   color: var(--epr-white);
}

/* Heading and content layout */
section.faqs-section .faq-list div.faq-item h4,
section.faqs-section .faq-list div.faq-item p {
   max-width: 80%;
}

/* Paragraph content initially hidden */
section.faqs-section .faq-list div.faq-item p {
   margin-top: 18px;
   display: none;
}

/* Expand/collapse icon */
section.faqs-section .faq-list div.faq-item svg {
   width: 48px;
   height: 48px;
   padding: 12px;
   border-radius: 100%;
   background: var(--epr-white);
   transition: all ease-in-out 0.3s;
   position: absolute;
   justify-self: flex-start;
   align-self: flex-end;
   transition: transform 0.3s ease-in-out;
}

/* Rotated icon for active FAQ */
section.faqs-section .faq-list div.faq-item svg.rotated {
   transform: rotate(180deg);
}

/* --------------------------------------------------
   HOMEPAGE RESOURCES SECTION
-------------------------------------------------- */

/* Resources section with background and layered layout */
section.resources {
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   height: 519px;
   border-radius: 24px;
   background: var(--epr-gradient-metal);
   background-repeat: no-repeat;
   background-position: top right;
   position: relative;
}

/* SVG layer wrapper for decorative corner */
section.resources .svg-wrapper,
section.default-hero .svg-wrapper {
   position: absolute;
   top: 0;
   right: 0;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* Image wrapper containing the callout illustration */
section.resources .image-wrapper {
   max-height: 484px;
   align-self: flex-end;
}

/* Illustration styles with clip-path and shadows */
section.resources .image-wrapper img {
   max-height: 484px;
   z-index: 3;
   clip-path: polygon(0 0, 120% 0, 120% 100%, 0% 100%);
   box-shadow: var(--epr-shadow-md), 1em 1em 0 0 var(--epr-metal-50), 2em 2em 0 0 var(--epr-metal-100);
   margin-right: 2em;
   translate: 0 1px;
}

/* Resources text content block */
section.resources .resources-content {
   display: flex;
   flex-direction: column;
   gap: 48px;
   max-width: 492px;
   z-index: 1;
   color: var(--epr-white);
}

/* Text link inside resources section */
section.resources .resources-content a {
   text-decoration: none;
}

/* --------------------------------------------------
   HOMEPAGE CONTACT SECTION
-------------------------------------------------- */

/* Contact section with split form and info layout */
section.contact {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: flex-start;
   gap: 68px;
   background: var(--epr-metal-50);
   border-radius: 24px;
   padding: 112px 124px;
}

/* Contact heading area */
section.contact .contact-info h2 {
   margin-bottom: 8px;
}

/* Subheading styling */
section.contact .contact-info h6.contact-subheading {
   color: var(--epr-metal-700);
   margin-bottom: 16px;
}

/* Wrapper for the form */
section.contact .form-wrapper {
   width: 50%;
}

/* Form layout and spacing */
section.contact .form-wrapper form {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 24px;
   width: 100%;
}

/* Two-column form input layout */
section.contact .form-wrapper form .two-col {
   justify-content: space-between;
   display: flex;
   gap: 24px;
}

/* Input and textarea styling */
section.contact .form-wrapper form input,
section.footer-container .footer-wrapper input,
section.contact .form-wrapper form textarea {
   padding: 12px;
   border-radius: 4px;
   border: 1px solid var(--epr-metal-300);
}

/* Set widths for inputs */
section.contact .form-wrapper form input[type="text"],
section.contact .form-wrapper form input[type="email"],
section.contact .form-wrapper form input[type="tel"] {
   width: 90%;
}

section.contact .form-wrapper form textarea {
   width: 95%;
   resize: none;
}

/* Dropdown/select styling */
section.contact .form-wrapper form select {
   padding: 12px;
   border: 1px solid var(--epr-metal-300);
   width: 100%;
}

/* Remove spacing from radio/checkbox wrappers */
section.contact .form-wrapper form span.wpcf7-list-item {
   margin: 0;
}

/* Info column layout */
section.contact .contact-info {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 50%;
}

/* Contact links */
section.contact .contact-info a {
   display: flex;
   gap: 8px;
}

/* Hover lift for contact links */
section.contact .contact-info a:hover {
   translate: 0 -2px;
   transition: all ease-in-out 0.3s;
}

/* --------------------------------------------------
   FOOTER SECTION
-------------------------------------------------- */

/* Top border and full width */
section.footer-container {
   border-top: 1px solid var(--epr-metal-200);
   max-width: 100%;
}

/* Column 1: logo, form, badge */
section.footer-container .footer-col-1 {
   display: flex;
   flex-direction: column;
   gap: 24px;
}

/* Footer logo */
section.footer-container .footer-col-1 #footer-logo img {
   width: 173px;
   height: auto;
   filter: grayscale(1);
}

/* Subscribe form layout */
section.footer-container .footer-col-1 .subscribe-wrapper form {
   display: flex;
   flex-direction: row;
   gap: 16px;
   align-items: center;
   justify-content: space-between;
   width: 100%;
}

/* Email input sizing */
section.footer-container .footer-col-1 .subscribe-wrapper form input {
   max-width: 334px;
}

/* Subscribe button */
section.footer-container .footer-col-1 .subscribe-wrapper form .button {
   height: 48px;
   padding: 12px 24px !important;
}

/* Tiny text link underline */
section.footer-container .footer-col-1 p.epr-tiny a {
   text-decoration: underline;
}

/* On hover, remove underline */
section.footer-container .footer-col-1 p.epr-tiny a:hover {
   text-decoration: none;
}

/* Badge spacing */
section.footer-container .footer-col-1 .sra-digital-badge {
   margin-top: 100px;
}

/* Footer nav list layout */
section.footer-container nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
}

/* Overall wrapper layout */
section.footer-container .footer-wrapper {
   display: flex;
   max-width: 1394px;
   margin: 64px auto;
   justify-content: space-between;
}

/* Width of column 1 */
section.footer-container .footer-wrapper .footer-col-1 {
   width: 35%;
}

/* Width and spacing of column 2 */
section.footer-container .footer-wrapper .footer-col-2 {
   display: flex;
   gap: 40px;
   justify-content: flex-end;
   width: 60%;
}

/* Column 2 nav structure */
section.footer-container .footer-wrapper .footer-col-2 nav {
   display: flex;
   flex-direction: column;
   gap: 16px;
   max-width: 255px;
}

/* Nav list layout */
section.footer-container .footer-wrapper .footer-col-2 nav ul {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

/* Contact nav width constraint */
section.footer-container .footer-wrapper .footer-col-2 nav.contact-us {
   max-width: 255px;
}

/* Contact link structure */
section.footer-container .footer-wrapper .footer-col-2 nav.contact-us ul li a {
   display: flex;
   gap: 8px;
}

/* Contact icon size */
section.footer-container > div > div.footer-col-2 > nav.contact-us > ul > li:last-child > a > svg {
   width: 48px;
}

/* --------------------------------------------------
  SUBFOOTER SECTION
-------------------------------------------------- */

/* Subfooter layout: left-aligned text and right-aligned nav */
section.subfooter {
   display: flex;
   justify-content: space-between;
   border-top: solid 1px var(--epr-metal-200);
   padding: 33px 0 0 0;
}

/* Subfooter navigation layout */
section.subfooter nav ul {
   display: flex;
   flex-direction: row;
   gap: 16px;
   list-style: none;
   margin: 0;
   padding: 0;
}

/* Subfooter nav link styling */
section.subfooter nav ul li a {
   text-decoration: underline;
}

/* Remove underline on hover */
section.subfooter nav ul li a:hover {
   text-decoration: none;
   border: none;
}

/* Font size for text and nav links */
section.subfooter p,
section.subfooter nav ul li a {
   font-size: 14px;
}

/* --------------------------------------------------
   MODULES: DEFAULT HERO
-------------------------------------------------- */

/* Default hero layout with background image and grayscale effect */
section.default-hero {
   box-sizing: border-box;
   display: flex;
   filter: grayscale(100%);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   position: relative;
   overflow: hidden;
   border-radius: 24px;
   height: 420px;
   padding: 64px;
   align-items: center;
}

/* Default hero text content block */
section.default-hero div.default-hero-content {
   display: flex;
   flex-direction: column;
   gap: 28px;
   max-width: 60%;
}

/* Optional white text variant */
section.default-hero div.default-hero-content.text-white {
   color: var(--epr-white);
}

/* --------------------------------------------------
   MODULES: SINGLE COLUMN CONTENT
-------------------------------------------------- */

/* Single column layout with vertical spacing */
section.single_column_content {
   display: flex;
   flex-direction: column;
   gap: 36px;
   max-width: 739px;
}

/* Paragraph block spacing */
section.single_column_content .text-block p {
   margin-bottom: 28px;
}

/* Full-width image block with spacing */
section.single_column_content div.image-block img {
   width: 100%;
   border-radius: 24px;
   margin-bottom: 28px;
}

/* --------------------------------------------------
   MODULES: PROFILE MODULE
-------------------------------------------------- */

/* Dark theme variation of the profile section */
section.profile.module {
   background: var(--epr-metal-900);
   color: var(--epr-white);
}

/* --------------------------------------------------
   MODULES: TESTIMONIAL MODULE
-------------------------------------------------- */

/* Testimonial section with centered heading */
section.testimonials {
   text-align: center;
}

/* Spacing below testimonial heading */
section.testimonials h2 {
   margin-bottom: 64px;
}

/* Individual testimonial card styling */
section.testimonials div.testimonials-list div.testimonial {
   box-sizing: border-box;
   color: var(--epr-white);
   background: var(--epr-gradient-metal);
   padding: 64px 86px;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 16px;
   text-align: left;
}

/* Swiper container dimensions */
.swiper {
   width: 100%;
}

.swiper-wrapper {
    display: flex !important;
}

.swiper-slide {
   height: auto !important;
}

/* Navigation buttons for swiper */
.swiper-button-next::after,
.swiper-button-prev::after {
   color: var(--epr-white);
}

/* --------------------------------------------------
   MODULES: CTA MODULE
-------------------------------------------------- */

/* Call to Action section with two-part layout */
section.cta {
   background: var(--epr-metal-900);
   color: var(--epr-white);
   display: flex;
   height: 380px;
   align-items: space-between;
   gap: 14px;
   border-radius: 24px;
   max-width: 957px;
}

/* Left-aligned CTA image styling */
section.cta img.cta-image {
   width: 50%;
   border-radius: 24px 0 0 24px;
   object-fit: cover;
   position: relative;
   mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
}

/* CTA text content styling */
section.cta div.cta-content {
   padding: 64px 64px 64px 0px;
   text-align: left;
   display: flex;
   flex-direction: column;
   gap: 24px;
   width: 50%;
}

/* CTA link wrapper */
section.cta div.cta-content a {
   margin-top: 16px;
}

/* CTA button styling override */
section.cta div.cta-content button {
   background: var(--epr-white);
   color: var(--epr-metal-900);
}

/* --------------------------------------------------
   MODULES: TWO COLUMN CONTENT
-------------------------------------------------- */

/* Two-column layout with spacing */
section.two-column-content {
   display: flex;
   flex-direction: row;
   gap: 64px;
   margin: 64px auto 0;
}

/* Left and right column structure */
section.two-column-content div.left-column,
section.two-column-content div.right-column {
   display: flex;
   flex-direction: column;
   gap: 24px;
}

/* --------------------------------------------------
   MODULES: CONTENT WITH LEFT HAND IMAGE
-------------------------------------------------- */

/* Split layout with image on the left and content on the right */
section.content-with-lh-image {
   box-sizing: border-box;
   background: var(--epr-metal-50);
   border-radius: 24px;
   padding: 84px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 64px;
   margin: 0 auto;
}

/* Image column styling */
section.content-with-lh-image img {
   border-radius: 24px;
   width: 50%;
}

/* Content column structure */
section.content-with-lh-image div.content-with-lh-image-content {
   display: flex;
   flex-direction: column;
   gap: 24px;
}

/* --------------------------------------------------
   MODULES: TWO COLUMN CTA
-------------------------------------------------- */

/* Section container with vertical spacing */
section.two-column-cta {
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 64px;
}

/* Horizontal two-column CTA layout */
section.two-column-cta div.two-column-cta-container {
   text-align: left;
   display: flex;
   flex-direction: row;
   gap: 24px;
   margin: 0 auto;
}

/* Individual CTA column styling */
section.two-column-cta div.two-column-cta-container div.two-column-cta-left,
section.two-column-cta div.two-column-cta-container div.two-column-cta-right {
   display: flex;
   flex-direction: column;
   gap: 24px;
   width: 50%;
   padding: 64px;
   border-radius: 24px;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

/* Content width inside each CTA box */
section.two-column-cta div.two-column-cta-container div.two-column-cta-left h4,
section.two-column-cta div.two-column-cta-container div.two-column-cta-right h4,
section.two-column-cta div.two-column-cta-container div.two-column-cta-left p,
section.two-column-cta div.two-column-cta-container div.two-column-cta-right p {
   width: 60%;
}

/* --------------------------------------------------
   INSIGHTS (ARTICLE STYLES)
-------------------------------------------------- */

/* Remove default padding from single-insight layout */
.single-insight main {
   padding: 0;
}

/* Full width article hero */
section.article-hero {
   max-width: 100%;
   margin: 32px auto;
}

/* Inner content block of article hero */
section.article-hero div.article-hero-content {
   max-width: 1394px;
   margin: 64px auto 64px auto;
   display: flex;
   flex-direction: column;
   padding: 0 64px;
   gap: 64px;
}

/* Topic label styling above article title */
section.article-hero div.article-hero-content p.article-topic {
   font-size: 14px;
   line-height: 18px;
   letter-spacing: 2.8px;
   text-transform: uppercase;
}

/* Full width hero image */
section.article-hero img.article-hero-image {
   width: 100%;
   object-fit: cover;
   position: relative;
}


/* --------------------------------------------------
   INSIGHTS
-------------------------------------------------- */

section.featured-insights {
    display: flex;
    gap: 32px;
}

/* --------------------------------------------------
   INSIGHTS (FILTER)
-------------------------------------------------- */

section.insight-filter-bar nav.insight-filter-nav {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

/* Sticky header hack */
#insight-filter-bar::before {
   content: "";
   display: block;
   height: 140px;
   margin-top: -100px;
   visibility: hidden;
}

section.insight-filter-bar nav.insight-filter-nav h5.filter-label {
   width: 50%;
   text-align: center;
}

section.insight-filter-bar nav.insight-filter-nav ul.filter-links {
   display: flex;
   flex-direction: row;
   justify-content: left;
   align-items: center;
   gap: 16px;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 50%;
   flex-wrap: wrap;
}

section.insight-filter-bar nav.insight-filter-nav ul.filter-links li a {
   font-size: 16px;
   font-weight: 700;
   line-height: 24px;
   padding: 10px 20px;
   border: 1.5px solid var(--epr-metal-900);
   border-radius: 100px;
}

section.insight-filter-bar nav.insight-filter-nav ul.filter-links li a:hover {
   background: var(--epr-metal-900);
   color: var(--epr-white);
}

section.insight-filter-bar nav.insight-filter-nav ul.filter-links li a.active {
   background: var(--epr-metal-900);
   color: var(--epr-white);
}

/* --------------------------------------------------
   INSIGHTS (INSIGHT CARD)
-------------------------------------------------- */

section.featured-insights div.insight-card {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--epr-metal-50);
    border-radius: 24px;
}

section.featured-insights div.insight-card img {
    width: 100%;
    border-radius: 24px 24px 0 0;
    aspect-ratio: 3/2;
    object-fit: cover;
}

section.featured-insights div.insight-card div.insight-card-content {
    padding: 0 24px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --------------------------------------------------
   INSIGHTS (INSIGHT LIST)
-------------------------------------------------- */

section.featured-insights div.insight-list {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: space-between;
}

section.featured-insights div.insight-list h5.insight-list-title {
    border-bottom: 2px solid var(--epr-metal-900);
}

section.featured-insights div.insight-list div.insight-list-item a {
    border-bottom: 2px solid var(--epr-metal-50);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
}

section.featured-insights div.insight-list div.insight-list-item:last-child a {
    border-bottom: none;
}

/* --------------------------------------------------
   INSIGHTS (INSIGHT GRID)
-------------------------------------------------- */

section.insight-grid {
    display: flex;
    flex-direction: row;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: space-between;
}

section.insight-grid div.insight-grid-item {
    width: 276px;
}

section.insight-grid div.insight-grid-item a {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

section.insight-grid div.insight-grid-item a img.insight-grid-image {
   width: 100%;
   border-radius: 8px;
   aspect-ratio: 3/2;
   object-fit: cover;
}

section.insight-grid div.insight-grid-item a div.insight-grid-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --------------------------------------------------
   MEDIA QUERIES (RESPONSIVE STYLES)
-------------------------------------------------- */

/* Mobile styles for screens up to 800px wide */
@media screen and (max-width: 800px) {

    /* Adjust typography scale for smaller screens */
    h1 {
        font-size: 36px;
        line-height: 120%;
    }
    h2 {
        font-size: 32px;
        line-height: 120%;
    }
    h3 {
        font-size: 24px;
        line-height: 120%;
    }
    h4 {
        font-size: 20px;
        line-height: 120%;
    }
    h5 {
        font-size: 18px;
        line-height: 120%;
    }
    h6 {
        font-size: 16px;
        line-height: 120%;
    }
    p {
        font-size: 16px;
        line-height: 150%;
    }
    .epr-tiny {
        font-size: 14px;
        line-height: 150%;
    }
 
    /* Buttons take full width */
    button,
    .button {
        width: 100%;
    }
 
    /* Section spacing and padding */
    section {
        box-sizing: border-box;
        margin: 0 24px 64px 24px;
    }
 
    /* Responsive header adjustments */
    header .container {
        width: 100%;
        justify-content: space-between;
        background: var(--epr-white);
    }
 
    /* Hamburger menu visible on small screens */
    header .container .hamburger {
        display: block;
    }
 
    /* Hamburger bar styles */
    header .container .hamburger .burg1,
    header .container .hamburger .burg2,
    header .container .hamburger .burg3 {
        width: 24px;
        height: 3px;
        margin: 5px 0px;
        background: var(--epr-metal-900);
        transition: all ease-in-out 0.3s;
    }
 
    /* Hamburger active state */
    header .container .hamburger.active .burg1 {
        transform-origin: 0% 0%;
        transform: rotateZ(45deg);
    }
    header .container .hamburger.active .burg2 {
        opacity: 0;
    }
    header .container .hamburger.active .burg3 {
        transform-origin: 0% 100%;
        transform: rotateZ(-45deg);
    }
 
    /* Mobile navigation menu */
    #main-navigation {
        box-sizing: border-box;
        display: block;
        z-index: -1;
        position: absolute;
        top: -100vh;
        right: 0;
        width: 100%;
        max-width: 425px;
        height: 100vh;
        background: var(--epr-white);
        padding: 24px;
        transition: all ease-in-out 0.3s;
      /*  box-shadow: var(--epr-shadow-md);*/
    }
	
	#main-navigation ul {
		padding-left: 0;
	}
 
    /* Slide in menu when active */
    #main-navigation.active {
        top: 85px;
    }
 
    /* Submenu hidden by default in mobile nav */
    #main-navigation.active .menu-item-has-children > .sub-menu {
        display: none;
        position: static;
        width: 100%;
        height: 100%;
        filter: none !important;
        margin: 0;
        padding: 24px 0 0 24px;
        transition: all ease-in-out 0.3s;
    }
 
    /* Submenu visible when active */
    #main-navigation.active .menu-item-has-children > .sub-menu.active {
        display: block !important;
        top: 0;
		filter: none !important;
    }
 
    /* Hide desktop hover overlay */
    .menu-item-has-children > .hover-overlay {
        display: none;
    }
 
    /* Override hover submenu for mobile */
    .menu-item-has-children:hover .sub-menu {
        display: none !important;
    }
 
    /* Adjust submenu toggle appearance */
    #main-navigation.active .menu-item-has-children > a {
        justify-content: space-between;
    }
    .menu-item-has-children.active > a::after {
        transform: rotate(180deg) !important;
    }
    .menu-item-has-children:hover > a::after {
        transform: none;
    }
 
    /* Submenu item spacing */
    #main-navigation.active .menu-item-has-children > .sub-menu .menu-item {
        margin-bottom: 24px;
    }
    #main-navigation.active .menu-item-has-children > .sub-menu .menu-item:last-child {
        margin-bottom: 0;
    }
 
    /* Use normal weight for mobile nav items */
    .menu-item-has-children > .sub-menu .menu-item a {
        font-weight: normal;
    }
 
    /* Mobile nav in column layout */
    #main-navigation ul {
        flex-direction: column;
        width: 100%;
    }
 
    /* Style contact link in mobile menu */
    #main-navigation ul li.contact a {
        box-sizing: border-box;
        text-align: center;
        display: block;
        font-size: 14px;
        padding: 10px 20px;
        width: 100%;
    }
 
    /* Responsive override for the homepage hero section */
    section.hero {
        height: auto;
        max-height: 929px;
        padding: 64px 24px 241px 24px;
        background-position: left;
    }
 
    section.hero div.hero-content {
        width: 100%;
        padding-top: 0;
        margin-left: 0;
    }
 
    /* Stack about section layout vertically for smaller screens */
    section.about {
        flex-direction: column;
        gap: 32px;
    }
 
    section.about img {
        max-width: 699px;
    }
 
    /* Reduce padding for profile section on small screens */
    section.profile {
        padding: 24px;
    }
 
    section.profile img {
        border-radius: 16px;
    }
 
    section.faqs-section {
        margin: 64px 24px;
    }
 
    section.faqs-section .faq-list div.faq-item {
        padding: 32px 24px;
        min-height: auto;
    }
 
    section.faqs-section .faq-list div.faq-item svg {
        width: 24px;
        height: 24px;
    }
 
    /* Reflow resources section and hide SVG background on mobile */
    section.resources {
        flex-direction: column;
        height: auto;
        padding: 32px 24px;
        gap: 32px;
        align-items: flex-start;
    }
 
    section.resources .svg-wrapper {
        display: none;
    }
 
    section.resources .image-wrapper {
        align-self: flex-start;
    }
 
    section.resources .image-wrapper img {
        max-width: 50%;
        height: 100%;
    }
 
    /* Reduce padding for hero section on articles and pages */
    section.default-hero {
        padding: 24px;
        margin-top: 36px;
    }
 
    .swiper {
        height: 400px;
    }
 
    /* Hide navigation buttons on swiper for mobile */
    .swiper-button-next, .swiper-button-prev
    .swiper-button-next::after, .swiper-button-prev::after {
        display: none !important;
    }
 
    /* Remove right margin from testimonial section */
    section.testimonials {
        margin-right: 0;
    }
 
    /* Make testimonials full width and increase padding */
    section.testimonials div.testimonials-list div.testimonial {
        width: 100%;
        padding: 64px 24px;
    }
 
    /* Stack CTA layout vertically on smaller screens */
    section.cta {
        flex-direction: column;
        height: auto;
    }
 
    section.cta img.cta-image {
        width: 100%;
        border-radius: 24px 24px 0 0;
    }
 
    section.cta div.cta-content {
        box-sizing: border-box;
        padding: 32px 24px;
        width: 100%;
    }
 
    /* Switch from two-column to stacked layout */
    section.two-column-content {
        flex-direction: column;
        padding: 0 24px;
    }
 
    section.content-with-lh-image {
        flex-direction: column;
        padding: 24px;
        border-radius: 0;
    }
 
    section.content-with-lh-image img {
        width: 100%;
    }
 
    /* Stack CTA sections vertically for mobile layout */
    section.two-column-cta div.two-column-cta-container {
        flex-direction: column;
        gap: 32px;
    }
 
    section.two-column-cta div.two-column-cta-container div.two-column-cta-left,
    section.two-column-cta div.two-column-cta-container div.two-column-cta-right {
        box-sizing: border-box;
        padding: 32px 24px;
        width: 100%;
    }
 
    section.two-column-cta div.two-column-cta-container div.two-column-cta-left h4,
    section.two-column-cta div.two-column-cta-container div.two-column-cta-right h4,
    section.two-column-cta div.two-column-cta-container div.two-column-cta-left p,
    section.two-column-cta div.two-column-cta-container div.two-column-cta-right p,
    section.two-column-cta div.two-column-cta-container div.two-column-cta-left a,
    section.two-column-cta div.two-column-cta-container div.two-column-cta-right a {
        width: 75%;
    }

    /* Reflow Insights for smaller screens */
    section.insight-filter-bar nav.insight-filter-nav {
      flex-direction: column;
    }

    section.insight-filter-bar nav.insight-filter-nav h5.filter-label {
      width: 100%;
      text-align: left;
      margin-bottom: 24px;
    }

    section.insight-filter-bar nav.insight-filter-nav ul.filter-links {
      width: 100%;
    }

    section.featured-insights {
      flex-direction: column;
    }

    section.featured-insights div.insight-card {
      width: 100%;
    }

    section.featured-insights div.insight-list {
      width: 100%;
    }
 
    /* Reflow contact section to vertical for smaller screens */
    section.contact {
        flex-direction: column-reverse;
        padding: 24px;
        margin: 0;
        border-radius: 0;
    }
 
    section.contact .contact-info,
    section.contact .form-wrapper {
        width: 100%;
    }
 
    footer {
        margin: 0 0 !important;
    }
    section.footer-container {
        width: 100%;
        margin: 0;
    }
 
    section.footer-container .footer-wrapper {
        margin: 0;
        padding: 24px;
        flex-direction: column;
    }
 
    section.footer-container .footer-col-1,
    section.footer-container .footer-col-2 {
        width: 100% !important;
    }
 
    section.footer-container .footer-col-1 .sra-digital-badge {
        margin-top: 20px;
        margin-bottom: 48px;
    }
 
    section.footer-container .footer-wrapper .footer-col-2 nav {
        max-width: 100%;
    }
 
    section.subfooter {
        flex-direction: column-reverse;
        padding: 24px;
        margin: 0;
    }
 
    section.footer-container .footer-col-2 {
        flex-direction: column;
    }
 
    section.subfooter nav ul {
        flex-direction: column;
        padding-bottom: 24px;
    }
 }
 
 /* Adjust service list layout for screens up to 850px */
 @media screen and (max-width: 850px) {
 
    /* Hide service item description text for narrow screens */
    section.services ul li.service-item a p {
        display: none;
    }
 
    /* Stack service items vertically with dividers */
    section.services ul li.service-item a {
        padding: 24px 0px;
        border-bottom: 1px solid var(--epr-metal-400);
        border-radius: 0;
        gap: 5%;
    }
 
    /* Disable background change on hover */
    section.services ul li.service-item a:hover {
        background: none;
        color: var(--epr-metal-900);
    }
 
    /* Adjust service icon size */
    section.services ul li.service-item a svg {
        width: 8%;
        height: 8%;
        border: solid 1px var(--epr-metal-900);
    }
 
    /* Style icon on hover */
    section.services ul li.service-item a:hover svg {
        background: var(--epr-white);
        color: var(--epr-metal-900);
    }
 
    /* Add margin to single column content section */
    section.single_column_content {
        margin-top: 60px;
        margin-left: 24px;
        margin-right: 24px;
    }


 }
 
 /* Adjust layout for wider tablets and small desktops up to 1440px */
 @media screen and (max-width: 1440px) {
     
     footer {
         margin: 0 24px;
     }
 
    /* Stack subscribe form fields vertically */
    section.footer-container .footer-col-1 .subscribe-wrapper form {
        flex-direction: column;
        align-items: normal;
        justify-content: baseline;
    }
 
    /* Make input field full width */
    section.footer-container .footer-col-1 .subscribe-wrapper form input {
        max-width: 100%;
    }
 
    /* Ensure contact form input row is responsive */
    #wpcf7-f98-o2 > form > p:nth-child(3) {
        width: 100%;
    }
 
    /* Make submit button full width */
    input[type="submit"].button {
        width: 100%;
    }
 }

@media screen and (max-width: 1040px) {
	section.default-hero {
		height: fit-content;
	}
}
@media screen and (max-width: 1250px) {
	div.hero-content {
		padding-top: 64px;
	}
}