/* Days Out Ontario - Custom overrides for Spectral */

:root {
  --sky: #1B6CA8;
  --sky-dark: #155A8A;
  --amber: #E8913A;
  --amber-dark: #C97A2E;
  --charcoal: #333740;
  --light: #F4F7FA;
  --white: #fff;
}

/* Base overrides - Spectral defaults to dark bg/white text, we flip it */
body {
  background-color: var(--white);
  color: var(--charcoal);
}

body, input, select, textarea {
  font-family: 'PT Serif', Georgia, serif;
  color: var(--charcoal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', 'Helvetica Neue', sans-serif;
  color: var(--charcoal);
}

/* Ensure wrapper sections that Spectral styles with dark bg still have white text */
.wrapper.style1,
.wrapper.style2 {
  color: var(--charcoal);
}

.wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 p,
.wrapper.style2 h2, .wrapper.style2 h3, .wrapper.style2 p {
  color: var(--charcoal);
}

/* Dark sections keep white text */
.wrapper.style3, .wrapper.style4 {
  color: #fff;
}

.wrapper.style3 h2, .wrapper.style3 h3, .wrapper.style3 p,
.wrapper.style4 h2, .wrapper.style4 h3, .wrapper.style4 p {
  color: #fff;
}

/* Spotlight sections - Spectral defaults these dark */
.spotlight .content {
  color: var(--charcoal);
  background-color: var(--white);
}

.spotlight .content h2, .spotlight .content h3, .spotlight .content p {
  color: var(--charcoal);
}

/* Article page header stays dark overlay with white text */
#main > header {
  color: #fff;
}

#main > header h2, #main > header p {
  color: #fff;
}

/* Icons section */
.wrapper.style1.special .icons.major .icon {
  color: var(--sky);
}

/* Links in body content */
a {
  color: var(--sky);
  border-bottom-color: var(--sky);
}

a:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

/* Header / Nav */
#header {
  background: rgba(27,108,168,0.92);
}

#header.alt {
  background: transparent;
}

#header h1 a {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
}

#menu {
  background: var(--sky-dark);
}

#menu ul li a {
  border-top-color: rgba(255,255,255,0.12);
}

.menu-sep {
  font-family: 'Sora', sans-serif;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  padding: 0.5em 0 0.25em 1.5em;
  pointer-events: none;
}

/* Banner */
#banner {
  background-image: url('/pics/ontario-hero.jpg');
  background-size: cover;
  background-position: center center;
}

#banner .inner h2 {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
}

/* Sections */
.wrapper.style1 {
  background-color: var(--white);
}

.wrapper.style2 .spotlight .content h2 {
  font-family: 'Sora', sans-serif;
}

.wrapper.style3 {
  background-color: var(--sky);
}

.wrapper.style3 .features li .icon {
  color: var(--amber);
}

.wrapper.style4 {
  background-color: var(--charcoal);
}

.wrapper.style5 {
  background-color: var(--white);
}

/* Article headers (generic page pattern) */
#main > header {
  background-image: url('/pics/ontario-hero.jpg');
  background-size: cover;
  background-position: center;
}

/* Buttons */
.button.primary {
  background-color: var(--amber);
  border-color: var(--amber);
  color: var(--white);
}

.button.primary:hover {
  background-color: var(--amber-dark);
  border-color: var(--amber-dark);
}

.button {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Footer */
#footer {
  background-color: var(--charcoal);
}

#footer .icons li a {
  color: rgba(255,255,255,0.6);
  font-family: 'Sora', sans-serif;
  font-size: 0.85em;
  font-weight: 500;
  text-decoration: none;
  border: none;
}

#footer .icons li a:hover {
  color: var(--amber);
}

#footer .copyright li {
  color: rgba(255,255,255,0.35);
  font-size: 0.8em;
}

#footer .copyright li a {
  color: rgba(255,255,255,0.45);
}

/* Content section overrides for articles */
.wrapper.style5 .inner {
  max-width: 52em;
}

.wrapper.style5 .inner h2 {
  font-family: 'Sora', sans-serif;
  color: var(--charcoal);
  font-size: 1.5em;
  margin-top: 1.5em;
}

.wrapper.style5 .inner h3 {
  font-family: 'Sora', sans-serif;
  color: var(--charcoal);
  font-size: 1.2em;
  margin-top: 1.25em;
}

.wrapper.style5 .inner p {
  line-height: 1.8;
}

.wrapper.style5 .inner img {
  border-radius: 6px;
  margin: 1.5em 0;
}

.wrapper.style5 .inner a {
  color: var(--sky);
}

.wrapper.style5 .inner a:hover {
  color: var(--sky-dark);
}

/* Place card for town "More about" sections */
.place-card {
  background: var(--light);
  border-left: 4px solid var(--sky);
  padding: 1.5em 2em;
  margin: 2em 0;
  border-radius: 0 6px 6px 0;
}

.place-card h3 {
  margin-top: 0;
  font-size: 1.1em;
}

.place-card a {
  color: var(--sky);
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.9em;
}

/* Spotlight section tweaks */
.spotlight .content h2 a {
  color: inherit;
  border-bottom: none;
}

.spotlight .content h2 a:hover {
  color: var(--amber);
}

/* Feature grid for hub pages */
.features li .icon {
  color: var(--sky);
}

.features li h3 {
  font-family: 'Sora', sans-serif;
}

/* icons major for homepage */
.icons.major .icon {
  color: var(--sky);
}

.icons.major .icon.style2 {
  color: var(--amber);
}

/* Responsive */
@media screen and (max-width: 736px) {
  #banner .inner h2 {
    font-size: 1.75em;
  }
}