/* Fonts: include 300, 500, and 700 for headings */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,500,700');

/* Adjust this to your actual header height */
:root { --header-height: 215px; }

html {
  font: normal 18px / 31px 'Open Sans', sans-serif;
  font-weight: 300;
  background-color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
}

.blue-bg-white-text {
    color: #FFFFFF;
    background-color: #207fb3;
}
.blue-text {
    color: #207fb3;
}

.uk-button-rp-dark-blue {
  background-color: #044d9c;
  color: #fff;
  border: 1px solid transparent;
}

.uk-button-rp-dark-blue:hover {
    background-color: #0564CB;
    color: #fff;
}

.uk-button-rp-dark-blue:active,
.uk-button-rp-dark-blue.uk-active {
  background-color: #044d9c;
  color: #fff;
}

.uk-button-rp-light-blue {
  background-color: #47a2e9;
  color: #fff;
  border: 1px solid transparent;
}

.uk-button-rp-light-blue:hover {
    background-color: #84C0F0;
    color: #fff;
}

.uk-button-rp-light-blue:active,
.uk-button-rp-light-blue.uk-active {
  background-color: #47a2e9;
  color: #fff;
}

#page-header {
  background-color: #08176a;
}

/* Logo: ~75px high, scales down responsively */
#page-logo img {
  height: clamp(56px, 7vw, 75px);
  width: auto;
  display: block;
}

/* Title stack */
.site-title h1,
.site-title h2 {
  margin: 0;
  line-height: 1.1;
}

/* Main title: bold white */
.site-title h1 {
  font-size: clamp(1.25rem, 2.2vw + .5rem, 2rem);
  font-weight: 700;  /* strong bold */
  color: #ffffff;
}

/* Tagline: lighter off-white */
.site-title h2 {
  font-size: clamp(.95rem, 1.2vw + .4rem, 1.125rem);
  font-weight: 300;       /* lighter than h1 */
  letter-spacing: 0.5px;  /* subtle spacing to make it airy */
  color: #f0f0f0;
  margin-top: 0.25rem;    /* separation from h1 */
  line-height: 1.3;
}
.white-texture-bg {
    background-image: url(../jpg/white-textured-bg.jpg);
    background-repeat: repeat;
}

.light-paws-bg {
    background-image: url(../jpg/light-paws-background.jpg);
    background-repeat: no-repeat;
    background-position: center 0%;
    background-size: cover;
}


/* Optional: tighten gap between logo and titles on small screens */
@media (max-width: 640px) {
  #page-logo { gap: .5rem; }

  /* Keep tagline to two lines on small screens */
  .site-title h2 {
    font-size: 0.85rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Phone block */
.phone-block {
  text-align: left;   /* left-align */
  line-height: 1.2;
}

/* Label text */
.phone-block .phone-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 2px;
}

/* Phone number text */
.phone-block .phone-number a {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f0f0f0;
  text-decoration: none;   /* remove underline */
}

.phone-block .phone-number a:hover,
.phone-block .phone-number a:focus {
  color: #ffffff;          /* brighten slightly on hover/focus */
  text-decoration: underline; /* accessible cue on interaction */
}

#page-navigation {
  background-color: #ffffff;
}

/* Center the entire logo block as a unit below large breakpoint */
@media (max-width: 1199px) {
  #page-logo {
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Main nav look --- */
.site-main-nav .uk-navbar-nav > li > a {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: #2a2a2a;               /* default text */
  padding: 0 18px;              /* spacing between items */
}

/* Caret icon next to dropdown labels */
.site-main-nav .caret {
  font-size: 0.8em;
  margin-left: 6px;
  color: #b9b9b9;                /* subtle like your screenshot */
  transition: color .2s ease, transform .2s ease;
}

/* Hover / active color (top level) */
.site-main-nav .uk-navbar-nav > li > a:hover,
.site-main-nav .uk-navbar-nav > li.uk-active > a {
  color: #31b4fb;
}
.site-main-nav .uk-navbar-nav > li:hover .caret {
  color: #31b4fb;
  transform: translateY(1px);
}

/* Dropdown panel */
.site-main-nav .uk-navbar-dropdown {
  min-width: 240px;
  padding: 10px 0;
}

/* Dropdown links */
.site-main-nav .uk-navbar-dropdown-nav > li > a {
  font-weight: 600;
  text-transform: none;
  color: #2a2a2a;
  padding: 8px 18px;
}

/* Hover color inside dropdowns */
.site-main-nav .uk-navbar-dropdown-nav > li > a:hover {
  color: #31b4fb;
}

/* Optional: tighten caret and link spacing on very small screens */
@media (max-width: 640px) {
  .site-main-nav .uk-navbar-nav > li > a { padding: 0 12px; }
}

/* ===================== HERO ===================== */
/* Background image + sizing */
#page-hero {
  position: relative; /* overlay anchor */
  background-image: url('/media/jpg/page-hero.jpg');
  background-size: cover;
  background-position: center right;
  min-height: calc(100vh - var(--header-height)); /* fill remaining viewport */
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Soft blue overlay for contrast */
#page-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 23, 106, 0.65) 0%,
    rgba(8, 23, 106, 0.35) 40%,
    rgba(8, 23, 106, 0.15) 70%,
    rgba(8, 23, 106, 0.05) 100%
  );
  pointer-events: none;
}

