/* ==========================
   Design Tokens
   ========================== */
:root {
  --primary-aqua: #4BC0B2;
  --brand-navy: #333F96;
  --white: #ffffff;
  --light-gray: #f8fafc;
  --text-dark: #0a0f1a;
  --text-light: #ffffff;
  --muted: #4b5563;
  --radius: 5px;
  --mobile-width: 1024px; /* mobile/tablet container width */
  --desktop-bg: #f1f5f9; /* A soft light gray for the outside area */
  --site-bg: #ffffff;    /* Your actual site background */

  /* HRDC overlay defaults (can override per slide) */
  --overlay-text-color: #fff;
  --overlay-left: clamp(16px, 3vw, 28px);
  --overlay-top: 50%;
  --overlay-offset-y: 0px;
  --overlay-align: left;

  /* Overlay shape slope (right edge): smaller top-right X and larger bottom-right X = steeper slope */
  --shape-top-right-x: 45%;
  --shape-bottom-right-x: 80%;
}

/* Dim the slide image for better text contrast */
.hrdc-courses .slide-img{
  filter: brightness(var(--img-brightness, 0.5)) contrast(var(--img-contrast, 1.05));
  transition: filter .2s ease-in-out;
}


/* ==========================
   Base / Reset
   ========================== */
*,*::before,*::after{box-sizing:border-box}
html,body
{height:100%;
  margin:0;
}

body{
  margin: 0;
  padding: 0;
  font-family:system-ui,-apple-system,Arial, sans-serif;
  color:var(--text-dark);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  background-color: var(--desktop-bg); /* The color "outside" the phone */

  /* sticky footer base */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-shell {
  width: 100%;
  //max-width: var(--mobile-width); /* Forces the mobile size */
  background-color: var(--white); /* The actual site background */
  
  /* Creates a subtle shadow to make it look like a floating app */
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  
  /* Ensures the footer stays at the bottom of the "phone" */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  
  /* Prevents content from touching the very edges of the "screen" */
  position: relative;
  overflow-x: hidden;
}

/* Ensure images and map stay inside the mobile container */
img, iframe {
  max-width: 100%;
}

main{ flex: 1; }

img{
  border-radius: var(--radius);
  display:block;
  max-width:100%;
  height:auto
}
a{
  color:inherit;
  text-decoration:none
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0
}

/* Container */
.wrap{
  width:min(100%, var(--maxw));
  margin-inline:auto;
  padding:clamp(10px,3vw,16px);
  box-sizing:border-box;
}

/* ==========================
   1) Header
   ========================== */
header{
  background:var(--white);
  // border-bottom:1px solid #e5e7eb;
  padding-block: 0.5rem;
}
.header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 1.25rem;
}
.logo { 
  width: 200px; 
  height: auto;
}

.waterForAll{
  display:block;
  width: 180px;
  height:auto;
  opacity: 0.9;
}

/* ==========================
   2) Hero Section
   ========================== */
.hero{
  background:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block: clamp(0, 0, 0);
}
.hero .wrap{ text-align:center; }
.hero h1{
  color:var(--brand-navy);
  font-size:20px;
  line-height:1.05;
  margin-bottom:12px;
  margin-top:0;
}
.hero p{
  font-size:15px;
  max-width: fit-content;
  margin-inline:auto;
  margin-bottom:0;
}

.deadline-badge {
  display: inline-block;
  background-color: #fff2f2; /* Light red/warm background */
  color: #d32f2f;            /* High-contrast red for urgency */
  border: 1px solid #ffcdd2;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* ==========================
   3) Main Content
   ========================== */
