/*
Theme Name:   Hello Elementor Child — Dr Steer Oncology
Theme URI:    https://drsteeroncology.com.au
Description:  Child theme for Dr Steer Oncology website. Parent: Hello Elementor.
              Brand colours, typography, header and footer styles.
Author:       Dr Steer Oncology
Author URI:   https://drsteeroncology.com.au
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/* ============================================================
   BRAND COLOUR PALETTE — Dr Steer Oncology
   Primary Teal:  #0097B2  (from logo ribbon)
   Dark Teal:     #006E84  (hover / deep shade)
   Navy:          #1A3A5C  (headings, footer)
   Light Teal BG: #E6F6FA  (section backgrounds)
   Black:         #1A1A1A  (body text)
   White:         #FFFFFF
   ============================================================ */

:root {
  --ds-teal:        #0097B2;
  --ds-teal-dark:   #006E84;
  --ds-teal-light:  #E6F6FA;
  --ds-navy:        #1A3A5C;
  --ds-black:       #1A1A1A;
  --ds-white:       #FFFFFF;
  --ds-grey:        #F4F7FA;
  --ds-text-muted:  #5A7A96;
  --ds-divider:     #C8DCE8;
  /* Typography */
  --ds-font-heading: 'Montserrat', sans-serif;
  --ds-font-body:    'Open Sans', sans-serif;
}

/* ============================================================
   BASE RESET & TYPOGRAPHY
   ============================================================ */

body {
  font-family: var(--ds-font-body);
  font-size: 16px;
  color: var(--ds-black);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ds-font-heading);
  font-weight: 700;
  color: var(--ds-navy);
  line-height: 1.2;
}

a {
  color: var(--ds-teal);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--ds-teal-dark);
  text-decoration: none;
}

/* ============================================================
   TOP BAR (above header)
   ============================================================ */

.ds-topbar {
  background: var(--ds-teal);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  padding: 8px 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  font-family: var(--ds-font-body);
}
.ds-topbar a { color: rgba(255,255,255,0.85); }
.ds-topbar a:hover { color: #fff; }
.ds-topbar .emergency {
  color: #f87171;
  font-weight: 700;
}

/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header,
.elementor-location-header {
  background: var(--ds-white) !important;
  /* border-bottom: 1px solid var(--ds-divider);*/
  box-shadow: 0 2px 8px rgba(0, 151, 178, 0.08);
  /* padding: 12px 30px !important; */
}

/* Logo sizing */
.site-header .site-logo img,
.elementor-location-header img.attachment-full {
  max-height: 72px;
  width: auto;
}

/* ============================================================
   PRIMARY NAVIGATION
   ============================================================ */

.main-nav,
.elementor-nav-menu {
  background: var(--ds-teal) !important;
}

/* Ensure that the background in the footer menu is transparent */
footer .main-nav,
footer .elementor-nav-menu {
  background: transparent !important;
}

/* Nav links */
.main-nav a,
.elementor-nav-menu--main .elementor-item {
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: var(--ds-font-heading);
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 20px !important;
  border-bottom: 5px solid transparent !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.main-nav a:hover,
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  background: rgba(255,255,255,0.12) !important;
  /* border-bottom-color: var(--ds-navy) !important; */
  color: #fff !important;
}

.main-nav a:hover,
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  /* border-bottom-color: #C9A227 !important; */
  border-bottom-color: #000080 !important; /* Changed from Yellow to Navy Blue */
}

@media (max-width: 768px) {
    .elementor-nav-menu--main .elementor-item:hover,
    .elementor-nav-menu--main .elementor-item.elementor-item-active {
      border-bottom-color: transparent !important;
      background-color: transparent !important;
    }
}

.elementor-nav-menu--main .elementor-item:after{
  display: none;
}

.elementor-nav-menu .sub-menu a {
  color: rgba(255,255,255,0.85) !important;
  font-size: 13px !important;
}
.elementor-nav-menu .sub-menu a:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

/* Mobile hamburger */
.elementor-menu-toggle {
  color: #fff !important;
}

/* ============================================================
   HERO SECTIONS
   ============================================================ */

.ds-hero {
  background: linear-gradient(130deg, #006E84 0%, var(--ds-teal) 55%, #00BFD8 100%);
  min-height: 520px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Hero decorative element handled in Elementor template */
/* Hero logo panel (right side — use Image widget in Elementor, absolute positioned) */
.ds-hero-logo-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 44%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0,110,132,0.5) 0%, rgba(0,151,178,0.25) 100%);
}
.ds-hero-logo-panel img {
  width: 70%;
  max-width: 320px;
  height: auto;
  opacity: 0.9;
  border-radius: 14px;
  filter: drop-shadow(0 8px 28px rgba(0,0,0,0.22));
}