/* Headline — slightly smaller desktop */
#page-hero .hero-headline {
  color: #fff;
  font-weight: 700;
  line-height: 1.05;
  margin: 6vh 0 2vh;
  max-width: 14ch;
  font-size: clamp(1.75rem, 4.8vw, 4.25rem);
}

/* Make the H1 block full-width and centered below large */
@media (max-width: 1199px) {
  #page-hero .hero-headline {
    width: 100%;
    max-width: none;        /* full width */
    margin-left: auto;
    margin-right: auto;
    text-align: center;     /* center the text on mobile/tablet */
  }
}

/* Subcopy */
#page-hero .hero-subcopy {
  color: #f0f0f0;
}
#page-hero .hero-subcopy p {
  margin: 6px 0;
  font-weight: 300;
}

/* CTA button */
#page-hero .hero-cta {
  margin-top: 18px;
  padding: 14px 28px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 2px solid #8fc2ff;
  color: #ffffff;
  background: transparent;
  text-transform: uppercase;
}
#page-hero .hero-cta:hover,
#page-hero .hero-cta:focus {
  background: #31b4fb;
  border-color: #31b4fb;
  color: #fff;
}

/* Mobile tweaks */
@media (max-width: 960px) {
  :root { --header-height: 125px; } /* adjust if header is taller on mobile */
  #page-hero { background-position: center; }
  /* Increased mobile H1 size */
  #page-hero .hero-headline {
    font-size: clamp(2rem, 9vw, 3.5rem);
    line-height: 1.08;
  }
}

/* Ultra-small phones: keep it large but prevent overflow */
@media (max-width: 480px) {
  #page-hero .hero-headline {
    font-size: clamp(1.9rem, 10.5vw, 3.1rem);
  }
}

/* ===================== MOBILE HEADER PHONE ICON ===================== */
.phone-icon-wrap {
  display: flex;
  align-items: center; /* aligns nicely within your uk-flex-middle row */
}

.phone-icon-link {
  display: inline-flex;
  width: 35px;               /* tap target */
  height: 35px;
  align-items: center;
  justify-content: center;
  text-decoration: none;     /* never underline */
}

/* Ensure no underline on hover/focus */
.phone-icon-link:hover,
.phone-icon-link:focus {
  text-decoration: none;
}

.phone-icon-link i {
  font-size: 28px;           /* large icon */
  color: #ffffff;            /* white on your blue header */
  line-height: 1;
}

.phone-icon-link:hover i,
.phone-icon-link:focus i {
  opacity: 0.9;
}

.phone-icon-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
/* Mobile hamburger button (white icon on blue header) */
.mobile-menu-btn {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* default: no underline */
}

/* Ensure no underline on hover/focus/active */
.mobile-menu-btn,
.mobile-menu-btn:hover,
.mobile-menu-btn:focus,
.mobile-menu-btn:active {
  text-decoration: none !important;
}

.mobile-menu-btn i {
  font-size: 24px;
  color: #ffffff;
  line-height: 1;
}
.mobile-menu-btn:hover i,
.mobile-menu-btn:focus i {
  opacity: 0.9;
}
.mobile-menu-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Offcanvas look & feel */
.mobile-offcanvas-bar {
  background: #08176a;   /* match header */
  color: #ffffff;
  width: 320px;          /* comfortable width */
}