.content{
  background:var(--light-gray);
  //color:var(--text-light);

  /* This increases the top and bottom of the blue area */
  padding-block: 1.5rem; 
  
  /* Ensuring the section takes up space if content is thin */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.content h2{
  margin:0 0 12px;
  font-size:clamp(18px,4vw,24px)
}

.content .wrap > div {
  text-align: center;
}

/* Responsive grid (mobile & tablet) */
.grid{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}

/* Card styles */
.card{
  max-width:340px;
  width:100%;
  margin:0 auto;
  background:var(--white);
  color:var(--text-dark);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0 0 12px;color:#4b5563}
.btn{
  background:var(--primary-aqua);
  color:#fff;
  padding:10px 14px;
  border-radius:6px;
  font-weight:600;
  text-align:center;
}
.btn:focus-visible{outline:2px solid #111827;outline-offset:2px}

/* Card row for icon and text */
.card-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin-bottom:12px;
}

/* Responsive icon sizes */
.icon{ width:60px; height:auto; flex-shrink:0; }

/* ==========================
   4) Footer
   ========================== */
footer{
  background:var(--brand-navy);
  color:var(--white);
  padding-block: 1.5rem; /* Gives the footer "appropriate height" */
  margin-top: auto;  
  width: 100%;
}

.footer-inner {
  text-align: center;
}

.footer-inner p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color:var(--white);
}

.map-container {
  margin: 1rem auto;
  max-width: 960px;
  border-radius: var(--radius);
  overflow: hidden;
}


/* ==========================
   Survey List
   ========================== */

#survey-btn {
  display: flex;
  width: fit-content;    /* Forces width to match the content */
  margin-inline: auto;   /* Centers the button horizontally */
  color: #fff;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
  //box-shadow: 0 4px 15px rgba(75, 192, 178, 0.3);

  /* Apply Animation */
  animation: pulse-attention 2s infinite ease-in-out;
  transition: transform 0.2s, background-color 0.2s;
}

/* Hover state: Pause animation and scale slightly */
#survey-btn:hover {
  animation-play-state: paused;
  transform: scale(1.02);
  background-color: #3aa89b; /* Slightly darker teal */
}

/* The Animation Logic */
@keyframes pulse-attention {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(75, 192, 178, 0.3);
  }
  50% {
    transform: scale(1.03); /* Grows slightly */
    box-shadow: 0 4px 15px rgba(75, 192, 178, 0.5); /* Shadow expands */
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(75, 192, 178, 0.3);
  }
}

.survey-points {
  list-style: none; /* Removes bullets */
  padding: 0;
  margin: 2rem auto;
  max-width: 400px;
  text-align: left;
}

.survey-points li {
  color: var(--brand-navy);
  margin-bottom: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.survey-points li::before {
  content: "✔";
  color: var(--primary-aqua); /* Aqua as a vibrant accent */
  font-weight: bold;
}

/* ==========================
   Interactive Banner
   ========================== */
.clickable-banner {
  cursor: pointer;
  transition: opacity 0.3s ease;
  width: 100%;
  display: block;
}

.clickable-banner:hover {
  opacity: 0.9;
}

/* ==========================
   Lightbox Modal
   ========================== */
.modal {
  position: fixed;
  inset: 0;
  display: none; /* Hidden by default */
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.active { display: flex; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

.modal-body {
  position: relative;
  z-index: 1001;
  max-width: 90%;
  text-align: center;
}

#full-img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.modal-footer {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.dl-button {
  background: var(--primary);
  color: white;
  padding: 12px 24px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
}

.close-text {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  text-decoration: underline;
}

/* ==========================
   Payment Page Specifics
   ========================== */

/* Urgent Reference Notice */
.ref-notice {
  background-color: #fffbeb; /* Soft yellow for attention without 'Red' stress */
  border-left: 4px solid #f59e0b;
  padding: 1rem;
  margin-top: 1.5rem;
  border-radius: 8px;
  color: var(--brand-navy);
  font-size: 15px;
}

/* Payment Card Grid */
.payment-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column for mobile */
  gap: 1.5rem;
}

.payment-card {
  background: var(--white);
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid #e2e8f0;
  position: relative;
  transition: transform 0.2s;
}

.method-num {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-aqua);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.payment-card h3 {
  margin: 0 0 0.5rem;
  font-size: 18px;
  color: var(--brand-navy);
}

.payment-card p {
  margin: 0;
  font-size: 14px;
  color: #64748b;
}

/* Contact Section */
.contact-box {
  margin-top: 4rem;
  background: var(--brand-navy);
  color: white;
  padding: 2rem;
  border-radius: var(--radius);
  text-align: center;
}

.contact-box h2 { margin-top: 0; font-size: 22px; }

.contact-flex {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.contact-item strong { display: block; color: var(--primary-aqua); margin-bottom: 4px; }
.contact-item a { 
  display: block; 
  font-size: 18px; 
  font-weight: 700; 
  margin-top: 4px;
  color: white; 
}

.address { font-size: 12px; opacity: 0.7; margin-top: 2rem; }

/* ==========================
   Contact Page Layout
   ========================== */

.section-title {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--brand-navy);
  //margin: 2rem 0 2rem;
  font-size: 24px;

  padding-top: 10px;     /* This forces the gap above the text */
  padding-bottom: 5px;  /* Space below the text */
  margin: 0;
}

/* Head Office Styling */
.head-office-card {
  background: var(--white);
  padding: 2.5rem;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(51, 63, 150, 0.08);
  border: 1px solid #eef2f6;
  max-width: 340px;
  margin: 0 auto;
}

.office-type {
  color: var(--primary-aqua);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.head-office-card h2 {
  color: var(--brand-navy);
  margin-top: 0;
  font-size: 22px;
}

.contact-row {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact-label {
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

.phone-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phone-group a, address {
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-navy);
  text-decoration: none;
}

/* Regional Grid */
.regional-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.region-card {
  background: var(--white);
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid #eef2f6;
  text-align: center;
  transition: border-color 0.2s;
}

.region-card:hover {
  border-color: var(--primary-aqua);
}

.region-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--brand-navy);
}

.region-tel {
  color: var(--primary-aqua);
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
}

/* ==========================
   HRDC: Courses slider (tunable)
   ========================== */

.hrdc-courses .wrap > h2 {
   color:var(--brand-navy);
   text-align: center;
}
.hrdc-courses .carousel {
  position: relative;
  isolation: isolate;
}
.hrdc-courses .carousel-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #00000012;
  touch-action: pan-y;
}
.hrdc-courses .slide {
  position: relative;
  display: none;
}
.hrdc-courses .slide.is-active { display: block; }

