/* ====== base ====== */
* { box-sizing: border-box; }
body {
  color: #fff;
}

/* ===== Contact Us Section ===== */
.contact-section{
  position: relative;
  height: auto !important;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
}

/* Background image: desktop shows 13_a.png, small screen shows 13_asmall.png */
.contact-section .bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  z-index:0;
}
.contact-bg-mobile{ display:none; }

.contact-overlay{
  position:relative;
  z-index:1;
  width: min(1100px, 92vw);
  margin: 0 auto;
  padding: clamp(40px, 6vh, 70px) 0 clamp(60px, 8vh, 90px);
}

.contact-head{
  display: flex;
  justify-content: space-between;
  align-items: center; /* Center vertically */
  gap: 20px;
  text-align: left;
  margin-bottom: clamp(12px, 2vh, 18px);
}

.contact-head-left {
  flex: 1;
}

.contact-head h1{
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 500;
  letter-spacing: .5px;
  margin:0;
}

.contact-head p{
  opacity:.9;
  font-size: clamp(14px, 1.6vw, 18px);
  margin:0;
}

/* Email button in header (right side) */
.contact-head .email-enquiry-btn {
  flex-shrink: 0;
}

/* hero text */
.contact-hero h1 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 500;
  margin: 0 0 10px 0;
  letter-spacing: 0.5px;
}
.contact-hero p {
  margin: 0;
  font-size: clamp(14px, 1.6vw, 18px);
  opacity: 0.9;
  max-width: 780px;
  line-height: 1.6;
}

/* Form container */
.contact-form{
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: clamp(18px, 2.6vw, 28px);
  backdrop-filter: blur(2px);
  width: 100%;
}

/* Form intro text */
.form-intro {
  margin: 0 0 clamp(14px, 2vh, 20px) 0;
  font-size: clamp(13px, 1.4vw, 16px);
  opacity: 0.9;
  text-align: left;
  line-height: 1.5;
}

/* Grid: large screen 2-3 items per row, small screen 1 item per row */
.form-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px 16px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field label{
  font-size: 13px;
    letter-spacing: 0.3px;
  opacity:.9;
}

.field-full {
  grid-column: 1 / -1;
}


.field input,
.field select,
.field textarea{
  width:100%;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
  color:#ffffff;
  padding: 10px 12px;
  font-size: 14px;
  outline:none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea{ resize: vertical; min-height:120px; }

.field input::placeholder, textarea::placeholder {
  color: rgba(255,255,255,0.5);
}

/* Dropdown options style - light blue-grey theme, matching form style */
.field select {
  cursor: pointer;
  appearance: none; /* Remove default arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px; /* Leave space for arrow */
  font-family: "Zalando Sans Expanded", Arial, sans-serif; /* Match global font */
}

/* Shadow effect when dropdown is expanded */
.field select:focus {
  box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,0.15) !important;
}

/* Dropdown popup options - light blue-grey background */
.field select option {
  background-color: rgba(200, 215, 230, 0.95) !important; /* Light blue-grey background */
  color: #2c3e50 !important; /* Dark blue-grey text */
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: "Zalando Sans Expanded", Arial, sans-serif !important; /* Match global font */
  border: none !important;
  /* Note: border-radius is not supported on option elements by browsers */
}

/* Hover/selected state - slightly darker blue highlight */
.field select option:hover,
.field select option:focus,
.field select option:checked {
  background-color: rgba(124, 195, 255, 0.45) !important;
  color: #1a2634 !important; /* Darker text */
}

/* Disabled state */
.field select option:disabled {
  color: rgba(44, 62, 80, 0.4) !important;
  background-color: rgba(200, 215, 230, 0.5) !important;
}

/* Firefox-specific: dropdown popup style */
@-moz-document url-prefix() {
  .field select {
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 195, 255, 0.6) rgba(200, 215, 230, 0.3);
  }
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
  background: rgba(255,255,255,.1);
}

.field textarea-meta {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 12px;
  opacity: 0.7;
  pointer-events: none;
}