/* Top-level links */
.mobile-offcanvas-nav > li > a {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 8px 0;
}

/* Submenu links */
.mobile-offcanvas-nav .uk-nav-sub a {
  color: #f0f0f0;
  font-weight: 600;
  text-transform: none;
}

/* Hover states (brand blue) */
.mobile-offcanvas-nav a:hover,
.mobile-offcanvas-nav a:focus {
  color: #31b4fb;
  text-decoration: none; /* no underline in offcanvas */
}

/* Optional: brighten UIkit parent caret on dark bg */
.mobile-offcanvas-bar .uk-nav-parent-icon > .uk-parent > a::after {
  opacity: 0.9;
}


/* ===== Footer ===== */
#page-footer {
  position: relative;
  overflow: hidden;
  /* repeating paws pattern with blue fallback */
  background-color: #08176a;
  background-image: url('/media/jpg/footer-paws.jpg');
  background-repeat: repeat;
  background-size: auto;       /* keep pattern natural size */
}

/* Subtle dark overlay for readability */
#page-footer .footer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 23, 106, 0.84); /* deep blue tint over pattern */
  pointer-events: none;
}

/* Titles */
#page-footer .footer-title {
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  margin: 0 0 10px;
}

/* Nav links (white) */
#page-footer .footer-nav > li > a {
  color: #ffffff;
  text-decoration: none;
  padding-left: 0;      /* remove default nav left pad */
}

#page-footer .footer-nav > li > a:hover,
#page-footer .footer-nav > li > a:focus {
  color: #ffffff;       /* stay white */
  text-decoration: underline;
}

/* Divider + legal line */
#page-footer .footer-divider {
  border-color: rgba(255,255,255,0.18);
  margin: 18px 0;
}

#page-footer .footer-legal {
  color: #f0f0f0;
}

/* Credit logo block at the very bottom */
#page-footer .footer-credit a {
  display: inline-block;
  text-decoration: none; /* no underline on image link */
}
#page-footer .footer-credit img {
  max-width: 260px;
  height: auto;
  opacity: 0.95;
}
#page-footer .footer-credit a:hover img,
#page-footer .footer-credit a:focus img {
  opacity: 1;
}

/* Spacing tweaks on small screens */
@media (max-width: 640px) {
  #page-footer .footer-title { margin-top: 6px; }
  #page-footer .footer-credit img { max-width: 220px; }
}


/* ===== Internal Page Hero ===== */
#page-hero-inner {
  position: relative;
  background-image: url('/media/jpg/page-hero-inner.jpg'); /* cover image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* center content vertically + horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* responsive height below large */
  min-height: clamp(220px, 36vh, 350px);
  padding: 24px; /* small inner padding so text never hugs edges */
}

#page-hero-inner .inner-hero-title {
  color: #ffffff;
  font-weight: 700;
  margin: 0;
  line-height: 1.05;
  font-size: clamp(1.75rem, 4.2vw, 3rem);
}

/* Large+ screens: fixed 350px height */
@media (min-width: 1200px) {
  #page-hero-inner {
    height: 350px;
    min-height: 350px; /* ensures consistent height */
  }
}

/* ---- Make hero smaller on mobile ---- */
@media (max-width: 960px) {
  #page-hero-inner {
    min-height: clamp(150px, 28vh, 220px); /* shorter hero on mobile/tablet */
    padding: 16px;
  }
  #page-hero-inner .inner-hero-title {
    font-size: clamp(1.5rem, 6vw, 2.25rem); /* scale down title a bit */
  }
}

@media (max-width: 480px) {
  #page-hero-inner {
    min-height: clamp(130px, 24vh, 200px); /* extra small phones */
    padding: 12px;
  }
  #page-hero-inner .inner-hero-title {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }
}
/* Default: hide-tiny is visible, show-tiny is hidden */
.hide-tiny { display: block !important; }
.show-tiny { display: none !important; }

/* On screens smaller than 500px */
@media (max-width: 449px) {
  .hide-tiny { display: none !important; }
  .show-tiny { display: block !important; }
      #page-logo-img {
    flex: 1 1 100%;
    text-align: center;
  }

  #page-logo-img .uk-logo img {
    display: inline-block;
    max-width: 100%;
    height: auto;
  }
}