.slide-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Overlay container */
.slide-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Faded left overlay with slanted right edge (bottom-right extends further right) */
.overlay-shape {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: min(70%, 540px);
  height: clamp(180px, 40vh, 360px);
  clip-path: polygon(
    0% 0%,
    var(--shape-top-right-x) 0%,
    var(--shape-bottom-right-x) 100%,
    0% 100%
  );
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--brand-navy) 85%, transparent),
    color-mix(in oklab, var(--brand-navy) 55%, transparent)
  );
  opacity: .92;
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* Text block sitting on top of the shape */
.overlay-text {
  position: absolute;
  top: var(--overlay-top);
  left: var(--overlay-left);
  transform: translateY(calc(-50% + var(--overlay-offset-y)));
  max-width: min(56ch, 520px);
  color: var(--overlay-text-color);
  padding-right: 1rem;
  text-align: var(--overlay-align);
}
.overlay-text h3 { margin: 0 0 .4rem; font-size: clamp(20px, 3.2vw, 32px); }
.overlay-text p  { margin: 0; color: color-mix(in oklab, var(--overlay-text-color) 80%, #dfe6ff); font-size: 13px;}

/* HRDC controls — smaller & more faded, scoped */
.hrdc-courses .carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.22);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: .45;
  transition: opacity .15s ease, background .15s ease, transform .15s ease;
}
.hrdc-courses .carousel-nav.prev { left: 10px; }
.hrdc-courses .carousel-nav.next { right: 10px; }
.hrdc-courses .carousel-nav:hover { opacity: .85; background: rgba(0,0,0,.38); }
.hrdc-courses .carousel-nav:focus-visible { opacity: .95; outline: 2px solid #fff; outline-offset: 2px; }

.hrdc-courses .carousel-dots {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 6px 0;
}
.hrdc-courses .carousel-dots button {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 0;
  background-color:var(--brand-navy);
  cursor: pointer;
  transition: background .15s ease;
}
.hrdc-courses .carousel-dots button.is-active { background-color:var(--primary-aqua); }

/* ===== Modal (shared) ===== */
.modal { position: fixed; inset: 0; display: none; }
.modal.is-open { display: block; }
.modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.modal-panel{
  position: relative;
  z-index: 1;
  width: min(92vw, 560px);
  margin: 8vh auto 0 auto;
  background: var(--white);
  color: var(--text-dark);
  border-radius: calc(var(--radius) * 1.2);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: clamp(16px, 3.5vw, 24px);
}
.modal-close{
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid #e5e7eb; background: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.modal-close:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }

.modal-panel h3{
  margin: 0 0 4px;
  font-size: clamp(18px, 3.2vw, 24px);
}
.modal-sub{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
}

/* Phone list */
.phone-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.phone-list li{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #fafafa;
}
.phone-list .office{ font-weight: 600; }
.phone-list .tel{
  display: inline-block;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--brand-navy);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.phone-list .tel:focus-visible{ outline: 2px solid #111827; outline-offset: 2px; }

/* Prevent page behind the modal from scrolling when open */
body.modal-open { overflow: hidden; }


/* Mobile: ensure overlay stays readable but not too wide */
@media (max-width: 639px){
  .overlay-shape { width: 86%; height: clamp(160px, 36vh, 300px); }
}