.ds-hero-label {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  font-family: var(--ds-font-heading);
  margin-bottom: 20px;
  font-weight: 600;
}

.ds-hero h1 {
  color: #fff !important;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.1;
  margin-bottom: 20px;
}

.ds-hero p,
.ds-hero .elementor-widget-text-editor p {
  color: rgba(255,255,255,0.85) !important;
  font-size: 18px;
  line-height: 1.7;
}

/* ============================================================
   ELEMENTOR GLOBAL OVERRIDES
   ============================================================ */

/* Section backgrounds */
.e-bg-teal        { background-color: var(--ds-teal) !important; }
.e-bg-navy        { background-color: var(--ds-navy) !important; }
.e-bg-teal-light  { background-color: var(--ds-teal-light) !important; }
.e-bg-grey        { background-color: var(--ds-grey) !important; }

/* Heading colours */
.e-text-teal   { color: var(--ds-teal) !important; }
.e-text-navy   { color: var(--ds-navy) !important; }
.e-text-white  { color: #fff !important; }
.e-text-muted  { color: var(--ds-text-muted) !important; }

/* ============================================================
   BUTTONS — Override Elementor defaults
   ============================================================ */

/* Primary button */
.elementor-button.ds-btn-primary,
.wp-block-button__link,
.ds-btn-primary {
  background: var(--ds-teal) !important;
  color: #fff !important;
  border: 2px solid var(--ds-teal) !important;
  border-radius: 6px !important;
  font-family: var(--ds-font-heading) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  padding: 14px 28px !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.elementor-button.ds-btn-primary:hover {
  background: var(--ds-teal-dark) !important;
  border-color: var(--ds-teal-dark) !important;
}

/* Outline button */
.elementor-button.ds-btn-outline {
  background: transparent !important;
  color: var(--ds-teal) !important;
  border: 2px solid var(--ds-teal) !important;
  border-radius: 6px !important;
  font-family: var(--ds-font-heading) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  padding: 14px 28px !important;
  transition: all 0.2s !important;
}
.elementor-button.ds-btn-outline:hover {
  background: var(--ds-teal) !important;
  color: #fff !important;
}

/* White button (on dark backgrounds) */
.elementor-button.ds-btn-white {
  background: #fff !important;
  color: var(--ds-navy) !important;
  border: 2px solid #fff !important;
  border-radius: 6px !important;
  font-family: var(--ds-font-heading) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  padding: 14px 28px !important;
  transition: background 0.2s !important;
}
.elementor-button.ds-btn-white:hover {
  background: var(--ds-teal-light) !important;
}

/* Outline white button (on teal/navy backgrounds) */
.elementor-button.ds-btn-outline-white {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
  border-radius: 6px !important;
  font-family: var(--ds-font-heading) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  padding: 14px 28px !important;
  transition: all 0.2s !important;
}
.elementor-button.ds-btn-outline-white:hover {
  border-color: #fff !important;
  background: rgba(255,255,255,0.12) !important;
}

/* ============================================================
   CARDS & ICON BOXES
   ============================================================ */

.elementor-widget-icon-box .elementor-icon-box-icon i,
.elementor-widget-icon-box .elementor-icon-box-icon svg {
  color: var(--ds-teal) !important;
}

/*
.elementor-widget-icon-box .elementor-icon-box-title {
  color: var(--ds-navy) !important;
  font-family: var(--ds-font-heading) !important;
}
*/

/* Card box shadow */
.ds-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,151,178,0.10);
  padding: 28px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ds-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,151,178,0.15);
}
.ds-card h3, .ds-card h4 {
  color: var(--ds-navy);
  font-family: var(--ds-font-heading);
  margin-bottom: 10px;
}
.ds-card p { color: var(--ds-text-muted); font-size: 15px; }

/* ============================================================
   STAT / NUMBER COUNTERS
   ============================================================ */

.elementor-widget-counter .elementor-counter-number-wrapper {
  color: var(--ds-teal) !important;
  font-family: var(--ds-font-heading) !important;
  font-size: 3rem !important;
  font-weight: 800 !important;
}
.elementor-widget-counter .elementor-counter-title {
  color: var(--ds-text-muted) !important;
  font-size: 14px !important;
}

/* ============================================================
   DIVIDER ACCENT
   ============================================================ */