/* Required field error state */
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color: #ff6b6b;
  box-shadow: 0 0 0 2px rgba(255,107,107,.25);
}
.error-msg{
  display:none;
  color:#ff8c8c;
  font-size:12px;
  line-height:1.2;
}
.field.has-error .error-msg{ display:block; }

.field--full{ grid-column: 1 / -1; }

.form-actions{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap:12px;
}
.btn-submit{
  padding: 10px 22px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.12);
  color:#fff;
  font-size:15px;
  cursor:pointer;
  transition: background .2s, transform .05s;
}
.btn-submit:hover{ background: rgba(255,255,255,.2); }
.btn-submit:active{ transform: translateY(1px); }

.form-status{
  font-size: 13px;
  opacity:.9;
}

/* ====== office section ====== */
.office-section {
  margin-top: clamp(8px, 1vh, 14px);
  padding-bottom: clamp(20px, 3vh, 40px);
}

/* ===== Offices (override) ===== */
.office-wrap{
  margin-top: clamp(16px, 2vh, 24px);
  width: 100%;
}

/* Use grid, wide screen fixed 5 columns */
.office-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 16px);
  max-width: 1300px;   /* Wider than form area to avoid "feeling" limited */
  margin: 0 auto;
  align-items: start;
}

.office-card{
  text-align:center;
  color:#fff;
  min-width: 0;
  position: relative;
}

/* Clickable card link wrapper */
.office-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.office-card-link:hover {
  transform: translateY(-3px);
}

.office-card-link:hover .office-icon {
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* Adelaide card (no link) should not have hover effects */
.office-card:not(:has(.office-card-link)) {
  cursor: default;
}

/* Transparent image soft background container */
.office-icon{
  background: rgba(255,255,255,0.6);
  border-radius: 12px;
  padding: 8px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
  margin-bottom: 6px;
  transition: box-shadow 0.3s ease;
}

/* Image scales proportionally within container */
.office-icon img{
  width: 100%;
  height: auto;
  max-width: 140px;  /* Control image not to be too large */
  display:block;
}

/* Text style maintains original image feel */
.office-title{
  font-size: clamp(13px, 1vw, 14px);
  font-weight: 500;
  margin-bottom: 2px;
}
.office-addr{
  font-size: clamp(11px, 0.9vw, 13px);
  opacity:.95;
  line-height:1.25;
}

/* Hover effect on entire card for clickable addresses */
.office-card-link:hover .office-title,
.office-card-link:hover .office-addr {
  opacity: 1;
  text-shadow:
    0 0 3px rgba(0,0,0,0.9),
    0 0 5px rgba(255,255,255,0.3),
    1px 1px 3px rgba(0,0,0,0.5);
}

/* ==== Responsive ==== */
@media (max-width: 1100px){
  .office-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 980px;
  }
}

@media (max-width: 760px){
  .office-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Small screen 2 columns */
    max-width: 92vw;
  }
  .office-icon img{ max-width: 160px; }
}

@media (max-width: 480px){
  .office-grid{
    grid-template-columns: 1fr;         /* Smaller screen 1 column */
    max-width: 280px;                   /* Limit single column width */
    margin: 0 auto;                     /* Center display */
  }
  .office-icon img{ max-width: 200px; }
}


/* ====== responsive ====== */
/* ===== Breakpoints ===== */
@media (max-width: 1024px){
  .form-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .contact-bg-desktop{ display:none; }
  .contact-bg-mobile{ display:block; }

  .contact-overlay{
    width: 92vw;
    padding-top: clamp(56px, 8vh, 80px);
    padding-left: 0;
    padding-right: 0;
  }

  /* Keep email button on same line, vertically centered with "Contact Us" text */
  /* Align with form's outer borders (not inner content) */
  .contact-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* Center vertically */
    gap: 10px;
    width: 100%; /* Full width like the form */
    margin-left: 0;
    margin-right: 0;
  }

  .contact-head-left {
    flex: 1; /* Allow to grow */
  }

  .contact-head h1 {
    font-size: clamp(28px, 7vw, 44px); /* Slightly smaller on very small screens */
  }

  .contact-head .email-enquiry-btn {
    flex-shrink: 0;
    padding: 10px; /* More compact padding for icon-only button */
    min-width: auto;
  }

  /* Show icon only on mobile */
  .email-enquiry-btn .email-icon {
    display: block !important;
    width: 18px;
    height: 18px;
  }

  /* Hide text on mobile */
  .email-enquiry-btn .email-text {
    display: none !important;
  }

  .form-grid{ grid-template-columns: 1fr; }
  .btn-submit{ width: 100%; }

  .office-card{
    width: min(46vw, 200px); /* Small screen 1-2 per row */
  }
}

