/*
Theme Name: RainbowLayout Theme
Author: Awakened Power
Version: 1.0
Description: A fully custom responsive theme with a fluid layout and 7 modular sections.
*/


/* GLOBAL RESETS */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Base body text */
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
}

/* Headings / Titles */
h1, h2, h3, h4, h5, h6,
.ap-hero__title,
.entry-title,
.woocommerce-loop-product__title,
.topbar {                         /* <- was `topbar` (no dot) before */
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;               /* Abril has a single weight; avoid 700 */
  letter-spacing: 0.2px;          /* Abril is chunky—less tracking than Nixie */
  line-height: 1.15;              /* usually tighter than body text */

}


/* Nav links / buttons */
nav a, .nav-container a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px; 
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

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

/* CONTAINER */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* SECTION: Sticky Top Bar */
#main-content .section-header,
#main-content .section-subheader,
.section-slider,
.section-partners {
  padding: 60px 0;
}



/* SECTION 2: Header & Nav */
.header-upper {
  background: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-navigation {
  background: #000;
  /*padding: 10px 0;*/
}

.main-navigation ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

.main-navigation li {
  margin: 0;
  position: relative;
}

.main-navigation li a {
  color: #fff;
  padding: 10px;
  display: block;
}

.main-navigation li a:hover,
.main-navigation li.current-menu-item a {
  border-bottom: 3px solid orange;
}

/* Slider Header Section */
.header-slider {
  background: url('/wp-content/uploads/slider-placeholder.jpg') no-repeat center center;
  background-size: cover;
  padding: 80px 20px;
  text-align: center;
  color: #fff;
}

.header-slider h2 {
  font-size: 2rem;
}

.header-slider .btn {
  margin: 10px;
  padding: 10px 20px;
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
  transition: all 0.3s ease;
}

.header-slider .btn.primary {
  background: orange;
  border-color: orange;
}

.header-slider .btn:hover {
  background: #fff;
  color: #000;
}

/* Sub Header Section */
.section-subheader {
  background: #e7500d;
}

.subheader-content {
  display: flex;
}

.subheader-content .block {
  flex: 1;
  background-size: cover;
  background-position: center;
  min-height: 200px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Main Content Section 
.section-main-content {
  background: #fff;
}

.content-flex {
  display: flex;
  gap: 2rem;
}

.content-left {
  flex: 3;
}

.content-right {
  flex: 1;
  background: #f8f8f8;
  padding: 1rem;
}

.news-item {
  margin-bottom: 1rem;
}

.news-item img {
  max-width: 100%;
  height: auto;
}*/

/* Slider Area */
.section-slider {
  background-size: cover;
  color: #e5e5e5;
  position: relative;
}

.white-box {
  background: #fff;
  color: #000;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Partner Carousel */
.section-partners {
  background: #eee;
  text-align: center;
}

.partner-carousel {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.partner-logo {
  background: #fff;
  padding: 20px;
  width: 200px;
  height: 100px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/*footer {
  background: #111;
  color: #fff;
  padding: 2rem 1rem;
  text-align: center;
}


 BRANDING Section Ind logo etc - responsive 

.branding-bar {
  background: #ffffff;
  padding: 20px 0;
  width: 100%;
}

.branding-bar .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.branding-left img {
  max-height: 120px;
  height: auto;
  width: auto;
}

.branding-right {
  font-size: 14px;
  color: #333;
  text-align: right;
}

.branding-right a {
  color: #333;
  text-decoration: none;
}

.branding-right a:hover {
  text-decoration: underline;
}

/* Responsive Adjustments 
@media screen and (max-width: 768px) {
  .branding-bar .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .branding-right {
    margin-top: 10px;
    text-align: center;
  }
}
*/
.branding-bar {
  background: #fff;
  padding: 15px 0;
  width: 100%;
}

.branding-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.branding-col {
  flex: 1 1 25%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
}


.book-now-button, .branding-cta a {
  background-color: #e7500d;
  color: #fff!important;
  padding: 10px 16px;
  font-weight: bold;
  border-radius: 4px;
  text-align: center;
  display: inline-block;
   border-radius: 25px;

}

a.icon-phone:link, a.icon-phone:visited{ background-position: 0 0;
  background-image: url('../images/BtnsSprite001.png');
  background-repeat: no-repeat;
  background-size: 1200px 200px;} 



  /* Base icon styling */
.topbar-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-image: url('../images/BtnsSprite001.png');
  background-repeat: no-repeat;
  background-size: 384px 96px;
  background-position: 0 0; /* overridden below */
}


.size-32 {
  width: 32px;
  height: 32px;
}

.size-64 {
  width: 64px;
  height: 64px;
}
/* --- ICON POSITIONS --- */

/* POD: -900 (state 1), -1100 (hover), -1000 (active) → scaled */
.icon-pod:link,
.icon-pod:visited {
  background-position: -288px 0;
}
.icon-pod:hover {
  background-position: -352px 0;
}
.icon-pod:active {
  background-position: -320px 0;
}

/* YOUTUBE: -600, -800, -700 */
.icon-yt:link,
.icon-yt:visited {
  background-position: -192px -32px;
}
.icon-yt:hover {
  background-position: -256px -32px;
}
.icon-yt:active {
  background-position: -224px -32px;
}

/* X/TWITTER: -300, -500, -400 */
.icon-x:link,
.icon-x:visited {
  background-position: -96px -32px;
}
.icon-x:hover {
  background-position: -160px -32px;
}
.icon-x:active {
  background-position: -128px -32px;
}

/* INSTAGRAM: 0, -200, -100 */
.icon-ig:link,
.icon-ig:visited {
  background-position: 0 -32px;
}
.icon-ig:hover {
  background-position: -64px -32px;
}
.icon-ig:active {
  background-position: -32px -32px;
}

/* LINKEDIN: -900, -1100, -1000 */
.icon-linkedin:link,
.icon-linkedin:visited {
  background-position: -288px -32px;
}
.icon-linkedin:hover {
  background-position: -352px -32px;
}
.icon-linkedin:active {
  background-position: -320px -32px;
}

/* LEARN: -600, -800, -700 */
.icon-learn:link,
.icon-learn:visited {
  background-position: -192px 0;
}
.icon-learn:hover {
  background-position: -256px 0;
}
.icon-learn:active {
  background-position: -224px 0;
}

/* === topbar search === */

/* Sticky Top Bar */
:root{
  --ap-topbar-h: 64px;                 /* content height of the colourful bar */
  --ap-topbar-pad-y: 12px;             /* top/bottom padding inside the bar */
  --ap-logo: 220px;
  --ap-logo-pad: 10px;
  --ap-logo-hang: 60px;                /* how far the logo drops below the bar */
  --ap-logo-clear: calc(clamp(12px, 2.5vw, 32px) + var(--ap-logo) + 16px);
}

.topbar{
  position: relative;
  display: flex;
  align-items: center;                 /* vertical centring of inner */
  justify-content: center;
  background: linear-gradient(to right,#170033,#472768,#853637);
  color:#ccab90;

  /* the BAR’s real height (adjust with the two knobs above) */
  min-height: calc(var(--ap-topbar-h) + 2 * var(--ap-topbar-pad-y));
  padding: var(--ap-topbar-pad-y) 0;
}

/* inner never goes under the badge */
.topbar__inner{
  width:100%; max-width:1200px; margin:0 auto;
  padding:0 20px 0 var(--ap-logo-clear);
  min-height: var(--ap-topbar-h);
  display:flex; align-items:center; justify-content:space-between;
}
.topbar__left{width: 60%; padding:10px; font-size:1.8rem;}


/* Floating logo inside the topbar, overlapping below it */
.topbar .ap-logo{
  position:absolute;
  left: clamp(12px, 2.5vw, 32px);
  top: 50%;                                  /* anchor to the bar’s vertical centre */
  transform: translateY(calc(-50% + var(--ap-logo-hang)));
  width: var(--ap-logo); height: var(--ap-logo);
  display:grid; place-items:center;
  border-radius:50%;
  background:#000; border:none; outline:none;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  z-index:4;
  transition: transform .22s ease;
}
.topbar .ap-logo img{ width:calc(100% - 2*var(--ap-logo-pad)); height:auto; }


/* The nav lives underneath; it doesn't need special offsets now */
.ap-header{background: linear-gradient(to right,#170033,#472768,#853637);}
.ap-header-shell{
  position: relative; z-index: 2;
  background: none;
  backdrop-filter: blur(4px);
}

:root.logo-small .topbar .ap-logo{
  transform: translateY(calc(-50% + var(--ap-logo-hang))) scale(.86);
}

/* Tablet and down: stack left above search 
@media (max-width: 900px){
  :root{
    --ap-logo: 120px;
    --ap-logo-overlap: calc(var(--ap-logo) * .5);
    --ap-logo-clear: calc(clamp(12px, 3vw, 24px) + var(--ap-logo) + 12px);
  }

  .topbar__inner{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding-left: var(--ap-logo-clear);
  }

  .topbar__left{ order: 0; }
  .topbar__right{ order: 1; justify-self: start; }
}

/* Small phones: reduce logo and clearance further 
@media (max-width: 520px){
  :root{
    --ap-logo: 88px;
    --ap-logo-overlap: calc(var(--ap-logo) * .5);
    --ap-logo-clear: calc(clamp(10px, 4vw, 20px) + var(--ap-logo) + 10px);
  }
}*/
@media (max-width: 980px){
  .topbar__left{ display:none; }
  .topbar__inner{
    justify-content: flex-end;          /* push search to the right */
    padding-left: var(--ap-logo-clear); /* still clear the badge */
  }
}
@media (max-width: 520px){
  :root{
    --ap-logo: 120px;
    --ap-logo-hang: 16px;               /* a touch less hang on tiny screens */
    --ap-logo-clear: calc(clamp(10px, 4vw, 20px) + var(--ap-logo) + 10px);

  }
}

/* Mid desktop/laptop: shrink the badge a bit at ≤1100px */
@media (max-width: 1100px) and (min-width: 521px){
  :root{
    /* dial these to taste */
    --ap-logo: 150px;          /* was 180px — slightly smaller */
    --ap-logo-hang: 42px;      /* how far it hangs over the nav (lower = less overlap) */
    --ap-logo-clear: calc(
      clamp(10px, 3vw, 28px) + var(--ap-logo) + 14px
    );                         /* keeps content/nav from sliding under the badge */
  }
}

/* robust scoping inside the topbar’s right area */
.topbar__right form.search-form,
.topbar__right form[role="search"],
.topbar__right form#searchform{
  display: flex; align-items: center; gap: 8px;
}

.topbar__right input[type="search"],
.topbar__right .search-field{
  width: 100%; max-width: 200px;
  padding: 6px 0;
  background: transparent;
  border: none; border-bottom: 1px solid rgba(255,255,255,.38);
  color: #d9bddb; font-size: .95rem; outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.topbar__right input[type="search"]::placeholder{ color: rgba(255,255,255,.55); }
.topbar__right input[type="search"]:focus{ background:#fff; color:#000; opacity: 0.35; }

.topbar__right button[type="submit"],
.topbar__right .search-submit{
  width: 32px; height: 32px; background: none; border: 0;
  display: grid; place-items: center; cursor: pointer; margin-left: 2px;
}
.topbar__right .icon-search{
  width: 32px; height: 32px; display: inline-block;
  background-image: url('../images/BtnsSprite002.png');
  background-repeat: no-repeat;
  background-size: 384px 256px;
  background-position: 0 -224px;
}
.topbar__right .search-submit:hover .icon-search,
.topbar__right button[type="submit"]:hover .icon-search{ background-position: -64px -224px; }


/* when stacked, let the field breathe horizontally */
@media (max-width: 900px){
  .topbar-search .search-field{ max-width: 100%; }
}



/* === Layout & Container Fixes === */

.branding-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* allow wrap on mobile */
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

/* === Left Side (Logo) === */
.branding-left {
  flex-shrink: 0;
}

.branding-left img {
  max-height: 145px;
  width: auto;
  height: auto;
  max-width: 100%;
  margin:20px 0;
}

/* === Right Side === */
.branding-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

.branding-col {
  flex: 0 0 auto; /* Don't grow */
  white-space: nowrap;
}

/* === Link Layout === */
.branding-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  line-height: 0.7;
}

/* === Sprite Icon === */
.icon-sprite {
  width: 64px;
  height: 64px;
  background-image: url('../images/BtnsSprite002.png');
  background-size: 768px 512px; /* scaled to 64% */
  background-repeat: no-repeat;
  display: inline-block;
  flex-shrink: 0;
  transition: opacity 0.2s ease-in-out;
}

/* === Email Icon Fix === */
.icon-mail .icon-sprite {
  background-position: -64px -128px;
}
.icon-mail:hover .icon-sprite,
.icon-mail:active .icon-sprite {
  background-position: -128px -128px;
}

/* === Phone Icon === */
.icon-phone .icon-sprite {
  background-position: -64px 0;
}
.icon-phone:hover .icon-sprite,
.icon-phone:active .icon-sprite {
  background-position: -128px 0;
}

.link-text strong {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

/* === CTA Button === */
.book-now-button:link, .book-now-button:visited {
  background-color: #f26522;
  color: #fff;
  padding: 12px 20px;
  border-radius: 25px;
  text-align: center;
  white-space: nowrap;
  display: inline-block;
  font-size: 16px;
  letter-spacing: 0.5px;
  transition: 
    background-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.book-now-button:hover{
background-color: #f29822;
 transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.book-now-button:hover{
background-color: #f2c122;
 transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* Add this class when you want to pulse the button */
.book-now-button.pulse {
  animation: pulse-glow 3.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(242, 101, 34, 0.0);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 12px rgba(242, 101, 34, 0.4);
  }
}
.book-now-button.with-arrow {
  position: relative;
  overflow: hidden;
}

.book-now-button .arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.2s ease-in-out;
}

.book-now-button:hover .arrow {
  transform: translateX(4px);
}
/* === Responsive: Hide email/phone on mobile === */
@media screen and (max-width: 768px) {
  .branding-bar .container {
    flex-direction: column;
    align-items: center;
  }

  .branding-right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .branding-col.branding-email,
  .branding-col.branding-phone,
  .branding-PP .link-text {
    display: none;
  }

  .branding-left img {
    max-height: 110px;
    padding:0;
  }

  .book-now-button {
    margin-top: 10px;
  }
}



  /* === Navigation Styling === */
/* === NAVIGATION: Top-level Items === */
.main-menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 20px;
  color: #c7c7c7;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  border-bottom: 3px solid transparent;
  transition: background 0.3s ease, border-bottom 0.3s ease, color 0.3s ease;
  height: 60px;
}

/* Base nav styling */
.main-navigation {
  background:linear-gradient(90deg,#090014,#1c102a,#351616);
  height: 60px;
  border-bottom: 3px solid ;
  border-image:linear-gradient(90deg,#f26522,#6b1fff,#009296) 1;
  border-image-slice:1;
  position: relative;
  z-index: 1000;
}

.main-menu > li {
  height: 100%;
}

/* === Hover (non-active links only) === */
/* Hover (non-active items) */
.main-menu > li:not(.current-menu-item) > a:hover {
  background:  linear-gradient(to top, #000, #131313);
  border-bottom: 3px solid  #a556f3;
  color: #fff;
}

/* Active page link */
.main-menu > li.current-menu-item > a {
  background: linear-gradient(to bottom, #000, #1e1e1e);
  color: #fff;
  font-weight: bold;
  border-bottom: 3px solid #b882ff;
}

.main-menu > li.current-menu-ancestor > a::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid  linear-gradient(90deg,#f26522,#6b1fff,#009296);
  z-index: 2;
  color: #fff!important;
  font-weight: bold!important;
}

/* Arrow for active item (points UP)
.main-menu > li.current-menu-item > a::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #853637;
}*/


/* Arrow for dropdowns (right side) on hover */
.main-menu > li.menu-item-has-children > a {
  padding-right: 32px; /* more room for arrow */
}

.main-menu > li.menu-item-has-children > a::before {
  content: '';
  position: absolute;
  right: 10px; /* adds spacing without shifting text */
  top: 50%;
  transform: translateY(-50%);
  border-top: 4px solid #444444;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  width: 0;
  height: 0;
  pointer-events: none;
  transition: border-top-color 0.3s ease;
}

/* Flip arrow if hovering on dropdown parent (but NOT if current item) */
.main-menu > li.menu-item-has-children:hover > a::before {
  transform: translateY(-50%) rotate(180deg); /* flip it */
}

/* Optional: hide right arrow on current item if desired 
.main-menu > li.current-menu-item.menu-item-has-children > a::before {
  display: none;
}*/
.main-menu > li.current-menu-item.menu-item-has-children > a::before {
  border-top-color: #c33f28; /* red for active */
}


/* === Submenu Base Styling === */
.main-menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #1c1029;
  z-index: 999;
  padding: 0;
  border: 2px solid;
  border-image: linear-gradient(90deg,#472768,#853637) 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.main-navigation li ul li{margin: 0; border-bottom:1px solid #444;}

.main-menu li:hover > ul {
 /* display: block;*/
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* === Active submenu border override === */
.main-menu > li.current-menu-item > ul,
.main-menu li ul li.current-menu-item a {
  border-color: #c33f28;
}

/* === Submenu Items === */
.main-menu li ul li {
  border-bottom: 1px solid #191919;
}

.main-menu li ul li:last-child {
  border-bottom: none;
}

.main-menu li ul li a {
  display: block;
  padding: 12px 16px 12px 24px; /* padded left to allow for arrow if active */
  color: #8e7d97;
  font-size: 14px;
  text-decoration: none;
  background-color: #090014;
  transition: background 0.3s ease, color 0.3s ease;
  border-bottom:1px solid #190333!important;
}

/* === Hover === */
.main-menu li ul li a:hover {
  background-color: #261736;
  color: #b882ff;
  border-bottom:1px #190333 solid;
}

/* === Active submenu item === */
.main-menu li ul li.current-menu-item > a {
  background: linear-gradient(90deg, #5f1ea2, #7d343d);
  color: #ffffff;
  font-weight: bold;
  position: relative;
  border-bottom:2px solid #7926e8
}

/* === Arrow for active submenu item === */
.main-menu li ul li.current-menu-item > a::before {
  content: "▶";
  color: #7926e8;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  transition: opacity 0.3s ease;
  opacity: 1;
}
.main-menu > li.menu-item-has-children.current-menu-item > a::before,
.main-menu > li.menu-item-has-children.current-menu-ancestor > a::before {
  border-top-color: #7926e8; /* match the red active color */
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  color: #fff;
  font-weight: bold;
}


/* === Mobile Toggle === */

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  position: relative;
  height: 100%;
  z-index: 1001;
}


.menu-toggle .hamburger {
  /*width: 24px;
  height: 2px;
  background-color: #fff;*/
  position: relative;
  display: block;
}

/* Mobile Nav */
@media (max-width: 1100px) {
  .menu-toggle {
  display: block;
  margin-left: auto;
  background: none;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center; /* ✅ Center icon vertically */
  justify-content: center;
  z-index: 1001;
  margin-right:10px;
}

/* Icon wrapper using the sprite */

/* 50×50 hamburger states from BtnsSprite002.png */
.hamburger-icon-sprite{
  display:inline-block;
  width:50px; height:50px;
  background-image:url('../images/BtnsSprite002.png');
  background-repeat:no-repeat;
  background-size:600px 400px;                 /* 0.5× of 1200×800 */
  background-position:-150px -350px;           /* btn88 (default) */
}

/* hover -> btn89 */
.menu-toggle:hover .hamburger-icon-sprite{
  background-position:-200px -350px;
}

/* open/active -> btn90 */
.menu-toggle.open .hamburger-icon-sprite,
.menu-open .menu-toggle .hamburger-icon-sprite{
  background-position:-250px -350px;
}


  .main-menu {
    /*display: none!important;*/
    flex-direction: column;
    background: #000;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 1000;
    padding: 0;
  }
.main-navigation:not(.menu-open) .main-menu {
    display: none;
  }

  .main-navigation.menu-open .main-menu {
    display: block;
  }

  .main-navigation li{margin: 0;};

  .main-menu.menu-open {
    display: flex!important;
  }

  .main-menu > li > a {
    /*padding: 14px 20px;*/
    padding: 0 20px;
    border-bottom: 1px solid #15022c;
    color: #a39191;
    background: #090014;
    height: 60px;
    line-height: 60px;
    display: block;
    width: 100%;
  }

  .main-menu > li > a:hover {
    background-color: #090014;
    color: #caa1ff;
  }

  .main-menu > li.current-menu-item > a,
  .main-menu > li.current-menu-ancestor > a,   .main-menu > li.current-menu-item > a:hover,
  .main-menu > li.current-menu-ancestor > a:hover {
    background: linear-gradient(to left, #350764, #5f13a2);
    color: #fff;
    font-weight: bold;
    border-bottom: 3px solid #7926e8;
  }

  .main-menu li ul {
    position: static;
    display: none;
    background: #350764;
    opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;

  }

  .main-menu li.menu-item-has-children.open > ul {
    display: block;
  }

  .main-menu li ul li a {
    padding-left: 40px;
    
  }
  .menu-item-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Only show toggle on mobile */
@media (max-width: 1100px) {

.menu-item-has-children.open > .submenu-toggle::after {
  transform: translateY(-50%) rotate(180deg); /* point up */
}


  .menu-item-has-children {
    position: relative;
  }

  /* Optional: make sure toggle stays aligned */
  .menu-item-has-children > a {
    display: inline-flex;
    align-items: left;
  }
}
.main-menu > li {
  padding: 0;
  line-height: 1.4;
}

.main-menu > li > a {
    display: block;
    width: 100%;
    text-align:left;
  }

/* Triangle arrow using ::after */
.submenu-toggle::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #c7c7c7; /* light grey */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

/* Rotate when active */
.menu-item-has-children.open > .submenu-toggle::after {
  transform: translate(-50%, -50%) rotate(180deg);
}
.menu-item-has-children {
  /*display: flex;*/
  display: block;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.menu-item-has-children > a {
  flex: 1 1 auto;
  padding-right: 8px;
}
.menu-item-has-children {
  overflow: hidden;
}

.main-menu li ul {
  display: none;
}

.main-menu li.open > ul {
  display: block;
}
.main-navigation .main-menu {
    display: none;
  }

  .main-navigation.menu-open .main-menu {
    display: block;
  }

}
/* Don't show the toggle on desktop at all */
@media (min-width: 1101px) {
  .submenu-toggle {
    display: none !important;
  }
   .main-menu li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 1100px) {
  .main-navigation .main-menu,
  .main-navigation .primary-menu {
    display: none;
  }

  .main-navigation.menu-open .main-menu,
  .main-navigation.menu-open .primary-menu {
    display: block;
  }

  .main-menu li ul,
  .primary-menu li ul {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    background: #000;
    padding: 0;
  }

  .main-menu li.open > ul,
  .primary-menu li.open > ul {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  .submenu-toggle {
    position: absolute;
    top: 30px;
    right: 0px;
    transform: translateY(-50%);
    width: 60px;
    height: 54px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: block;
  }
  .submenu-toggle:hover {
  background-color:none;
}
/*.submenu-toggle:active {
  background-color: #2a2a2a;
}*/
.menu-item-has-children {
  position: relative;
}
  .menu-item-has-children > a{width: 100%; display: block;
  width: 100%;
  padding-right: 60px;/*leave space for the toggle */
  box-sizing: border-box;}

.menu-item-has-children.open > .submenu-toggle {
    top: 30px;
    transform: translateY(-50%);
    
  }
.submenu-toggle::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #c7c7c7;
    transition: transform 0.3s ease;
  }

  .menu-item-has-children.open > .submenu-toggle::after {
    transform: rotate(180deg);
  }

  .menu-item-has-children > a {
    padding-right: 60px;
    height: 60px;
    line-height: 60px;
  }

  .menu-item-has-children > a::before {
    display: none !important;
  }
  .main-menu li ul {
    border: none !important;
    margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  }

  .main-menu li:hover > ul {
    border: none !important;
  }

.main-menu > li.menu-item-has-children > a {padding-right:60px;}
.main-menu li ul li {
  overflow: hidden;
  height: auto;
  min-height: 60px;
  box-sizing: border-box;
}
.main-menu li ul li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
/*.main-menu li ul li a {
  padding: 0 40px;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, color 0.3s ease, border-bottom 0.3s ease;
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  align-items: center;

}*/
.main-menu li ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 24px !important;
  line-height: 1;
  font-size: 14px;
  box-sizing: border-box;
  background-color: #0f0120;
  text-indent:6px;
  color: #ffc7c0;
  border-bottom: 1px solid #190333;
  transition: background 0.3s ease, color 0.3s ease;
}
.main-menu li ul li a:hover {
  border-bottom: 1px solid #5f1ea2;
   background-color: #15022c;
   color: #b696c9;
}
.main-menu li ul li:last-child a {
  border-bottom: none;
}
.main-menu li ul li ul li a{background:#1e043d; text-indent: 20px; color: #d9bddb;}
/* Fix space above submenu */

.main-menu li.menu-item-has-children > ul.sub-menu {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
  transform: translateY(0px) !important;
  position: relative;
  top: 0 !important;
}
}


@media screen and (min-width: 1101px) and (max-width: 1280px) {
  .main-menu {
    flex-wrap: wrap;
    justify-content: center;
  }


}
@media (max-width: 1024px) and (min-width: 769px) {
  .main-menu > li > a {
    padding: 0 14px;
    font-size: 0.95rem;
  }
  .hero-slider {
    height: 400px;
  }
}
@media (max-width: 920px) and (min-width: 769px) {
  .main-menu > li > a {
    padding: 0 12px;
    font-size: 0.9rem;
  }
  .hero-slider {
    height: 400px;
  }
}

@media (max-width: 1100px) {
  /* Ensure submenus and their items stay visible when expanded via JS */
.submenu-toggle.expanded + ul.sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
}

/* Previously hover-only styles */
ul.sub-menu li {
  visibility: visible;
  opacity: 1;
}

}

@media (min-width: 769px) {
  .main-navigation li:hover > ul.sub-menu li {
    opacity: 1;
    visibility: visible;
  }
}


/* ====================
1. HERO SLIDER CSS
======================= */
.hero-slider {
  position: relative;
  width: 100%;
  height: 600px; /* Adjustable */
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 0;
  transition: opacity 1s ease;
  pointer-events: none; /* ✅ Prevent click interference */
background-color: transparent; /* ✅ Prevent white flicker */
}

.hero-slide.active {
  
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.hero-slide-content {
  text-align: left;
  color: white;
  /*max-width: 90%;*/
  animation: dropIn 1s ease forwards;
  align-items: flex-start;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
}
.hero-slide h2,
.hero-slide h3 {
  display: block; /* ✅ Force each onto its own line */
  width: fit-content;
  /* Remove auto margins */
  /* margin-left: auto;
     margin-right: auto; */
  color: #fff;
  text-align: left;
}
.hero-slide h2 {
 

  padding: 0px;
  font-weight: normal;
  font-size: 1.6rem;
  margin-bottom: 0px;
}

.hero-slide h3 {


  padding: 5px 0px;
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 20px;

}
.hero-slide h2 span {
  background: #df651c;
  padding: 6px 10px;
  font-weight: normal;
  font-size: 2rem;
  display: inline;
  line-height: 1.4;
  opacity: 90%;
}

.hero-slide h3 span {
  background: #000;
  padding: 6px 10px;
  font-weight: bold;
  font-size: 1.3rem;
  display: inline;
  line-height: 1.4;
  opacity: 70%;
}

.hero-buttons {
  margin-top: 10px;
}

.hero-buttons a {
  text-transform: uppercase;
  padding: 10px 25px;
  border-radius: 25px;
  font-size: 0.9rem;
  margin: 0 5px;
  display: inline-block;
  transition: all 0.3s ease;
  text-decoration: none;
}

.hero-buttons a.primary {
  background: #e7500d;
  border: 2px solid #e7500d;
  color: #fff;
}

.hero-buttons a.primary:hover {
  background: #c03f0c;
}

.hero-buttons a.secondary {
  background: #fff;
  border: 2px solid #e7500d;
  color: #e7500d;
}

.hero-buttons a.secondary:hover {
  background: #f2f2f2;
}

/* Dots */
.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.hero-dots span {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.hero-dots span.active {
  background: #fff;
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  .hero-slider {
    height: 400px;
  }

  .hero-slide h2, .hero-slide h3 {
    font-size: 1.1rem;
    padding: 8px 15px;
    /*/margin: 0 auto 10px auto;*/
    max-width: 90%; /* ✅ keeps it away from screen edge */
    display: block;
    text-align: left;
    padding-bottom: 0;
  }
  .hero-slide h2 span,
.hero-slide h3 span {
  
  display: inline;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* Safari support */
}

.hero-slide-content {
    padding: 0 10px; /* ✅ slight spacing for content container */
    align-items: flex-start;
  }
  .hero-buttons a {
    padding: 8px 20px;
    font-size: 0.8rem;
  }
  .hero-slide h2 span{font-size: 1.6rem;
}
  .hero-slide h3 span {
    font-size: 1.4rem;
  
  }
}
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes dropFadeIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 0.8;
    transform: translateY(0);
  }
}
.hero-slide h2 span,
.hero-slide h3 span {
  
  opacity: 0;
  transform: translateY(-30px);
  animation: dropFadeIn 1.5s ease forwards;
}

.hero-slide h2 span {
  animation-delay: 1.5s;
}

.hero-slide h3 span {
  animation-delay: 2s;
}



/* =========================
   FEATURE BAND (full-width)
   ========================= */
.feature-band{
  width:100%;
  background: linear-gradient(45deg,#090014,#5f13a2,#853637);
  color:#fff;
  padding: clamp(16px, 2vw, 24px) 0;
}

/* Grid: 4 -> 2 -> 1 */
.feature-grid{
  width:100%;
  max-width: 1400px;                 /* adjust container width to taste */
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(12px, 2vw, 24px);
}
@media (max-width: 1100px){
  .feature-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .feature-grid{ grid-template-columns: 1fr; }
}

/* Tile with tiled background pattern:
   - Top-centered
   - Stretches to full height
   - Repeats horizontally to fill any width */
   
.feature-card{
  position: relative;
  min-height: clamp(350px, 60vw, 500px);
  border-radius: 18px;
  overflow: hidden;                     /* keep inner glow/overlay tidy */
  /* background pattern via CSS var supplied inline */
  background-image: var(--fb-bg);
background-position: center top;   /* anchor at top */
background-repeat: no-repeat;      /* never tile */
background-size: cover;            /* fill tile, crop overflow */
  /* subtle inner border glow */
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 26px rgba(0,0,0,.45);
}
.feature-card:hover{transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0,0,0,.32);
  border-color: rgba(76, 48, 82, 0.28);}

/* content pane (bottom-anchored) */
.feature-card__inner{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(16px, 3.2vw, 28px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.95) 60%, rgba(0,0,0,.95) 100%);
  display: grid; gap: .6rem;
}

/* Title / text */
.feature-card__title{
  margin: 0;
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-size: clamp(26px, 3.2vw, 32px);
  line-height: 1.1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  color: #fff;
}
.feature-card__text{
  margin: 0;
  font-size: clamp(15px, 1.2vw, 18px);
  color: #bdb5a8;
}

/* Button reuses your glow outline */
.feature-card__btn{
  justify-self: start;
  margin-top: .2rem;
}

/* Per-tile accents (tiny color differences per card) */
.feature-card.is-1 .feature-card__btn{ border-color:#fff; }
.feature-card.is-1 .btn-glow-outline::before{ background: linear-gradient(45deg,#009296,#6b1fff,#79044a,); }

.feature-card.is-2 .feature-card__btn{ border-color:#fff; }
.feature-card.is-2 .btn-glow-outline::before{ background: linear-gradient(45deg,#6b1fff,#009296,#f26522,); }

.feature-card.is-3 .feature-card__btn{ border-color:#fff; }
.feature-card.is-3 .btn-glow-outline::before{ background: linear-gradient(45deg,#f26522,#6b1fff,#009296,); }

.feature-card.is-4 .feature-card__btn{ border-color:#fff; }
.feature-card.is-4 .btn-glow-outline::before{ background: linear-gradient(45deg,#5f1ea2,#79044a,#f26522,); }

/* ===== Deep band (single card variant) =============================== */
.ap-deep-band{
  /* uses same container width/padding as feature grid for perfect alignment */
  padding: clamp(40px, 6vw, 96px) 0;
  color:#fff;
}
.ap-deep-band--black{ background: linear-gradient(to bottom,#000,#052530); }

.ap-deep-band__inner{
  max-width: 1400px;                     /* match .feature-grid max width */
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);     /* match .feature-grid side padding */
}
.ap-deep-band__head{
  text-align:center;
  margin-bottom: clamp(20px, 4vw, 44px);
}
.ap-deep-band__title{
  margin:0;
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  color:#9d8c6e;
}
.ap-deep-band__lead{
  margin: 10px auto 0;
  max-width: 70ch;
  color: #bdb5a8;
  font-size: clamp(20px, 1.4vw, 18px);
}

/* Single, wide card */
.deep-card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background-image: var(--deep-bg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;                /* full-bleed like the hero */
  min-height: clamp(570px, 42vw, 540px); /* nice presence at desktop */
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 26px rgba(0,0,0,.45);
}
.deep-card--wide{ width: 100%; }

/* Stronger readability gradient, like your feature cards */
.deep-card__inner{
  position: absolute; inset: auto 0 0 0; /* bottom overlay */
  padding: clamp(18px, 3.2vw, 32px);
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.65) 30%,
    rgba(0,0,0,.95) 60%,
    rgba(0,0,0,.95) 100%
  );
  display: grid; gap: .6rem;
}

.deep-card__title{
  margin:0;
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.12;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.deep-card__text{
  margin:0;
  color:#f0f0f0;
  font-size: clamp(18px, 1.2vw, 18px);
}

/* Button = your existing glow outline */
.deep-card .rdMrBtn{ margin-top: .35rem; }
.deep-card .rdMrTxt{color:#009296; font-size:0.8rem; text-align: center;}
.deep-card .rdMrTxt strong{color:#fff;}

/* tighter on very small screens */
@media (max-width: 360px){
  .deep-card{ min-height: 280px; }
  .deep-card__text{ display:none; }
}

/* ===== WAVES band (3:1 split under deep band) ======================== */
.ap-waves-band{
  background:#052530;                    /* your new color */
  color:#fff;
  padding: clamp(36px, 6vw, 90px) 0;     /* similar rhythm to deep band */
}
.ap-waves-band__inner{
  max-width: 1400px;                     /* align with feature/deep bands */
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
}

/* 3:1 grid that stacks */
.waves-grid{
  display:grid;
  grid-template-columns: 3fr 1fr;
  gap: clamp(14px, 2.2vw, 28px);
  align-items: stretch;
}
@media (max-width: 1024px){
  .waves-grid{ grid-template-columns: 1fr; }
}

/* Left: copy card styled like your deep-band headings */
.waves-copy{

  border-radius: 18px;
  padding: clamp(18px, 3.2vw, 32px);

}
.waves-copy__title{
  margin: 0 0 .35rem 0;
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.12;
  color:#9d8c6e;                         /* same gold accent */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.waves-copy__lead{
  color:#bdb5a8;                          /* same soft copy color */
  font-size: clamp(20px, 1.3vw, 18px);
  line-height: 1.65;
}

/* Right: image card with same gradient overlay style as deep-card */
.waves-card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: clamp(500px, 32vw, 420px);
  background-image: var(--waves-bg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 26px rgba(0,0,0,.45);
}
.waves-card__inner{
  position: absolute; inset: auto 0 0 0; /* bottom overlay */
  padding: clamp(16px, 3vw, 28px);
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.65) 30%,
    rgba(0,0,0,.95) 60%,
    rgba(0,0,0,.95) 100%
  );
  display: grid; gap: .6rem;
}
.waves-card__title{
  margin: 0;
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.12;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.waves-card .rdMrBtn{ justify-self: start; margin-top: .2rem; }

/* ===== Spoken Word band (4-card grid like feature-band) ============== */
.ap-spoken-band{
  background: linear-gradient(45deg,#350764,#090014);                     /* same base as feature band */
  color:#fff;
  padding: clamp(36px, 6vw, 90px) 0;
}
.ap-spoken-band__inner{
  max-width: 1400px;                       /* align with other bands */
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
}

/* Heading + intro */
.spoken-head{
  text-align:center;
  margin-bottom: clamp(20px, 4vw, 44px);
}
.spoken-title{
  margin:0;
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  color:#9d8c6e;                           /* gold accent to match */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.spoken-lead{
  margin: 10px auto 0;
  max-width: 70ch;
  color: #bdb5a8;
  font-size: clamp(20px, 1.4vw, 18px);
}

/* Grid: 4 -> 2 -> 1 */
.spoken-grid{
  /*grid-template-columns: repeat(4, minmax(0,1fr));*/
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 24px);
}
@media (max-width: 1100px){
  .spoken-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .spoken-grid{ grid-template-columns: 1fr; }
}
/* Tablet: 2 per row */
@media (max-width: 1100px){
  .spoken-card{ flex: 1 1 calc(50% - 1px); }
}
/* Mobile: 1 per row */
@media (max-width: 640px){
  .spoken-card{ flex: 1 1 100%; min-width: 0; }
}
/* Card with full-bleed background (no tiling), same overlay gradient */
.spoken-card{
  position: relative;
  min-height: clamp(420px, 32vw, 340px);
  border-radius: 18px;
  overflow: hidden;
  background-image: var(--sp-bg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 26px rgba(0,0,0,.45);
  flex: 1 1 calc(25% - 1px);   /* basis ~25%, can grow to fill */
  min-width: 240px;            /* prevents postage-stamp on narrow midsizes */
}

.spoken-card__inner{
  position: absolute; inset: auto 0 0 0;  /* bottom overlay */
  padding: clamp(16px, 3vw, 28px);
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.65) 30%,
    rgba(0,0,0,.95) 60%,
    rgba(0,0,0,.95) 100%
  );
  display: grid; gap: .6rem;
}

.spoken-card__title{
  margin:0;
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.spoken-card__excerpt{
  margin:0;
  color:#eaeaea;
  font-size: clamp(15px, 1.2vw, 18px);
}

/* Button (reuses your glow-outline) */
.spoken-card .rdMrBtn{ justify-self: start; margin-top:.2rem; }

/* Optional: hide excerpt on tiny screens for breathing room */
@media (max-width: 360px){
  .spoken-card__excerpt{ display:none; }
}
/* Outro / older posts */
.spoken-more{
  text-align: center;
  margin-top: clamp(18px, 3vw, 28px);
  display: grid; gap: .6rem; justify-items: center;
}
.spoken-more p{ margin: 0; color:#bdb5a8; }

/* ----------- MAIN CONTENT SECTION ------------ */
.section-main-content {
  background-color: #fff;
  padding: 0; /* ✅ No spacing above or below */
  margin: 0;
}

.section-main-content .container.content-flex {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 ;
  gap: 0; /* ✅ No gap between columns */
}

.content-left {
  flex: 3;
  padding: 40px 20px;
}

.content-left h2{font-weight: 300; color: #ad9364; font-size:1.8em; padding:0 20px 20px 0px;}
.content-left strong, .content-left b{font-weight: 700;}
.content-left h3{color:#7e5d46; padding: 0 20px 20px 20px; font-size:1.6em;}
.content-left p{line-height: 1.9em; padding: 0 20px 20px 0; font-size:1.2em ;}
.content-left  p a:link, .content-left p a:visited{color: #350764; text-decoration: underline;}
.content-left p a:hover, .content-left p a:active{color: #fff; background:#46046b; text-decoration: underline;}

/*.content-cta-buttons {
  margin-top: 30px;
}*/


@media (max-width: 768px) {
  .content-cta-buttons {
    text-align: center;
  }

  .content-cta-buttons a {
    /*display: block;*/
    margin: 10px auto;
    width: max-content;
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal-overlay.show {
  display: flex;
}

.modal-content {
  background: #fff;
  padding: 30px;
  max-width: 600px;
  width: 90%;
  border-radius: 10px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #333;
}

.contact-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.contact-modal.visible {
  opacity: 1;
  pointer-events: auto;
}

.modal-body {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  transform: scale(0.95);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 600px;
  width: 90%;
  position: relative;
}

.contact-modal.animate .modal-body {
  transform: scale(1);
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}



/* --------- RIGHT COLUMN of .section-main.content ------ */
.content-right {
  flex: 1;
  background-color: #f4f4f4;
  padding: 40px 20px;
}

.content-right h3 {
  font-size: 1.4rem;
  color: #c33f28;
  margin-bottom: 1rem;
}
.latest-normal {
  font-weight: normal;
}

.latest-bold {
  font-weight: bold;
}

.news-item {
  margin-bottom: 2rem;
  font-size: 0.9rem;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.news-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.news-thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.news-thumb a, .news-thumb a:hover{text-decoration:none;}

.news-date {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  font-size: 0.9rem;
  font-weight: bold;
  position: relative;
  z-index: 1;
  
}

.news-date .day {
  background-color: #e7500d;
  color: #fff;
  padding: 4px 10px;
  flex: 0 0 auto; /* only as wide as content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.news-date .month {
  background-color: #444;
  color: #fff;
  flex: 1 1 auto; /* take up remaining space */
  display: flex;
  align-items: center;
  padding: 4px 10px;
  text-align: left;
}


.news-item h4 {
  font-weight: bold;
  margin: 0.9rem 0 0.35rem;
  font-size: 1.3rem;
  line-height: 1.2;
}

.news-item p {
  margin: 0;
  color: #444;
  font-size: 1.08rem;
}

.news-item a {
  color: #f26522;
  text-decoration: none;
  font-weight: bold;
}

.news-item a:hover {
  text-decoration: none;
}
.news-item img {
  width: 100%;
  /*max-height: auto;  ✅ Cap the height */
  height:100%;
  object-fit: cover; /* ✅ Crop without distortion */
  object-position: top; /* ✅ Center vertically (and horizontally) */
  aspect-ratio: 16 / 9;
  display: block;
  margin: 0;
  border: none;
   transition: transform 0.4s ease;
   z-index: 1;
   position: relative;
}

.news-item:hover .news-thumb img {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .section-main-content .container.content-flex {
    flex-direction: column;
    padding: 0;
  }

  .content-left,
  .content-right {
    flex: 1 1 100%;
    padding: 20px 15px;
  }
}


/* SOCIAL CARD SECTION */
.section-social-card {
  position: relative;
  background-color: #ebebeb;
  overflow: hidden;
  /*padding: 40px 0;*/
  padding: 40px 0 0 0 ;
}

.social-card-background {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: url('../images/socialCardBg001.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
}
.social-card-container {
  position: relative;
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;
  padding: 0;
  gap: 30px;
  flex-wrap: wrap;
 background:#fff;
}

.social-card-left {
  flex: 1;
  min-height: 300px;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;   /* ✅ Cover the area without white space */
}


.social-card-left img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.social-card-left img:hover {
  transform: scale(1.05);
  opacity:1;
}

/* Responsive adjustment: full-width stacked layout */
@media (max-width: 768px) {
  .social-card-left {
    width: 100%;
    min-height: 500px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
}



.social-card-right {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 20px;
  
}

.social-card-right h2 {
  font-size: 1.5rem;
  font-weight: normal;
  color: #d77431;
  line-height: 1.4;
  margin-bottom: 10px;
}

.social-card-right h2 span {
  font-weight: bold;
}

.social-card-right p {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}
.social-card-right b, .social-card-right strong{font-weight:bold;}

.social-card-right .hashtag {
  color: #d77431;
  font-weight: 500;
}

.social-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.social-arrows {
  display: flex;
  gap: 10px;
}

/* === SOCIAL SLIDER NAVIGATION ARROWS (REUSING YOUTUBE SPRITE) === */
.social-nav-wrapper {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 5; /* Ensure above other slider content */
  pointer-events: none; /* So only buttons are clickable */
}

.social-nav {
  pointer-events: all; /* Restore pointer for buttons inside wrapper */
  z-index: 10; /* Make sure they are clickable above other layers */
}

/* Flip for left arrow */
.social-nav.prev {
  transform: scaleX(-1);
}

/***** new nav buttons *******/
.social-nav-wrapper.bottom-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  position: relative;
  z-index: 5;
}
.social-nav-wrapper.bottom-nav .social-nav {
  width: 32px;
  height: 32px;
  background-image: url('../images/BtnsSprite001.png');
  background-size: 384px 96px;
  background-position: -224px -32px; /* Default state */
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.social-nav-wrapper.bottom-nav .social-nav:hover, .social-nav-wrapper.bottom-nav .social-nav:active{background-position: -256px -32px;}

.social-nav-wrapper.bottom-nav .prev {
  /*background-position: -192px -32px;*/
  background-position: -224px -32px;
  transform: scaleX(-1);
}
.social-nav-wrapper.bottom-nav .next {
  background-position: -224px -32px;
}
/**** end *****/


.social-instruction {
  font-size: 0.85rem; /* make this fit your design */
  color: #aaa;        /* adjust for contrast */
}


.social-buttons {
  display: flex;
  gap: 10px;
}

.social-icons {
  position: absolute;
  bottom: 10px;
  right: 20px;
}

.social-icon {
  width: 32px;
  height: 32px;
  background-image: url('../images/BtnsSprite001.png');
  background-repeat: no-repeat;
  /*background-size: 600px 150px;  Ensure it matches the full sprite */
  background-size: 384px 96px;
  background-color: transparent;
  /*border-radius: 50%;*/
  border: none;
  display: inline-block;
   cursor: pointer;
  margin: 0 1px;
  position: relative;
  z-index: 10;
  /*background-size: 600px 150px !important;  Force it in case something overrides */
}

.social-card-slide {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

/* LinkedIn */
.social-icon.linkedin:link {
  background-position: -288px -32px;
}
.social-icon.linkedin:hover {
  background-position: -352px -32px;
  transform: scale(1.1);
}
.social-icon.linkedin:visited,
.social-icon.linkedin:active {
  background-position: -320px -32px;
}



/* Instagram */
.social-icon.insta:link {
  background-position: 0 -32px;
}
.social-icon.insta:hover {
  background-position: -64px -32px;
  transform: scale(1.1);
}
.social-icon.insta:visited,
.social-icon.insta:active {
  background-position: -32px -32px;
}


/* Twitter (X) */
.social-icon.x:link {
  background-position: -96px -32px;
}
.social-icon.x:hover {
  background-position: -160px -32px;
  transform: scale(1.1);
}
.social-icon.x:visited,
.social-icon.x:active {
  background-position: -128px -32px;
}



/* Specific icons using their sprite positions */
.social-icons a {
  z-index: 10;
  position: relative;
}

.social-icons a.x {
  background-position: -192px -32px;
}

.social-icons a.linkedin {
  background-position: -224px -32px;
}

.social-icons a.instagram {
  background-position: -256px -32px;
}

.social-icon.x-twitter:active {
  filter: brightness(90%);
}
.social-card-container {
  display: none;
  flex-direction: row;
}

.social-card-container.active {
  display: flex;
}


@media (max-width: 768px) {
  .social-card-container {
    flex-direction: column;
    gap: 20px;
  }
  .social-card-footer {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 15px;
  }
}
.social-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.social-nav-wrapper.inline {
  display: flex;
  gap: 0.5rem;
}

.social-icons {
  display: flex;
  gap: 0.25rem;
}

.social-hashtags {
  margin: 10px 0;
}

.social-hashtags .hashtag {
  display: inline-block;
  margin-right: 10px;
  color: #d77431;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.social-hashtags .hashtag:hover {
  text-decoration: underline;
  color: #e7500d;
}
/*search results from 'hashtag links'*/
.no-results {
  
  padding: 40px 20px;
  text-align: center;
  /*background: #f9f9f9;
  border-top: 1px solid #e0e0e0;*/
}

.no-results h2 {
  color: #d77431;
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.no-results p {
  font-size: 1rem;
  margin-bottom: 30px;
}

.recent-search-fallback {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.fallback-post {
  background: #ffffff;
  padding: 20px;
  border: 1px solid #ddd;
  width: 300px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  text-align: left;
  transition: box-shadow 0.3s ease;
}

.fallback-post:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.fallback-post h3 {
  font-size: 1.2rem;
  color: #333;
  margin: 0 0 10px;
}

.fallback-post p {
  font-size: 0.9rem;
  color: #666;
}
/* shorter page header for other pages that aren't the home page */
.page-header-image {
  width: 100%;
  height: 230px;
  background-size: cover;
  background-position: center top;
  margin-bottom:0;
  position: relative;
}

.page-content-area .container {
  max-width: 1200px;
  margin: 0 auto;
  padding:0 20px 40px 20px;
}

/* BREADCRUMBS */
.breadcrumb-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(139, 40, 195, 0.4); /* #c33f28 @ 40% */
  z-index: 1;
  left:0; right:0;
}

.breadcrumb-container {
  max-width: 1200px; /* or your content width */
  margin: 0 auto;
  padding: 0.5em 1em;
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: #ffc9c0;
}
.breadcrumb-separator {
  padding: 0 0.5em;
  color: #ffc9c0; /* keep your current color */
}
.breadcrumb-container a {
  color: #ffc9c0;
  text-decoration: none;
}

.breadcrumb-container .divider {
  margin: 0 0.5em;
  color: #ffc9c0;
}

.breadcrumb-container .breadcrumb-current {
  color: #fff;
}

/************** FOOTER ************/
/*.site-footer {
  width: 100%;
  background-color: #000;
  background-image: url('../images/OP_FooterBg001.jpg');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 60px;
  padding-bottom: 40px;
  color: #fff;
  position: relative;
  z-index: 10;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}*/

/* === FOOTER BACKGROUND === */
.footer-background {
  background-color: #000;
  background-image: url('../images/OP_FooterBg002.jpg');
  background-repeat:repeat-x repeat-y;
  background-size: auto;
  padding: 40px 20px;
  color: #fff;
  text-align:center;
}

/* === FOOTER GRID === */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 30px;
  max-width:1200px;
  margin: 0 auto;

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

/* === COLUMN 1 === */
.footer-logo-cont{text-align: center;}
.footer-logo {
  display: inline-block;
  width: 100px;
  height: 85px;
  background-image: url('../images/OP_FooterLogo001.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 200px 85px;
  transform: scale(1);
  transition: transform 0.3s ease;
}
.footer-logo:hover {
  background-position: -100px 0;
  transform: scale(1.1);
}


/**/.footer-icons {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.footer-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-image: url('../images/BtnsSprite001.png');
  background-repeat: no-repeat;
  background-size: 384px 96px;
  background-position: 0 0;
  opacity: 0.3;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.footer-icon:hover,
.footer-icon:active {
  transform: scale(1.1);
  opacity: 1;
}
.footer-icon.icon-pod{ background-position:  -288px 0; }
.footer-icon.icon-yt{ background-position: -192px -32px; }
.footer-icon.icon-x{ background-position: -96px -32px; }
.footer-icon.icon-ig { background-position: 0 -32px; }
.footer-icon.icon-linkedin{ background-position: -288px -32px; }
.footer-icon.icon-learn{ background-position: -192px 0; }


.footer-quote {
  font-style: italic;
  text-align: center;
  margin: 10px 0;
}
.footer-quote strong{font-weight:bold;}

.footer-contact {
  margin-top: 10px;
  text-align: left;
}
.footer-contact-item {
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  gap: 6px;
  font-size: 14px;
  color: #ccc;
  margin-bottom:12px;
}

.footer-contact-item span {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url('../images/BtnsSprite001.png');
  background-repeat: no-repeat;
  background-size: 240px 60px; /* 20px * 12 cols, 20px * 3 rows */
  vertical-align: middle;
  margin-right: 8px;
  border: 0; outline: none;
}

/* Email Icon */
.footer-contact .footer-mail{
  background-position: -60px 0; /* 4th icon, row 1 */
}

.footer-contact .footer-mail:hover,
.footer-contact .footer-mail:active {
  background-position: -80px 0; /* col 5, row 1 */
}
a.footEmail:hover{color: #d77431;}
/* Phone Icon */
.footer-contact .sprite-phone-grey:link,
.footer-contact .sprite-phone-grey:visited {
  background-position: 0 0; /* col 1, row 1 */
}

.footer-contact .sprite-phone-grey:hover,
.footer-contact .sprite-phone-grey:active {
  background-position: -20px 0; /* col 2, row 1 */
}
.footer-privacy-info{font-size:0.75rem; color: #999;}
.footer-privacy-info a{color: #ccc;}
.footer-privacy-info a:hover{color: #fff;}

/****/
/* Change mail icon when parent link is hovered */
.footEmail:hover .footer-mail {
  background-position: -80px 0; /* hover state position */
  transform: scale(1.1);
}
/* If phone is inside a link structure too */
.footPhone:hover .sprite-phone-grey {
  background-position: -20px 0; /* hover state */
  transform: scale(1.1);
}
.footer-contact-item:hover .sprite-phone-grey {
  background-position: -20px 0;
  transform: scale(1.1);
}


/* === NAVIGATION COLUMN === */

.footer-nav-heading, .footer-form-heading {
  color: #ccc;
  font-size: 1rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  border-bottom: 1px solid #333;
  padding: 6px 0;
  text-align: left;
}
.footer-menu li:hover{
  border-bottom: 1px solid #666;
  background:#2a2a2a;
}

.footer-menu li:last-child {
  border-bottom: none;
}

.footer-menu a {
  text-decoration: none;
  color: #808080;
  transition: color 0.3s ease;
  width: 100%;
  padding:0 0 0 10px;
  display: block;
}

.footer-menu a:hover {
  color: #e9e9e9;
}


/* === CONTACT FORM === */
.footer-form form {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.footer-form label {
  font-size: 14px;
  margin-top: 10px;
  color: #aaa;
}
.footer-form input,
.footer-form textarea {
  background-color: #000;
  border: 1px solid #333;
  color: #fff;
  padding: 8px;
  font-size: 14px;
  margin-top: 5px;
}
.footer-form button {
  margin-top: 12px;
  background-color: #333;
  color: #fff;
  border: 1px solid #999;
  cursor: pointer;
  text-transform: uppercase;
  padding: 10px 25px;
  border-radius: 25px;
  width: auto;
  align-self: flex-end;

}
.footer-form .frmDisclaimer{font-size: 0.65rem; text-transform: uppercase; color: #666;}
.footer-form button:hover {
  background: #e7500d;
  border: 1px solid #e7500d;
  color: #fff;
}
input:focus, textarea:focus {
  outline: none;
  border-color: #f26522;
}
.footer-form select {
  background-color: #000;
  border: 1px solid #333;
  color: #fff;
  padding: 8px;
  font-size: 14px;
  margin-top: 5px;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.footer-form select:focus {
  outline: none;
  border-color: #f26522;
}


/* === FOOTER BOTTOM === */
.footer-bottom {
  background-color: #000;
  text-align: center;
  padding: 10px 0;
  font-size: 13px;
  color: #777;
}

/* === SEARCH PAGE === */

.wp-block-search__button{
  text-transform: uppercase;
  padding: 10px 25px;
  border-radius: 25px;
  font-size: 0.9rem;
  margin: 0 5px;
  display: inline-block;
  transition: all 0.3s ease;
  text-decoration: none;
  background: #e7500d;
  border: 2px solid #e7500d;
  color: #fff;
}
.wp-block-search__button:hover {
  background: #c03f0c;
  color: #fff;
}

/* ===== PRELOADER ====== */

/* === PRELOADER === */
#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.75s ease;
}

.preloader-inner {
  text-align: center;
  color: #fff;
}

.preloader-text {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #ccc;
}

.preloader-text strong {
  color: #7c47cb;
  font-size: 22px;
  display: block;
}

.preloader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f26522;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.blog-posts .news-item {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
  border:none;
  padding-bottom: 30px;
}

.blog-posts .news-thumb {
  width: 50%;
  margin-right: 20px;
  position: relative;
  max-height:350px;
}

.blog-posts .news-content {
  flex: 1;
}
.blog-posts .btnWrp{display: block;}
.blog-posts .rdMr{
  display: inline-block;
  border-radius:25px;
  color:#f26522;
  border:1px solid #f26522;
  font-weight:normal;
  text-decoration: none;
  padding: 5px 15px;
}
.blog-posts .rdMr:hover{background:#c03f0c; color:#fff; text-decoration: none;}
@media (max-width: 768px) {
  .blog-posts .news-item {
    flex-direction: column;
  }
  
.blog .content-container{padding:0!important;}
  .blog-posts .news-content{padding:0 30px;}
  .blog-posts .news-thumb {
    width: 100%;
    margin: 0 0 15px 0;
  }
  .blog .page-header-image{margin-bottom:0;}
}
.blog-posts{padding:50px 0 0 0;}

.page-header-image-faux-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 25px;
  z-index: 1;

}

.page-header-image-faux-title .page-title {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.2;
  color: white;
  margin: 0;
  max-width: 90vw;
  text-align: center;

}


/* ==== SINGLE Posts ==== */

/* Custom single post header */
/*.single-post .page-header-image {
  background-size: cover;
  background-position: center;
  padding: 180px 0 100px;
  color: #fff;
  text-align: center;
  min-height:400px;
}
.single-post .page-title {
  font-size: 48px;
  margin-bottom: 10px;
  background: #000;
  opacity:0.8;
  max-width:70%;
  margin:auto;
}*/


.single-post .page-header-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 600px; /* taller than standard */
  background-size: cover;
  background-position: center;
  text-align: center;
}

.single-post .page-header-image .page-title {
  position: relative;
  padding: 10px 25px;
  display: inline-block;
  line-height: 1.2;
  z-index: 1;
  max-width: 90%;

  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(28px,7.2vw,48px);
  color: #ffffff;
  text-shadow: 2px 2px 3px rgba(0,0,0,.9);
  text-align: center;
}
.single-post .news-item{border-bottom: none;}
.single-post .content-container{padding:0 20px 30px 20px;}
.post-meta{background: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
  font-size: 0.85rem;
  margin-bottom: 1rem;}
.post-meta ,.meta-tags{display: block;}
.print-article {
  text-align: right;
  margin-top: -2.5em;
  margin-bottom: 2em;
}

.print-btn {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #000;
  border: 1px solid #ccc;
  padding: 6px 12px;
  font-size: 0.9em;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.print-btn:hover {
  background: #eee;
  color: #000;
  border-color: #999;
}

.print-btn .dashicons {
  margin-right: 6px;
}

/*
.custom-page-header .breadcrumbs {
  font-size: 14px;
  color: #ccc;
}
.custom-page-header .breadcrumbs a {
  color: #fff;
  text-decoration: underline;
}*/

/* Main layout fix */
.custom-page-header .content-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.custom-page-header .main-column {
  flex: 1 1 66%;
}
.custom-page-header .sidebar {
  flex: 1 1 30%;
}

/* Optional: Prevent image overflow in main content */
.custom-page-header .post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px 0;
}


/***** Universal styles ******/
.wp-block-separator, hr{border-top:1px dashed #ccc; margin:10px 0;}
strong, b{font-weight:bold;}
p, h1, h2, h3, h4, h5, h6{padding:10px 0;}
.container ul{ margin: 0px 20px 20px 45px;
  font-size: 0.9rem;
  line-height: 1.9;}
.page-content-area a{color:#f26522; text-decoration:underline;}
.post-content p, .post-content li{line-height: 1.9em;
  padding: 0 20px 10px 0;
  font-size: 1.2em;
  margin-left:20px;
}
.post-content li{
  font-size: 1.2em;
  margin-left:20px;
}
.post-content h2{font-weight:normal!important; color:#472768; margin:0 0 10px 20px;}
.post-content table{margin-bottom:40px;}
/* ==== SEARCH PAGE ==== */



body.search .search-subheading {
  margin-bottom: 30px;
  text-align: center;
}

body.search .search-form-retry {
  margin-bottom: 50px;
  text-align: center;
}

body.search .search-categories {
  margin: 30px 0;
  text-align: center;
}

body.search .category-buttons .cat-btn {
  display: inline-block;
  margin: 5px;
  padding: 6px 15px;
  border: 1px solid #ddd;
  background: #fff;
  color: #000;
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 3px;
  transition: all 0.3s ease;
}

body.search .category-buttons .cat-btn:hover {
  background: #000;
  color: #fff;
}
.search-again{margin-bottom:20px;}
body.search .searchform  .search-field{padding:8px; border: 1px solid #949494;  flex-grow:1;}
body.search .searchform{display:flex; width:100%;}
body.search .searchform  .search-field:active, body.search .searchform  .search-field:focus{border:1px solid #350764; outline:none;}
body.search .searchform  .search-submit{text-transform: uppercase;
  padding: 10px 25px;
  border-radius: 25px;
  font-size: 0.9rem;
  margin: 0 5px;
  display: inline-block;
  transition: all 0.3s ease;
  text-decoration: none;
  background: #350764;
  border: 2px solid #1e043d;
  color: #fff;}
body.search .searchform  .search-submit:hover{background:#46046b;}
body.search .page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 2rem;
}

body.search .page-grid-item h3 {
  margin-bottom: 10px;
}

body.search .page-grid-item p {
  color: #444;
  font-size: 0.95rem;
  line-height: 1.4;
}
/* ==== CATEGORY PAGE ===*/
body.category .page-title{font-weight: normal;}
body.category .page-title strong{font-weight: bold;}
body.category .news-thumb{width:100%; margin-right:0; min-height:450px;}
body.category .news-item{margin-bottom:0;}
body.category h2{margin-top:30px;}
body.category .blog-posts{padding:50px 0;}

/* ==== CONTACT Page ==== */
body.page-id-11 .contact-right h3{font-size: 1.4rem;
  color: #c33f28;
  margin-bottom: 1rem;}
body.page-id-11 .op-contact-form input, body.page-id-11 .op-contact-form select, body.page-id-11 .op-contact-form textarea{width:100%; padding:8px; border:1px solid #a5a5a5; background: #fff;}
body.page-id-11 .op-contact-form .subBtn{text-align: right;}
body.page-id-11 .op-contact-form .subBtn button{text-transform: uppercase;
  padding: 10px 25px;
  border-radius: 25px;
  font-size: 0.9rem;
  margin: 0 5px;
  transition: all 0.3s ease;
  text-decoration: none;
  background: #46046b;
  border: 2px solid #261736;
  color: #fff;}
body.page-id-11 .op-contact-form .subBtn button:hover{background: #c03f0c; color:#fff;}
body.page-id-11 .op-contact-form__form:focus, body.page-id-11 .op-contact-form__form:active{border: none!important;}
body.page-id-11 .contact-two-col, body.page-id-11 .page-title{padding:0 20px;}
/* iOS-friendly select reset + custom arrow */
body.page-id-11 .op-contact-form select{
  -webkit-appearance: none; /* iOS Safari */
  -moz-appearance: none;
  appearance: none;

  border: 1px solid #a5a5a5;
  border-radius: 4px;       /* or 0 if you want square */
  background-color: #fff;

  /* hide iOS inner shadow look */
  box-shadow: none;

  /* make room for our custom arrow */
  padding-right: 2.25rem;
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: .65rem;

  /* custom arrow via inline SVG (no extra asset) */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  font: inherit;           /* typography match */
  line-height: 1.4;
}

/* Remove the old Windows arrow if ever in play */
body.page-id-11 .op-contact-form select::-ms-expand{ display:none; }

/* Better focus state (optional) */
body.page-id-11 .op-contact-form select:focus{
  outline: none;
  border-color: #e7500d;
  box-shadow: 0 0 0 3px rgba(231,80,13,.2);
}

/* iOS tap highlight removal (optional) */
body.page-id-11 .op-contact-form select{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body.page-id-11 .footer-CTA-blurb h3{padding:0; margin-bottom: 0;}
body.page-id-11 .footer-CTA-blurb{color: #808080; text-align:left; font-size:0.85rem;}
body.page-id-11 .footer-learnMore{text-align: right;}
body.page-id-11 .footer-learnMore a{margin-top: 12px 0; margin: 15px 0; font-size: 0.70rem;
  background-color: #333;
  color: #fff;
  border: 1px solid #999;
  cursor: pointer;
  text-transform: uppercase;
  padding: 10px 25px;
  border-radius: 25px;
  width: auto;}
body.page-id-11 .footer-learnMore a:hover{background: #e7500d; color: #fff;}

/* Hide specific results by ID */
.page-grid .result-id-560,
.page-grid .result-id-47,
.page-grid .result-id-11,.page-grid .result-id-790 {
  display: none !important;
}


/* ======= WOOCOMMERCE ======== */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button{
  background: #fff;
  border: 2px solid #e7500d;
  color: #e7500d;
  text-decoration: uppercase;
  border-radius:25px;
  padding:10px 25px;
  font-weight:normal;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button:hover{
  background: #c03f0c;
  color:#ffffff;
}
.woocommerce-EditAccountForm fieldset{padding:20px; margin-bottom:20px;}
body.woocommerce-dashboard .page-header-image{height:200px;}
.woocommerce-form-login input[type="text"] {
      border-radius: 10px;
      border:1px solid #e5e5e5;
      padding:10px 12px;
      box-shadow:none;}
.woocommerce-form-login input:focus{
      outline: 2px solid #e7500d;
      border-color: #e7500d;
      box-shadow: 0 0 0 2px #ffd6c5;
    }      

/* =========================
   Woo "My Account" – Card nav with 64px sprite icons
   ========================= */
   .woocommerce-MyAccount-navigation{margin-bottom:20px;}

/* Reset & card layout */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0 0 10px; }
.woocommerce-MyAccount-navigation li a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  color: #333; text-decoration: none; font-weight: 500;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}

/* default (state 1) look — like the first card in your mock */
.woocommerce-MyAccount-navigation li a {
  background-color: #ffffff;
  border-color: #e9e9e9;
}

/* hover + active/current (state 2/3) look — like the second card */
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active > a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--is-active > a {
  background-color: #fff5ef;             /* soft orange wash */
  border-color: #f26522;                  /* OP orange */
  box-shadow: 0 4px 12px rgba(242,101,34,.12);
  color: #c33f28;
}

/* Icon pseudo-element (64px) */
.woocommerce-MyAccount-navigation li a::before{
  content: "";
  flex: 0 0 64px;
  width: 64px; height: 64px;
  display: inline-block;
  background-image: url('../images/BtnsSprite002.png'); /* adjust path if needed */
  background-repeat: no-repeat;
  background-size: 768px 512px; /* 64px scale */
  border-radius: 10px;
}

/* =============== ICON STATES (positions pulled from your storeSprite_* --64 rules) =============== */
/* DASHBOARD: 1 (default) / 2 (hover) / 3 (current) */
.woocommerce-MyAccount-navigation-link--dashboard a::before { background-position: -576px 0; }   /* dashboard1 */
.woocommerce-MyAccount-navigation-link--dashboard a:hover::before { background-position: -640px 0; } /* dashboard2 */
.woocommerce-MyAccount-navigation-link--dashboard.is-active a::before { background-position: -704px 0; } /* dashboard3 */

/* ORDERS */
.woocommerce-MyAccount-navigation-link--orders a::before { background-position: 0 0; }            /* orders1 */
.woocommerce-MyAccount-navigation-link--orders a:hover::before { background-position: -64px 0; }   /* orders2 */
.woocommerce-MyAccount-navigation-link--orders.is-active a::before { background-position: -128px 0; } /* orders3 */

/* DOWNLOADS (download1,2,3) */
.woocommerce-MyAccount-navigation-link--downloads a::before { background-position: -384px -320px; }
.woocommerce-MyAccount-navigation-link--downloads a:hover::before { background-position: -448px -320px; }
.woocommerce-MyAccount-navigation-link--downloads.is-active a::before { background-position: -512px -320px; }

/* ADDRESS (home1,2,3) – endpoint is edit-address */
.woocommerce-MyAccount-navigation-link--edit-address a::before { background-position: -576px -192px; }
.woocommerce-MyAccount-navigation-link--edit-address a:hover::before { background-position: -640px -192px; }
.woocommerce-MyAccount-navigation-link--edit-address.is-active a::before { background-position: -704px -192px; }

/* PAYMENT METHODS (card1,2,3) */
.woocommerce-MyAccount-navigation-link--payment-methods a::before { background-position: -384px -64px; }
.woocommerce-MyAccount-navigation-link--payment-methods a:hover::before { background-position: -448px -64px; }
.woocommerce-MyAccount-navigation-link--payment-methods.is-active a::before { background-position: -512px -64px; }

/* ACCOUNT DETAILS (settings1,2,3) – endpoint is edit-account */
.woocommerce-MyAccount-navigation-link--edit-account a::before { background-position: -192px -128px; }
.woocommerce-MyAccount-navigation-link--edit-account a:hover::before { background-position: -256px -128px; }
.woocommerce-MyAccount-navigation-link--edit-account.is-active a::before { background-position: -320px -128px; }

/* LOG OUT (remove) – set to your sprite coords when ready */
.woocommerce-MyAccount-navigation-link--customer-logout a::before { 
  /* TODO: update background-position to match 'remove1' on BtnsSprite002.png */
  background-position: -3000px -3000px; /* placeholder off-canvas so it hides until we map it */
}

/* Accessibility & small polish */
.woocommerce-MyAccount-navigation li a:focus{
  outline: 2px solid #f26522;
  outline-offset: 2px;
}
.woocommerce-MyAccount-navigation-link--customer-logout{display: none;}

/* =========================
   Mobile My Account Nav – 32px sprite icons, grid layout
   ========================= */
@media (max-width: 988px) {

  .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    padding: 0;
  }

  .woocommerce-MyAccount-navigation li {
    margin: 0;
  }

  .woocommerce-MyAccount-navigation li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    font-size: 0.85rem;
    text-align: center;
    
  }

  .woocommerce-MyAccount-navigation li a::before {
    content: "";
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    background-image: url('../images/BtnsSprite002.png');
    background-repeat: no-repeat;
    background-size: 384px 256px;
    flex: 0 0 32px;
  }

  /* Dashboard */
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-position: -288px 0px;
  }
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a:hover::before {
    background-position: -320px 0px;
  }
  .woocommerce-MyAccount-navigation li.is-active.woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-position: -352px 0px;
  }

  /* Orders */
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a::before {
    background-position: 0px 0px;
  }
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a:hover::before {
    background-position: -32px 0px;
  }
  .woocommerce-MyAccount-navigation li.is-active.woocommerce-MyAccount-navigation-link--orders a::before {
    background-position: -64px 0px;
  }

  /* Downloads */
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a::before {
    background-position: -192px -160px;
  }
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a:hover::before {
    background-position: -224px -160px;
  }
  .woocommerce-MyAccount-navigation li.is-active.woocommerce-MyAccount-navigation-link--downloads a::before {
    background-position: -256px -160px;
  }

  /* Addresses */
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a::before {
    background-position: -288px -96px;
  }
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a:hover::before {
    background-position: -320px -96px;
  }
  .woocommerce-MyAccount-navigation li.is-active.woocommerce-MyAccount-navigation-link--edit-address a::before {
    background-position: -352px -96px;
  }

  /* Payment Methods */
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods a::before {
    background-position: -192px -32px;
  }
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods a:hover::before {
    background-position: -224px -32px;
  }
  .woocommerce-MyAccount-navigation li.is-active.woocommerce-MyAccount-navigation-link--payment-methods a::before {
    background-position: -256px -32px;
  }

  /* Account Details */
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a::before {
    background-position: -96px -64px;
  }
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a:hover::before {
    background-position: -128px -64px;
  }
  .woocommerce-MyAccount-navigation li.is-active.woocommerce-MyAccount-navigation-link--edit-account a::before {
    background-position: -160px -64px;
  }
}

body.single-post .page-header-image-faux-title{background:none;}

/* ========= Tablet / compact desktop: 769–1029px ========= */
@media (min-width: 769px) and (max-width: 1029px) {
  /* keep everything on one line */
  .branding-bar .container { 
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
  }

  /* compact logo + swap to compact asset */
  .branding-left { flex: 0 0 auto; }
  .branding-left img {
    max-width: 136px !important;
    height: auto;
    content: url('../images/OraclePetroleum_Compact.png');
    margin: 0;
    padding: 0;
  }

  /* push right block to the right edge */
  .branding-right {
    margin-left: auto;           /* pushes it to the right */
    justify-content: flex-end;
    flex: 1 1 auto;              /* allow shrinking if space is tight */
    min-width: 0;
    gap: 12px;
  }

  /* icons only (hide labels) */
  .branding-right .link-text,
  .branding-right .lnk-text { display: none !important; }
}

/* ====================== Mobile: <768px ====================== */
@media (max-width: 768px) {
  /* force a single row: logo left, icons right */
  .branding-bar .container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
  }

  /* compact logo + asset swap */
  .branding-left { flex: 0 0 auto; }
  .branding-left img {
    max-width: 115px !important;
    height: auto;
    content: url('../images/OraclePetroleum_Compact.png');
    margin: 0;
    padding: 0;
  }

  /* right block sits on the right */
  .branding-right {
    margin-left: auto; 
    justify-content: flex-end;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* always show both icons on mobile */
  .branding-col.branding-email,
  .branding-col.branding-PP { display: flex !important; }

  /* hide button on small screens */
  .book-now-button { display: none !important; }

  /* icons only (no labels) */
  .branding-right .link-text,
  .branding-right .lnk-text { display: none !important; }
}

/* Fix only the 2nd-level submenu (desktop) */
@media (min-width: 1101px){
  /* make the parent <li> the positioning anchor */
  .main-menu > li,
  .main-navigation .sub-menu > li { position: relative; }

  /* level-1 panel (unchanged here, just ensure absolute) */
  .main-navigation .sub-menu { position: absolute; top: 100%; left: 0; }

  /* level-2 flyout: attach to the right edge of its parent row */
  .main-navigation .sub-menu .sub-menu{
    position: absolute;
    top: 0;                 /* align to the parent row’s top */
    left: 100%;             /* open to the RIGHT of level-1 panel */
    margin: 0;              /* kill any inherited margins that “step out” */
    min-width: 240px;       /* adjust if you need wider */
    border-top: 0;          /* keep only the side border on flyout */
    border-left: 2px solid var(--ap-accent, #5f1ea2);
    box-sizing: border-box; /* include borders/padding in width */
    z-index: 1200;          /* above the logo */
  }

  /* keep links inside the panel’s width */
  .main-navigation .sub-menu .sub-menu a{ box-sizing: border-box; width: 100%; }

  /* show level-2 on hover/focus of its parent item */
  .main-navigation .sub-menu > li:hover > .sub-menu,
  .main-navigation .sub-menu > li:focus-within > .sub-menu{ display: block; }

  /* make sure nothing clips the flyout */
  .ap-header-shell,
  nav.main-navigation,
  nav.main-navigation .nav-container { overflow: visible; }
}

/* OPTIONAL: if a top-level item is near the right edge, flip flyout LEFT
   (use -n+2 or -n+3 depending on how many items are near the edge) */
@media (min-width: 1101px){
  .main-menu > li:nth-last-child(-n+2) > .sub-menu .sub-menu{
    left: auto; right: 100%;
    border: 2px solid var(--ap-accent, #5f1ea2);
  }
}
/* === Hero overlay + content (keeps your hero-slide sizing) === */
/* === HERO: layout + visibility (scoped, overrides older rules) === */
section.hero-slider{
  position:relative;
  width:100%;
  min-height: clamp(520px, 70vh, 860px); /* a bit taller for your bigger titles */
  overflow:hidden; z-index:1;
  background:#000;
}

/* Only one slide is visible/clickable at a time */
section.hero-slider > article.hero-slide{
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  will-change: opacity;
  pointer-events: none;
  transition: opacity .65s ease; /* keep in sync with JS FADE_MS */
  background-position: center top!important;
}
section.hero-slider > article.hero-slide.active{
  opacity: 1;
  visibility: visible;
  z-index: 1;
  pointer-events: auto;
}

/* faux right column overlay */
section.hero-slider .hero-overlay{
  position:absolute; top:0; right:0; bottom:0;
  width:min(50%, 760px);                   /* right “column” */
  background:rgba(0,0,0,.7);
  display:flex; align-items:center;
  padding: clamp(16px, 12vw, 56px);
  z-index:3;
}
section.hero-slider .hero-slide-content{ max-width:680px; color:#fff; opacity:1; text-align: center; }

/* typography (bump title later if you like) */
section.hero-slider .hero-slide-title{
  font-size: clamp(28px, 3.8vw, 56px);
  line-height:1.12; margin:0 0 .4em 0;
  color:#9d8c6e;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9);
}
section.hero-slider .hero-slide-excerpt{
  font-size: clamp(20px, 1.3vw, 20px);
  line-height:1.6; margin:0 0 1rem 0; color:#bdb5a8;
}

/* hide excerpt earlier for space */
@media (max-width: 980px){ section.hero-slider .hero-slide-excerpt{ display:none; } }

/* mobile: overlay becomes bottom half, taller so title fits */
@media (max-width: 768px){
  section.hero-slider{ min-height: 68vh; }
  section.hero-slider .hero-overlay{
    top:auto; left:0; right:0; bottom:0;
    width:100%; height:55%;
  }
  section.hero-slider .hero-slide-title{ font-size: clamp(24px, 7vw, 42px); }
}

/* arrows */
section.hero-slider .hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(0,0,0,.45); color:#a06f44;
  font-size:28px; line-height:44px; text-align:center; cursor:pointer; z-index:4;
}
section.hero-slider .hero-prev{ left:14px; }
section.hero-slider .hero-next{ right:14px; }
section.hero-slider .hero-nav:hover{ background:rgba(0,0,0,.65); }

/* Bigger hero dots (works for span OR button dots) */
section.hero-slider .hero-dots{
  gap: 12px;                 /* space between dots */
  bottom: 18px;              /* optional: sit a bit higher */
}

/* If any old rule still targets only spans, this makes buttons visible too */
section.hero-slider .hero-dots > *{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-block;
}

section.hero-slider .hero-dots > *.active{ background:#fff; transform: scale(1.08); }

/* keyboard focus ring */
section.hero-slider .hero-dots > *:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Pill outline + animated gradient glow on hover */
.rdMrBtn.btn-glow-outline{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 12px 26px;
  border: 1px solid rgba(255,255,255,.9); /* outline only */
  background: transparent;
  color: #fff;
  border-radius: 999px;                     /* pill */
  text-transform: none;                     /* keep your casing */
  line-height: 1;
  transition: color .2s ease, border-color .2s ease, transform .12s ease;
  z-index: 0;                               /* create a stacking context */
  opacity: 0.8;
  text-align:center;
  margin:auto;

}

/* the glow */
.rdMrBtn.btn-glow-outline::before{
  content: "";
  position: absolute;
  inset: -3px;                              /* slightly larger than the pill */
  border-radius: inherit;
  background: linear-gradient(45deg, #009296, #5f1ea2, #c77502);
  background-size: 400% 100%;
  filter: blur(6px);
  opacity: 0;                               /* off by default */
  transition: opacity .25s ease, transform .25s ease;
  z-index: -1;                              /* behind the button */
  text-shadow: 2px 2px black;
}

/* hover / focus: show the animated glow */
.rdMrBtn.btn-glow-outline:hover,
.rdMrBtn.btn-glow-outline:focus-visible{
  border-color: transparent;                /* let the glow define the edge */
  background: #000!important;
}
.rdMrBtn.btn-glow-outline:hover::before,
.rdMrBtn.btn-glow-outline:focus-visible::before{
  opacity: 1;
  animation: ap-glow-shift 6s linear infinite;
}

/* keep keyboard accessibility visible */
.rdMrBtn.btn-glow-outline:focus-visible{
  outline: 2px solid #fff3;                 /* subtle focus ring */
  outline-offset: 3px;
}

/* optional: slight press feedback */
.rdMrBtn.btn-glow-outline:active{ transform: translateY(1px); }

/* prefers-reduced-motion: stop the animation but keep the glow */
@media (prefers-reduced-motion: reduce){
  .rdMrBtn.btn-glow-outline:hover::before,
  .rdMrBtn.btn-glow-outline:focus-visible::before{ animation: none; }
}

@keyframes ap-glow-shift{
  0% { background-position:   0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position:  0% 50%; }
}
/* Scale the page to fit if viewport < 280px */
@media (max-width: 279px){
  body{
    width: 280px;                          /* layout at 280px */
    transform: scale(calc(100vw / 280));
    transform-origin: 0 0;
  }
}
/* Kill any legacy keyframe animation on slides */
section.hero-slider .hero-slide,
section.hero-slider .hero-slide.active {
  animation: none !important;
  /* if an old CSS used transition-delay tricks, neutralize those too */
  transition-delay: 0s !important;
}

/* ===== AP Content Band ================================================= */
.ap-content-band{
  background:#ffffff; /* independent of other bands */
  color:#444444;
  padding: clamp(40px, 6vw, 96px) 0;
}
.ap-content-band__inner{
  max-width: 1400px;                  /* align with WAVES band */
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);  /* same side padding */
}

/* --- Single column (today's use) --- */
.ap-content--single{
  max-width: 111ch;                    /* comfortable reading width */
  margin: 0 auto;
}
.ap-content--single > *:first-child { margin-top: 0; }
.ap-content__ctas{ margin-top: clamp(16px, 3vw, 28px); }

/* Gutenberg align support inside the band */
.ap-content--single .alignwide{
  max-width: min(1200px, 100%);
  margin-left: auto; margin-right: auto;
}
.ap-content--single .alignfull{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- Two-column variant (future) --- */
.ap-content--two{
  display: grid;
  grid-template-columns: 2.2fr 1fr;   /* 3:1 feel */
  gap: clamp(16px, 2.2vw, 28px);
}
.ap-content__main{
  min-width: 0;                        /* avoid overflow with long content */
}
.ap-content__aside{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: clamp(12px, 2vw, 18px);
}
.ap-aside__title{
  margin: 0 0 .6rem 0;
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  color:#9d8c6e;
}
.ap-aside__item{ display: grid; gap: .35rem; margin-bottom: 1rem; }
.ap-aside__thumb img{ border-radius: 10px; display:block; }
.ap-aside__heading{ margin: 0; font-size: 1rem; }
.ap-aside__excerpt{ margin: 0; color:#ccc; font-size: .95rem; }

/* stack on tablet */
@media (max-width: 960px){
  .ap-content--two{ grid-template-columns: 1fr; }
}

/* --- Grid variant (future) --- */
.ap-content-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 2vw, 24px);
}
.ap-slot{ background:#0c0c0c; border:1px solid #1b1b1b; border-radius: 14px; min-height: 140px; }

/* Typography polish in band */
.ap-content-band h1, .ap-content-band h2, .ap-content-band h3,
.ap-content-band h4, .ap-content-band h5, .ap-content-band h6{
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}
.ap-content h2{color:#7c47cb; text-align: center; font-size:42px; padding-bottom:20px;}
.ap-content-band p{ color:#7e5d46; font-size:1.2em; line-height:1.8em;}
/*.ap-content-band p, .ap-content-band h1, .ap-content-band h2, .ap-content-band h3, .ap-content-band  h4, .ap-content-band  h5, .ap-content-band  h6{padding:0 20px;}*/

/* ===== YouTube Band =================================================== */
.ap-youtube-band{
  background:#350764; /* or match a band color if you prefer */
  color:#fff;
  padding: clamp(36px, 6vw, 90px) 0;
}
.ap-youtube-band__inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
}
.ap-youtube-head{
  text-align:center;
  display: grid;
  gap: .6rem;
  margin-bottom: clamp(18px, 3vw, 32px);
}
.ap-youtube-title{
  margin:0;
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  color:#9d8c6e;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.ap-youtube-lead{ margin:0; color:#bdb5a8; font-size:20px; }
.ap-youtube-channel{ justify-self:center; margin-top:.2rem; }

/* Responsive player */
.ap-yt-player-wrap{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 26px rgba(0,0,0,.45);
  background:#111;
}
.ap-yt-player{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

/* Thumbnails row */
.ap-yt-thumbs{
  margin-top: clamp(14px, 2.4vw, 24px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: clamp(10px, 1.6vw, 16px);
}
@media (max-width: 1100px){
  .ap-yt-thumbs{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .ap-yt-thumbs{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.ap-yt-thumb{
  position: relative;
  border: 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #0b0b0b;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 8px 22px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .2s ease;
}
.ap-yt-thumb:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.ap-yt-thumb.is-active{ outline: 2px solid #9d8c6e; outline-offset: 2px; }

.ap-yt-thumb img{
  width:100%; height:auto; display:block;
  aspect-ratio: 16 / 9; object-fit: cover;
}

/* overlay meta (play + title) */
.ap-yt-thumb__meta{
  position: absolute; inset: auto 0 0 0;
  display: grid; grid-template-columns: auto 1fr; gap:.5rem; align-items:center;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 35%, rgba(0,0,0,.92) 100%);
}
.ap-yt-thumb__play{
  display:inline-grid; place-items:center;
  width:26px; height:26px; line-height:26px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color:#000; font-weight: 700;
  font-size: 14px;
}
.ap-yt-thumb__title{
  color:#fff; font-size: .95rem; line-height:1.2; text-align:left;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}


/* ===== FAQ band (4-up, minimal cards) ================================ */
.ap-faq-band{
  background: #140d30;
  color: #a39191;
  padding: clamp(36px, 6vw, 90px) 0;
}
.ap-faq-band__inner{
  max-width: 1400px;                       /* align with other bands */
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);       /* same side padding as WAVES */
}

/* Heading */
.faq-head{
  text-align: center;
  margin-bottom: clamp(20px, 4vw, 44px);
}
.faq-title{
  margin: 0;
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  color: #9d8c6e;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Grid: 4 -> 2 -> 1 */
.faq-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(12px, 2vw, 24px);
}
@media (max-width: 1100px){
  .faq-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .faq-grid{ grid-template-columns: 1fr; }
}

/* Minimal cards: no background, no border */
.faq-card{
  background: none;
  border: none;
  padding: 0;                                /* text sits directly on band */
}
.faq-q{
  margin: 0 0 .35rem 0;
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 24px);
  color: #fff;
}
.faq-a{
  margin: 0;
  color: #e6f2ef;                            /* softer white for reading */
  line-height: 1.7;
  font-size: clamp(15px, 1.2vw, 18px);
}

/* Links inside answers */
.faq-a a{
  color: #dfd4b3;                            /* subtle teal highlight */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-a a:hover{
  color: #d7efe9;
}

/* ===== Contact page base ============================================= */
.ap-contact{
  background: #fff; /* or transparent if your page already has a band */
  color:#fff;
  padding: clamp(36px, 2vw, 90px) 0;
}
.ap-contact__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
}
.ap-contact__title{
  margin: 0 0 clamp(18px, 3vw, 28px);
  font-family: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  color:#9d8c6e;
}

/* Target form by class, with a fallback to the contact template */
.ap-form,
body.page-template-page-contact form{
  display: grid;
  grid-template-columns: 1fr 1fr;      /* two columns desktop */
  gap: clamp(14px, 2vw, 22px);
  background:#fff9f7;
  border-radius: 18px;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 26px rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
}

/* Make message + consent + button span both columns */
.ap-form .field--full,
.ap-form textarea,
.ap-form .form-consent,
.ap-form .form-actions{ grid-column: 1 / -1; }

/* Labels */
.ap-form label{
  display:block;
  margin: 0 0 6px 2px;
  font-size: .95rem;
  color:#615a4e;
}

/* Inputs / selects / textareas */
.ap-form input[type="text"],
.ap-form input[type="email"],
.ap-form input[type="tel"],
.ap-form select,
.ap-form textarea,
body.page-template-page-contact form input[type="text"],
body.page-template-page-contact form input[type="email"],
body.page-template-page-contact form input[type="tel"],
body.page-template-page-contact form select,
body.page-template-page-contact form textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: #ede8e0;
  color:#261736;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  font-size: 1rem;
  line-height: 1.4;
}

/* Focus ring (gold glow) */
.ap-form input:focus,
.ap-form select:focus,
.ap-form textarea:focus,
body.page-template-page-contact form input:focus,
body.page-template-page-contact form select:focus,
body.page-template-page-contact form textarea:focus{
  border-color:#9d8c6e;
  box-shadow: 0 0 0 3px rgba(157,140,110,.05);

}

/* Placeholder */
.ap-form ::placeholder{ color: #bdb5a8; opacity:.85; }

/* Select — custom arrow */
.ap-form select{
  appearance: none;
  background-image:
    linear-gradient(transparent,transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239d8c6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* Textarea height */
.ap-form textarea{ min-height: 140px; resize: vertical; }

/* Consent / helper text */
.ap-form .form-consent{
  font-size: .9rem;
  color:#c7c0b6;
}

/* Errors (if you add .has-error on the wrapper) */
.ap-form .has-error input,
.ap-form .has-error select,
.ap-form .has-error textarea{ border-color:#f26522; box-shadow: 0 0 0 2px rgba(242,101,34,.2); }
.ap-form .error-text{ color:#f8b199; font-size:.9rem; margin-top:4px; }

/* Actions + Submit button (reuses your glow-outline vibe) */
.ap-form .form-actions{ display:flex; gap:10px; align-items:center; }
.ap-form .ap-btn{
  position: relative;
  display:inline-flex; align-items:center; justify-content:center;
  height: 44px; padding: 0 22px;
  border-radius: 26px;
  border:1px solid #9d8c6e;
  color:#a06f44; background: transparent;
  text-decoration:none; cursor:pointer;
  transition: transform .08s ease;
}
.ap-form .ap-btn:hover{ transform: translateY(-1px); }
.ap-form .ap-btn::before{
  content:""; position:absolute; inset:-2px;
  border-radius: inherit; z-index:-1;
  background: #fff;
  filter: blur(6px); opacity:.0; transition: opacity .2s ease;
}
.ap-form .ap-btn:hover::before{ opacity:.7; }

/* Mobile: single column */
@media (max-width: 720px){
  .ap-form, body.page-template-page-contact form{ grid-template-columns: 1fr; }
}

/* Remove default ugly submit look if not using .ap-btn */
body.page-template-page-contact form input[type="submit"]{
  -webkit-appearance:none; appearance:none;
  border:1px solid #9d8c6e; background:transparent; color:#fff;
  padding: 10px 20px; border-radius:26px; cursor:pointer;
}
body.page-template-page-contact form input[type="submit"]:hover{
  box-shadow: 0 0 0 3px rgba(157,140,110,.25);
}
.contactFrm .ap-notice{background: #edfaed;
  margin: 20px 0;
  border: 1px solid #7da766;
  border-radius: 25px;
  padding: 20px;
  color: #4a632b;}
  

  /* =========================================================
   BLOG — HERO, FILTERS, GRID, FEATURED, CARDS, PAGINATION
   ========================================================= */

/* ===== 1) Blog hero band ===== */
.blog-hero{
  background: url('../images/defaultHeader001.jpg') center/cover no-repeat;
  color:#fff;
  padding: clamp(36px, 6vw, 80px) 0 0;
  background-position: top;
}
.blog-hero__inner{
  max-width:1400px;
  margin:0 auto;
  padding:0 clamp(16px,4vw,28px);
}
.blog-hero__title{
  margin:0;
  font-family:'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight:400;
  font-size: clamp(28px,4.2vw,48px);
  color:#ffffff;
  text-shadow: 2px 2px 3px rgba(0,0,0,.9);
  text-align: center;
}
.blog-hero__lead{
  margin:auto;
  max-width: 70ch;
  color:#bdb5a8;
  font-size: clamp(17px,1.4vw,18px);
  padding:0 0 20px 0;
  text-shadow: 2px 2px 3px rgba(0,0,0,.8);
  text-align: center;
}

/* ===== 2) Filters row ===== */
.blog-filters{
  background: linear-gradient(to right,#170033,#472768,#853637);
  border-top:3px solid;
  border-image: linear-gradient(to left,#f26522,#6b1fff,#009296) 1;
}
.blog-filters__inner{
  max-width:1400px;
  margin:0 auto;
  padding: clamp(12px,2vw,18px) clamp(16px,4vw,28px) clamp(10px,2vw,16px);
  display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between; text-align:center;
}
.cat-chips{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:auto;
}
.chip{
  display:inline-flex; align-items:center; height:34px;
  padding:0 14px; border-radius:18px;
  border:1px solid rgb(231,217,210);
  color: rgb(231,217,210);
  text-decoration:none; font-size:.75rem;
  background: rgba(231,217,210,.15);
  transition: border-color .15s, transform .08s, background-color .15s;
}
.chip:hover{
  transform: translateY(-1px);
  border-color:#9d8c6e;
  background: rgba(231,217,210,.22);
}
.chip--active{
  border-color:#fff;
  background:#46046b;
  color:#fff;
  text-shadow: 2px 2px 2px rgba(0,0,0,.8);
}
.chip--active:hover{ border-color:#fff; }

/* Optional: hide search in filters completely */
/* .blog-filters .search-form{ display:none; } */
.blog-filters .search-form{ display:flex; gap:8px; }
.blog-filters .search-field{
  background: rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  border-radius:10px;
  padding:8px 12px; min-width:220px;
}
.blog-filters .search-submit{ display:none; }

/* ===== 3) Archive grid ===== */
.post-archive{ padding: 8px 0 clamp(40px,2vw,80px); }
.post-grid{
  max-width:1400px;
  margin:0 auto;
  padding:0 clamp(16px,4vw,28px);
  display:grid;
  gap: clamp(14px,2vw,22px);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:1024px){ .post-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:720px){  .post-grid{ grid-template-columns: 1fr; } }

/* ===== 4) Featured post (full-width hero row) ===== */

/* Accent band framing the hero card */
.post-featured-wrap{
  grid-column: 1 / -1;                 /* span full grid */
  background: linear-gradient(90deg,#9d8c6e,#46046b);
  padding: 7px;                         /* ring thickness */
  border-radius: 22px;
  margin: clamp(16px,2vw,24px) 0;
}


/* Right-side readability gradient */
.post-featured__shade{
  position:absolute; inset:0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,.78) 70%,
    rgba(0,0,0,.92) 100%
  );
  pointer-events:none;
}

/* Content column on the RIGHT */
.post-featured__content{
  position:absolute; inset:0;
  display:grid; align-content:center; justify-items:start;
  max-width: 640px;
  margin-left: auto;                    /* push to right */
  padding: clamp(18px, 3.2vw, 36px);
  color:#fff; text-align:left; z-index:1;
}
.post-featured__meta{
  opacity:.9; color:#e8e0d6; font-size:.95rem;
  display:flex; gap:.5rem; align-items:center;
}
.post-featured__meta .dot{ opacity:.6; }
.post-featured__title{
  margin:.2rem 0 .4rem;
  font-family:'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight:400;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height:1.12;
  color:#fff;
  text-shadow: 2px 2px 6px rgba(0,0,0,.55);
}
.post-featured__title a{ color:inherit; text-decoration:none; }
.post-featured__excerpt{
  margin:0 0 .8rem 0;
  color:#e9e1d8;
  font-size: clamp(18px, 1.25vw, 20px);
  line-height:1.65;
}
.post-featured .rdMrBtn{ justify-self:start; }

@media (max-width:900px){
  .post-featured__shade{
    background: linear-gradient(
      90deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.55) 50%,
      rgba(0,0,0,.85) 100%
    );
  }
  .post-featured__content{ max-width: 90%; }
}
@media (max-width:520px){
  .post-featured{ min-height: clamp(520px, 68vh, 620px); }
}


/* ======== */
/* Full-width color band behind the featured post */
.blog-feature-band{
  background: linear-gradient(90deg,#170033,#472768,#853637);
  padding: clamp(14px, 2.4vw, 26px) 0;   /* top/bottom space for the band */
}
.blog-feature-band__inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px,4vw,28px);
}

/* Featured card itself (image covers; text on the right) */
.post-featured{
  position: relative;
  min-height: clamp(700px, 42vw, 540px);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  background-image: var(--feat-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

/* Right-side readability shade */
.post-featured__shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%,
                                     rgba(0,0,0,.55) 45%,
                                     rgba(0,0,0,.78) 70%,
                                     rgba(0,0,0,.92) 100%);
  pointer-events:none;
}

/* Content column on the right */
.post-featured__content{
  position:absolute; inset:0;
  display:grid; align-content:center; justify-items:start;
  padding: clamp(18px, 3.2vw, 36px);
  max-width: 640px;
  margin-left: auto; /* pushes to right */
  color:#fff; text-align:left; z-index:1;
  background: rgba(0,0,0,.4);
}

/* Make small cards’ overlay sit BEHIND the text/button */
.post-card{ position:relative; overflow:hidden; }
.post-card__bg{ position:absolute; inset:0; z-index:0;
  background-image: var(--bg); background-size:cover; background-position:center top; }
.post-card::after{ content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%,
                                     rgba(0,0,0,.45) 28%,
                                     rgba(0,0,0,.82) 70%,
                                     rgba(0,0,0,.90) 100%); }
.post-card__inner{ position:absolute; inset:auto 0 0 0; z-index:2;
  padding: clamp(12px, 2.4vw, 22px); color:#fff; }


/* ===== 5) Regular post cards ===== */
.post-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  min-height: clamp(380px, 30vw, 460px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 26px rgba(0,0,0,.45);
  background:#0c0c18; /* safety */
}
.post-card__bg{
  position:absolute; inset:0;
  background-image: var(--bg);
  background-size: cover;
  background-repeat:no-repeat;
  background-position: center top;
  transform: scale(1.02);
  transition: transform .35s ease, opacity .35s ease;
}
.post-card::after{
  content:""; position:absolute; inset:0;
  /* lighter fade for better legibility */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.45) 28%,
    rgba(0,0,0,.82) 70%,
    rgba(0,0,0,.90) 100%
  );
}
.post-card:hover .post-card__bg{ transform: scale(1.06); }

.post-card__inner{
  position:absolute; inset:auto 0 0 0;
  padding: clamp(12px, 2.4vw, 22px);
  color:#fff;
  display:grid; gap:.6rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.post-card__title{
  margin:0;
  font-family:'Abril Fatface', Georgia, 'Times New Roman', serif;
  font-weight:400;
  font-size: clamp(18px,2.2vw,26px);
}
.post-card__excerpt{ margin:0; color:#d7d1c6; }
.card-link{ position:absolute; inset:0; z-index:3; }

/* ===== 6) Meta & pagination ===== */
.meta-row{ color:#c6bfb2; font-size:.9rem; display:flex; align-items:center; gap:.45rem; }
.meta-row .dot{ opacity:.6; }

.ap-pagination{
  display:flex; justify-content:center;
  margin: clamp(20px,4vw,40px) 0 0;
}
.ap-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin:0 4px; border-radius:50%;
  text-decoration:none; color:#eae6de;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
}
.ap-pagination .page-numbers.current{ border-color:#9d8c6e; background:rgba(0,0,0,.35); }
.ap-pagination .page-numbers:hover{ transform: translateY(-1px); border-color:#9d8c6e; }

/* Reusable button */
.ap-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 20px; border-radius:24px; border:1px solid #9d8c6e; color:#fff; text-decoration:none; }
.ap-btn--ghost{ background: transparent; }
.ap-btn--chip{ height:36px; padding:0 14px; font-size:.95rem; align-self:start; background:transparent; border:1px solid rgba(255,255,255,.18); }


/* Reusable page hero using the blog header look */
.page-header-image{
  position: relative;
  color: #fff;
}
.page-header__bg{
  position: absolute;
  inset: 0;
  background: var(--page-header-bg) center top / cover no-repeat;
}
.page-header-image::after{
  content: "";
  position: absolute;
  inset: 0;
  /* same style vibe as your blog hero overlay */
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.75) 85%);
}
.page-header-image .blog-hero__inner{
  position: relative;           /* sit above overlay */
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(36px, 14vw, 80px) clamp(16px, 4vw, 28px);
  z-index: 1;
  padding-bottom:40px;
}


/* === BLOG: gap-less grid (3/2/1) === */
.post-archive{ padding: 0; }                   /* no outer spacing */
.post-grid{
  max-width: none;                             /* let it go full width */
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0;                                      /* <- no gaps between cards */
}
@media (max-width:1024px){ .post-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:720px){  .post-grid{ grid-template-columns: 1fr; } }

/* make cards abut cleanly */
.post-card{
  border-radius: 0;
  box-shadow: none;
  min-height: clamp(360px, 30vw, 460px);
}
.post-card::after{ /* keep your readability gradient */
  pointer-events: none;
}


/* Turn existing "Read more" into the glow pill */
.blog-posts .rdMr {
  border: 1px solid rgba(255,255,255,.9);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 12px 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  position: relative;
  z-index: 0;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, transform .12s ease;
}

/* animated glow halo (same recipe as feature band) */
.blog-posts .rdMr::before{
  content:"";
  position:absolute; inset:-3px;
  border-radius:inherit;
  background: linear-gradient(45deg,#009296,#5f1ea2,#c77502);
  background-size:400% 100%;
  filter: blur(6px);
  opacity:0;
  transition: opacity .25s ease, transform .25s ease;
  z-index:-1;
}

.blog-posts .rdMr:hover,
.blog-posts .rdMr:focus-visible{
  border-color: transparent;
  transform: translateY(-1px);
}
.blog-posts .rdMr:hover::before,
.blog-posts .rdMr:focus-visible::before{
  opacity:1;
  animation: glow-shift 3.2s linear infinite;
}

@keyframes glow-shift {
  0%{ background-position:0% 0; }
  100%{ background-position:200% 0; }
}

/* Make page header background act as a true section with bottom padding */
.page-header-image{
  position: relative;
  background-image: var(--page-header-bg); /* already set inline in PHP */
  background-size: cover;
  background-position: center top;
  padding: clamp(36px,6vw,60px) 0 clamp(28px,4vw,64px); /* bottom padding creates space above chips */
}

/* Inner group: optional extra bottom breathing room */
.blog-hero__inner{ padding-bottom: clamp(8px,2vw,16px); }

/* Breadcrumb bar stays pinned to the bottom of the header */
.breadcrumb-bar{ position:absolute; left:0; right:0; bottom:0; }

/* === BLOG: gap-less grid (3/2/1) === */
.post-archive{ padding: 0; background:#000!important; }                   /* no outer spacing */
.post-grid{
  max-width: none;                             /* let it go full width */
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0;                                      /* <- no gaps between cards */
}
@media (max-width:1024px){ .post-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:720px){  .post-grid{ grid-template-columns: 1fr; } }

/* make cards abut cleanly */
.post-card{
  border-radius: 0;
  box-shadow: none;
  min-height: clamp(360px, 30vw, 460px);
}
.post-card::after{ /* keep your readability gradient */
  pointer-events: none;
}

/* Category header: perfectly centre the faux title block */
body.category .page-header-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.category .page-header-image-faux-title.page-header--centered {
  position: static;          /* stop the slight offset from translate */
  transform: none;
  padding: 10px 24px;
  text-align: center;
}
body.category .page-header-image-faux-title .page-title {
  margin: 0;
  padding: 6px 0;
}

/* Chips row under the header/breadcrumbs (reuses search page chip styles) */
.category-chips-wrap {
  background: #0b0217;         /* subtle bar to match theme */
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.category-chips-wrap .category-buttons {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  text-align: center;
}

/* use your existing .category-buttons .cat-btn rules from Search page,
   but add a "current" state so visitors know where they are */
.category-buttons .cat-btn.is-current {
  background: #000;
  color: #fff;
  border-color: #000;
  cursor: default;
}

body.archive {background: #000;}
.container h3, .container h3 strong{font-size: 1.6rem;
  font-weight: normal;
  color: #7347b3;}
.container h4{font-size: 1.3rem;
  color: #ac8066;font-family: 'Montserrat', sans-serif;
  font-weight: 300;}
  .container h4 strong{font-weight:700;}