/* Core Layout Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
    --main-colour:#0cc;
    --nav-background:#268743;
    --link: white;
    --cct-footer-bg: #1c5253;
    --cct-footer-text: white;
    --cct-dark-green: #1D6332;
    --cct-std-green: #268743;
    --active-hover: #ffff80;
    --active-background: #46a763;
    --body-background: #fffffd;
    --welcome-list: #e8e8d8;
}
/* 1. Style the outer screen canvas */
        html {
            background-color: #e0e0e0; /* Outer background color */
            height: 100%;
        }

        .playfair-display-600> {
            font-family: "Playfair Display", serif;
            font-optical-sizing: auto;
            font-weight: 600;
            font-style: normal;
          }

          .text-xxs {
            font-size: 0.625rem !important; /* 10px */
        }
body {
  font-family: Arial, sans-serif;
  background-color: var(--body-background);
  /*width: 50%;*/
  margin: 0 auto;
}

h1, h2{
    font-family: "Playfair Display";
}

/* Brand Link Container */
.pw-brand {
  display: flex;
  align-items: center;            /* Aligns logo and wording perfectly in line */
  text-decoration: none;          /* Removes default hyperlink underline */
  gap: 12px;                      /* Controls spacing between image and text */
}

/* Logo Image Styling */
.pw-brand-logo {
  height: 40px;                   /* Constrains the logo height */
  width: auto;                    /* Keeps original proportions intact */
  object-fit: contain;
}


/* Brand Wording Typography */
.pw-brand-name {
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  max-width: none;
}

/* Mobile: Force wrap */
@media (max-width: 576px) {
  .pw-brand-name {
    max-width: 180px;         /* Limits width to trigger the wrap */
    white-space: normal;      /* Allows normal text wrapping */
    word-break: break-word;   /* Breaks long words if they lack spaces */
  }
}

.page-wrapper {
  width: 100%;             /* Spans full width on mobile screens */
  max-width: 1100px;       /* Locks the width at 1200px on computer screens */
  margin-left: auto;       /* Centers the container horizontally */
  margin-right: auto;      /* Centers the container horizontally */
  padding-inline: 10px;    /* Optional: Adds safe padding so text doesn't touch mobile screen edges */
  box-sizing: border-box;  /* Ensures padding is included within the total width calculation */
}
.list-container {
  /* Controls the total width of the block */
  max-width: 700px; 
  
  /* Centers the block on the page */
  margin: 0 auto 30px auto;
}

.custom-list {
  /* Removes default browser padding/margin */
  padding: 0;
  margin: 0;
  list-style: none;

  /* Sets up the Flexbox for equal spacing */
  display: flex;
  flex-direction: column;
  gap: 20px; /* Sets equal margins/space between each <li> */
}

.custom-list li {
  /* Optional: Styles for the items themselves */
  background-color: var(--welcome-list);
  padding: 15px;
  border-radius: 5px;
}


/* Navbar Base Styles */
.pw-navbar {
  background-color: var(--cct-std-green);
  color: #ffffff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.pw-nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px 0 15px;
}

.pw-logo {
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
}

/* Navigation Lists */
.pw-nav-menu {
  display: flex;
  list-style: none;
  align-items: center;
}

.pw-nav-menu li {
  position: relative;
}

.pw-nav-item {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  font-size: 16px;
  transition: color 0.3s ease;
}

/* Active and Hover States */
.pw-nav-item:hover,
.pw-nav-item.active,
.pw-dropdown:hover .pw-dropdown-toggle,
.pw-dropdown:focus-within .pw-dropdown-toggle {
  color: var(--active-hover); /* Highlights active top item or highlighted parent */
  background-color: var(--active-background);
}

/* Dropdown Engine (Desktop) */
.pw-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #2c2c35;
  list-style: none;
  min-width: 180px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.pw-dropdown-item {
  color: #ffffff;
  padding: 12px 20px;
  display: block;
  text-decoration: none;
  font-size: 15px;
}

.pw-dropdown-item:hover {
  background-color: var(--active-background);
  color: #ffffff;
}

/* Active styling inside the dropdown menu */
.pw-dropdown-item.active {
  background-color: #2980b9;
  color: #ffffff;
}

/* Display Dropdown on Hover */
.pw-dropdown:hover .pw-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.arrow {
  font-size: 15px;
  margin-left: 5px;
}

/* Hide Mobile Toggle Elements by Default */
.menu-checkbox,
.hamburger {
  display: none;
}
/* 1. Center the image inside its container */
.image-container {
  display: flex;
  justify-content: center; /* Horizontally centers the image */
  align-items: center;     /* Vertically centers (if container has a height) */
  width: 100%;
}

/* 2. Make the image responsive */
.image-container img {
  max-width: 100%;         /* Prevents the image from exceeding container width */
  height: auto;            /* Maintains the original aspect ratio */
  display: block;          /* Removes default bottom inline spacing gap */
}
.banner-text {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  text-align: center;      /* Centers multi-line text blocks */
  min-height: 50px;       /* Gives the container responsive breathing room */
  margin: 10px auto 10px auto;
}
.welcome-text {
  display: flex;
  /*justify-content: center;*/ /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  text-align: center;      /* Centers multi-line text blocks */
  min-height: 50px;       /* Gives the container responsive breathing room */
}

/* ==========================================================================
   Responsive Mobile Styles (Screens smaller than 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    cursor: pointer;
  }

  .bar {
    height: 3px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  /* Transforms Menu Items into Vertical Drawer */
  .pw-nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #1e1e24;
    flex-direction: column;
    align-items: stretch;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
  }

  .pw-nav-item {
    padding: 15px 25px;
    border-bottom: 1px solid #2c2c35;
  }

  /* Checkbox Hack Magic: Expand menu drawer when hamburger is clicked */
  .menu-checkbox:checked ~ .pw-nav-menu {
    max-height: 500px; /* Adjust to comfortably clear content */
  }

  /* Hamburger to 'X' Animation */
  .menu-checkbox:checked ~ .hamburger .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .menu-checkbox:checked ~ .hamburger .bar:nth-child(2) {
    opacity: 0;
  }
  .menu-checkbox:checked ~ .hamburger .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Accordion Dropdown Setup for Mobile Devices */
  .pw-dropdown-menu {
    position: relative;
    top: 0;
    background-color: #151519;
    box-shadow: none;
    max-height: 0;
    transform: none;
  }

  /* Expand dropdown in mobile drawer layout */
  .pw-dropdown:hover .pw-dropdown-menu,
  .pw-dropdown:focus-within .pw-dropdown-menu {
    max-height: 200px;
    opacity: 1;
    visibility: visible;
  }

  .pw-dropdown-item {
    padding: 12px 40px;
  }
  .card-img-top {
    transition: transform 0.3s ease-in-out;
  }
  .card:hover .card-img-top {
    transform: scale(1.05); /* Smoothly zooms into the image slightly */
  }
  .card {
    overflow: hidden; /* Keeps the scaling image safely bounded inside the card */
  }
}