/* Address text soft stroke */
.office-addr,
.office-title {
    text-shadow:
        0 0 2px rgba(0,0,0,0.85),
        0 0 3px rgba(0,0,0,0.6),
        1px 1px 2px rgba(0,0,0,0.4);
}


/* ===== HARD FIX: Contact section must grow with content (desktop too) ===== */
#contact.contact-section.pdf-section{
  aspect-ratio: auto !important;   /* Remove PDF page aspect ratio lock */
  height: auto !important;         /* Remove 100vh/fixed height */
  min-height: 100vh;               /* At least one screen, but allow taller */
  overflow: visible !important;    /* Don't cut off office cards below */
  position: relative;
}

/* Overlay must also be able to expand with content */
#contact .contact-overlay{
  height: auto !important;
  min-height: 100%;
  padding-bottom: clamp(180px, 20vh, 280px);
  /* Reserve safe area for footer (prevent footer from covering last row of office cards and work time card) */
}

/* Background image continues to fill "current section height" */
#contact .contact-bg-desktop,
#contact .contact-bg-mobile{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Contact Info Section (Office Hours Only) ===== */
.contact-info-section {
  margin-top: clamp(24px, 3vh, 36px);
  margin-bottom: 0; /* No bottom margin needed - padding-bottom on overlay handles footer spacing */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Left align */
  gap: clamp(16px, 2vh, 24px);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Email enquiry button */
.email-enquiry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: clamp(8px, 1vh, 11px) clamp(20px, 2.5vw, 28px);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: clamp(12px, 1.2vw, 14px); /* Smaller font size */
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.email-enquiry-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.email-enquiry-btn:active {
  transform: translateY(0);
}

/* Email icon - hidden on desktop */
.email-enquiry-btn .email-icon {
  display: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Email text - shown on desktop */
.email-enquiry-btn .email-text {
  display: inline;
}

/* Office hours container */
.office-hours {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 14px);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: clamp(10px, 1.5vh, 14px) clamp(16px, 2vw, 22px);
  backdrop-filter: blur(3px);
}

/* Clock icon */
.office-hours-icon {
  flex-shrink: 0;
}

.office-hours-icon svg {
  width: clamp(24px, 2.8vw, 32px); /* Slightly larger icon */
  height: clamp(24px, 2.8vw, 32px);
  color: #ADD8E6; /* Light blue color to match text */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Office hours text */
.office-hours-text {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vh, 6px);
}

.office-hours-text div {
  font-size: clamp(14px, 1.5vw, 18px); /* Larger font size for desktop */
  line-height: 1.5;
  color: #ADD8E6; /* Light blue color */
  font-weight: 500;
  /* Apply same text-shadow as site address cards */
  text-shadow:
    0 0 2px rgba(0,0,0,0.85),
    0 0 3px rgba(0,0,0,0.6),
    1px 1px 2px rgba(0,0,0,0.4);
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .contact-info-section {
    margin-top: clamp(18px, 2.5vh, 28px);
    margin-bottom: 0; /* No bottom margin needed - overlay padding handles it */
    gap: clamp(14px, 1.8vh, 20px);
    align-items: flex-start; /* Keep left aligned on mobile */
  }

  .office-hours {
    flex-direction: row; /* Keep horizontal on mobile */
    text-align: left;
    gap: clamp(10px, 1.2vw, 14px);
  }

  /* Larger text for mobile */
  .office-hours-text div {
    font-size: clamp(13px, 3.5vw, 16px);
    color: #ADD8E6; /* Light blue color - same as desktop */
  }

  /* Larger icon for mobile */
  .office-hours-icon svg {
    width: clamp(26px, 6vw, 32px);
    height: clamp(26px, 6vw, 32px);
  }
}