.ds-divider-accent {
  height: 4px;
  background: linear-gradient(90deg, var(--ds-teal), #00BFD8, transparent);
  border: none;
}

/* ============================================================
   TILE BUTTONS (patient information grid)
   ============================================================ */

.ds-tile {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  font-family: var(--ds-font-heading);
}
.ds-tile:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-2px);
  color: #fff;
}
.ds-tile .tile-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 8px;
}
.ds-tile .tile-icon { font-size: 1.8rem; }

/* ============================================================
   HIGHLIGHT BOX
   ============================================================ */

.ds-highlight {
  background: var(--ds-teal-light);
  border-left: 4px solid var(--ds-teal);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
}
.ds-highlight p { margin: 0; font-size: 15px; }

/* ============================================================
   PUBLICATION LIST ITEM
   ============================================================ */

.ds-pub-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--ds-divider);
}
.ds-pub-year {
  display: inline-block;
  background: var(--ds-teal-light);
  color: var(--ds-teal);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  font-family: var(--ds-font-heading);
  margin-bottom: 6px;
}
.ds-pub-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ds-navy);
  margin-bottom: 4px;
}
.ds-pub-journal { font-size: 13px; color: var(--ds-text-muted); }

/* ============================================================
   MEMBERSHIP / ORG BADGES
   ============================================================ */

.ds-org-badge {
  background: var(--ds-grey);
  border: 1px solid var(--ds-divider);
  border-radius: 6px;
  padding: 10px 22px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ds-navy);
  letter-spacing: 0.06em;
  font-family: var(--ds-font-heading);
  text-transform: uppercase;
  display: inline-block;
}

/* ============================================================
   SIDEBAR NAVIGATION (About page)
   ============================================================ */

.ds-sidebar-nav { list-style: none; padding: 0; margin: 0; }
.ds-sidebar-nav li { border-bottom: 1px solid var(--ds-divider); }
.ds-sidebar-nav a {
  display: block;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ds-text-muted);
  border-left: 3px solid transparent;
  transition: all 0.15s;
  font-family: var(--ds-font-heading);
  font-weight: 600;
}
.ds-sidebar-nav a:hover,
.ds-sidebar-nav a.active {
  color: var(--ds-teal);
  border-left-color: var(--ds-teal);
  background: var(--ds-teal-light);
  padding-left: 20px;
}

/* ============================================================
   CONTACT FORM STYLING
   ============================================================ */

.wpcf7-form-control,
.elementor-field-group input,
.elementor-field-group select,
.elementor-field-group textarea {
  border: 1px solid var(--ds-divider) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  font-family: var(--ds-font-body) !important;
  font-size: 15px !important;
  background: var(--ds-grey) !important;
  transition: border-color 0.2s !important;
}
.wpcf7-form-control:focus,
.elementor-field-group input:focus,
.elementor-field-group select:focus,
.elementor-field-group textarea:focus {
  border-color: var(--ds-teal) !important;
  outline: none !important;
  background: #fff !important;
}
.wpcf7-submit,
.elementor-button.elementor-size-md {
  background: var(--ds-teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--ds-font-heading) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.wpcf7-submit:hover,
.elementor-button.elementor-size-md:hover {
  background: var(--ds-teal-dark) !important;
}

/* ============================================================
   EMERGENCY BANNER
   ============================================================ */

.ds-emergency {
  background: #B91C1C;
  color: #fff;
  text-align: center;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--ds-font-heading);
  letter-spacing: 0.04em;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer,
.elementor-location-footer {
/*  background: var(--ds-navy) !important; */
  background: #000080;
  color: rgba(255,255,255,0.8) !important;
}

.site-footer h3,
.site-footer h4,
.elementor-location-footer h3,
.elementor-location-footer h4 {
  color: #fff !important;
  font-family: var(--ds-font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}

.site-footer a,
.elementor-location-footer a {
  color: rgba(255,255,255,0.7) !important;
  font-size: 14px !important;
  transition: color 0.2s !important;
}
.site-footer a:hover,
.elementor-location-footer a:hover { color: #fff !important; }

.footer-bottom-bar {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* Tagline in footer */
.ds-footer-tagline {
  font-style: italic;
  color: var(--ds-teal) !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .ds-hero { min-height: 380px; }
  .ds-hero h1 { font-size: 1.8rem; }
  .ds-topbar { justify-content: center; flex-direction: column; gap: 6px; text-align: center; }

  .elementor .mobile-menu-list-icons-wrap {
    align-content: center !important;
  }
  
  .mobile-menu-list-icons-wrap .elementor-widget.elementor-mobile-align-end .elementor-icon-list-item a {
    justify-content: center;
  }  
  
}