/* Kawa Farms K9 Training — site styles */

:root {
--green-dark: #1e3d2f;
--green: #2d6a4f;
--green-light: #52b788;
--header-green: #3b5d4c;
--gold: #d4a54a;
--cream: #faf7f0;
--text: #29302c;
--muted: #6b7268;
--white: #ffffff;
--radius: 10px;
--shadow: 0 8px 24px rgba(20, 40, 30, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
margin: 0;
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
color: var(--text);
background: var(--cream);
line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
font-family: Georgia, "Times New Roman", serif;
color: var(--green-dark);
margin: 0 0 .5em;
line-height: 1.2;
}

.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}

/* ---------- Header / Nav ---------- */
.site-header {
background: var(--header-green);
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

.nav-wrap {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 72px;
}

.brand {
display: flex;
align-items: center;
gap: 10px;
color: var(--white);
font-family: Georgia, serif;
font-size: 1.15rem;
font-weight: bold;
line-height: 1.15;
}
.brand img { height: 44px; width: 44px; border-radius: 50%; flex-shrink: 0; }

.brand span small { display: block; font-family: "Segoe UI", sans-serif; font-size: .6rem; font-weight: normal; letter-spacing: .12em; color: var(--green-light); text-transform: uppercase; margin-top: 2px; }

nav.main-nav ul {
list-style: none;
display: flex;
gap: 0;
margin: 0;
padding: 0;
flex-wrap: wrap;
}
nav.main-nav a {
color: var(--white);
text-decoration: none;
padding: 9px 9px;
border-radius: 6px;
font-size: .85rem;
letter-spacing: .01em;
white-space: nowrap;
}
nav.main-nav a:hover, nav.main-nav a.active { background: var(--green); }

.nav-toggle {
display: none;
background: none;
border: none;
color: var(--white);
font-size: 1.6rem;
cursor: pointer;
}

@media (max-width: 880px) {
.nav-toggle { display: block; }
nav.main-nav {
display: none;
width: 100%;
order: 3;
}
nav.main-nav.open { display: block; }
nav.main-nav ul { flex-direction: column; padding: 10px 0 18px; }
.nav-wrap { flex-wrap: wrap; }
}

/* ---------- Hero ---------- */
.hero {
position: relative;
background-size: cover;
background-position: center;
color: var(--white);
display: flex;
align-items: center;
min-height: 420px;
aspect-ratio: 2.3 / 1;
}
.hero::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,30,22,.55) 0%, rgba(15,30,22,.75) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 720px; padding: 40px 24px; margin: 0 auto; text-align: center; }
.hero h1 { color: var(--white); font-size: 2.6rem; margin-bottom: .3em; }
.hero p { font-size: 1.15rem; color: #eef5ef; }

.hero.small { min-height: 260px; aspect-ratio: 3.2 / 1; }
.hero.small h1 { font-size: 2.1rem; }

.btn {
display: inline-block;
background: var(--gold);
color: var(--green-dark);
padding: 13px 28px;
border-radius: 999px;
font-weight: bold;
margin-top: 18px;
letter-spacing: .02em;
box-shadow: var(--shadow);
}
.btn:hover { background: #e3b968; text-decoration: none; }
.btn.outline { background: transparent; border: 2px solid var(--white); color: var(--white); }
.btn.outline:hover { background: rgba(255,255,255,.15); }

/* ---------- Sections ---------- */
section { padding: 64px 0; }
section.alt { background: var(--white); }
.section-title { text-align: center; max-width: 680px; margin: 0 auto 42px; }
.section-title h2 { font-size: 2rem; }
.section-title p { color: var(--muted); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 800px) {
.grid-3 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr; }
}

.card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 30px 26px;
}
.card h3 { font-size: 1.25rem; }
.card ul { padding-left: 1.1em; color: var(--text); }

.split-image {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
}

.card-photo-row {
display: flex;
gap: 8px;
margin-top: 14px;
}
.card-photo-row img {
width: 50%;
height: 110px;
object-fit: cover;
border-radius: 8px;
box-shadow: var(--shadow);
}

.card-photo-row figure {
width: 50%;
margin: 0;
text-align: center;
}
.card-photo-row figure img {
width: 100%;
height: 110px;
object-fit: cover;
border-radius: 8px;
box-shadow: var(--shadow);
display: block;
}
.card-photo-row figcaption {
font-size: 0.82rem;
color: var(--text);
margin-top: 6px;
}

.lightbox-img { cursor: zoom-in; }
.lightbox-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(10, 20, 15, 0.9);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 24px;
cursor: zoom-out;
}
.lightbox-overlay.active { display: flex; }
.lightbox-overlay img {
max-width: 100%;
max-height: 100%;
border-radius: var(--radius);
box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.carousel {
position: relative;
max-width: 760px;
margin: 0 auto;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
background: #000;
}
.carousel-track {
display: flex;
transition: transform .4s ease;
}
.carousel-slide {
min-width: 100%;
aspect-ratio: 4 / 3;
}
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: zoom-in;
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(20,40,30,.55);
color: var(--white);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s ease;
}
.carousel-btn:hover { background: rgba(20,40,30,.85); }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
.carousel-dots {
position: absolute;
bottom: 12px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 6px;
}
.carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,.5);
cursor: pointer;
border: none;
padding: 0;
}
.carousel-dot.active { background: var(--gold); }
@media (max-width: 600px) {
.carousel-btn { width: 34px; height: 34px; font-size: .95rem; }
}

.callout {
background: var(--green-dark);
color: var(--white);
border-radius: var(--radius);
padding: 44px;
text-align: center;
}
.callout h2 { color: var(--white); }
.callout a.btn { margin-top: 10px; }

.testimonial {
background: var(--white);
border-left: 4px solid var(--gold);
border-radius: var(--radius);
padding: 24px 26px;
box-shadow: var(--shadow);
}
.testimonial p.quote { font-style: italic; margin-bottom: 10px; }
.testimonial p.who { color: var(--muted); font-size: .9rem; margin: 0; }

.quote-banner {
background: var(--green-dark);
color: var(--white);
text-align: center;
padding: 40px 24px;
}
.quote-banner .quote-main {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.6rem;
color: var(--gold);
margin: 0 0 8px;
letter-spacing: .02em;
}
.quote-banner .quote-sub {
font-style: italic;
font-size: 1.05rem;
color: #eef5ef;
margin: 0;
}
@media (max-width: 600px) {
.quote-banner .quote-main { font-size: 1.3rem; }
.quote-banner .quote-sub { font-size: .95rem; }
}

.stats-bar {
background: var(--green);
color: var(--white);
padding: 28px 0;
}
.stats-bar .grid-3 { text-align: center; }
.stats-bar strong { display: block; font-size: 1.8rem; font-family: Georgia, serif; }
.stats-bar span { font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }

table.rates { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.rates th, table.rates td { text-align: left; padding: 14px 18px; border-bottom: 1px solid #eee; }
table.rates th { background: var(--green-dark); color: var(--white); }

/* ---------- Footer ---------- */
footer.site-footer {
background: var(--green-dark);
color: #cfe3d6;
padding: 48px 0 24px;
margin-top: 40px;
}
footer.site-footer .grid-3 { gap: 32px; }
footer.site-footer h4 { color: var(--white); font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; }
footer.site-footer a { color: #cfe3d6; }
footer.site-footer a:hover { color: var(--white); }
footer.site-footer ul { list-style: none; padding: 0; margin: 0; }
footer.site-footer li { margin-bottom: 8px; }
footer.site-footer .footer-dropdown summary {
color: var(--white);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .05em;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
footer.site-footer .footer-dropdown summary::-webkit-details-marker { display: none; }
footer.site-footer .footer-dropdown summary::marker { content: ''; }
footer.site-footer .footer-dropdown summary::after {
content: '+';
font-size: 1.1rem;
margin-left: 10px;
color: #cfe3d6;
}
footer.site-footer .footer-dropdown[open] summary::after { content: '\2212'; }
footer.site-footer .footer-dropdown ul { margin-top: 12px; }
.social-row { display: flex; gap: 12px; margin-top: 10px; }
.social-row a {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,.1);
display: flex; align-items: center; justify-content: center;
font-size: .85rem;
}
.social-row a:hover { background: var(--green); text-decoration: none; }
.cert-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px;
margin-top: 36px;
}
.cert-badges img {
height: 56px;
width: auto;
background: var(--white);
border-radius: 8px;
padding: 6px 10px;
box-shadow: var(--shadow);
}
.footer-bottom {
text-align: center;
margin-top: 34px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.12);
font-size: .85rem;
color: #9fb8a8;
}
.footer-bottom a { color: #9fb8a8; }

/* ---------- Contact page ---------- */
.contact-block { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 24px; }
.contact-block .icon {
width: 44px; height: 44px; border-radius: 50%;
background: var(--green-light); color: var(--white);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 1.1rem;
}

.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-weight: bold; margin-bottom: 6px; font-size: .9rem; }
.form-row input, .form-row textarea {
width: 100%; padding: 12px 14px; border-radius: 6px; border: 1px solid #ccd6cf; font-size: 1rem; font-family: inherit;
}

.badge-strip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.badge-strip span {
background: rgba(255,255,255,.15); color: var(--white);
padding: 6px 14px; border-radius: 999px; font-size: .8rem;
}

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 800px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
display: flex;
flex-direction: column;
}
.blog-card img { width: 100%; height: 220px; object-fit: cover; }
.blog-card .blog-card-body { padding: 22px 24px 26px; }
.blog-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.blog-card h3 a { color: var(--green-dark); }
.blog-card h3 a:hover { color: var(--green); text-decoration: none; }
.blog-meta { color: var(--muted); font-size: .85rem; margin-bottom: 10px; }
.blog-card p.excerpt { color: var(--text); margin: 0; }

.blog-post-header { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.blog-post-header h1 { font-size: 2.1rem; }
.blog-post-hero { max-width: 900px; margin: 0 auto 36px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.blog-post-hero img { width: 100%; height: auto; }

article.blog-body { max-width: 760px; margin: 0 auto; }
article.blog-body h2 { font-size: 1.4rem; margin-top: 1.6em; }
article.blog-body h3 { font-size: 1.15rem; margin-top: 1.4em; }
article.blog-body p { margin: 0 0 1.2em; }
article.blog-body ul, article.blog-body ol { padding-left: 1.3em; margin: 0 0 1.2em; }
article.blog-body li { margin-bottom: .5em; }
article.blog-body em { color: var(--muted); }
article.blog-body .lead { font-size: 1.15rem; color: var(--green-dark); font-style: italic; }

.blog-back { max-width: 760px; margin: 40px auto 0; }
.blog-nav-links { max-width: 760px; margin: 50px auto 0; padding-top: 24px; border-top: 1px solid #e4ddd0; text-align: center; }

/* Blog post share row (top of post, under the title) */
.blog-share {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 18px;
}
.blog-share .share-label {
font-size: .78rem;
color: var(--muted);
letter-spacing: .08em;
text-transform: uppercase;
}
.share-btn {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--green-dark);
color: var(--white);
border: none;
cursor: pointer;
position: relative;
transition: background .15s ease, filter .15s ease;
padding: 0;
}
.share-btn:hover { background: var(--green); }
.share-btn.share-fb { background: #1877F2; }
.share-btn.share-fb:hover { background: #166fe0; }
.share-btn.share-ig {
background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7);
}
.share-btn.share-ig:hover { filter: brightness(1.08); }
.share-copied-msg {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--green-dark);
color: var(--white);
font-size: .72rem;
padding: 5px 10px;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease;
}
.share-btn.copied .share-copied-msg { opacity: 1; }

/* ---------- FAQ page ---------- */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 26px; }
.faq-item summary { cursor: pointer; list-style: none; display:flex; align-items:center; justify-content:space-between; font-family: Georgia, serif; color: var(--green-dark); font-size: 1.1rem; font-weight:bold; padding: 18px 0; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::marker { content:''; }
.faq-item summary::after { content:'+'; font-size:1.3rem; color: var(--green); margin-left:14px; flex-shrink:0; }
.faq-item[open] summary::after { content:'\2212'; }
.faq-item .faq-answer { padding: 0 0 20px; color: var(--text); }
.faq-item .faq-answer p { margin: 0 0 1em; }
.faq-item .faq-answer p:last-child { margin-bottom: 0; }
.faq-item .faq-answer ul { padding-left: 1.2em; margin: 0 0 1em; }

/* ---------- Responsive hero image swap ---------- */
/* Home, About Us, and Contact all point their .hero at the same
/images/banner-hero.png in markup. Both .hero and .hero.small above use
a fixed aspect-ratio (rather than a vh-based min-height) so the visible
crop window's proportions stay constant no matter how the browser window
is resized -- resizing used to change the container's aspect ratio
continuously, which meant background-size: cover would crop a different
amount every time and could crop into Jenn/Moose/the dogs. With a fixed
aspect-ratio, resizing just scales the same crop up or down.
The two rules below swap in photos built specifically for each aspect
ratio (mobile portrait, and the shorter About Us/Contact band) so nothing
important is ever cropped off. */
@media (max-width: 880px) {
.hero[style*="banner-hero.png"] {
background-image: url('/images/banner-hero-mobile.png?v=20260817b') !important;
/* banner-hero-mobile.png is a tall portrait crop (aspect ~0.8/1). Without
this override, .hero/.hero.small kept their wide desktop aspect-ratio
(2.3/1 or 3.2/1) on mobile, so background-size: cover squeezed the
portrait photo into a short, wide box and cropped most of it away --
this was the "mobile view is messed up" bug. Overriding aspect-ratio
here (and dropping the desktop min-height floor) matches the container
shape to the actual mobile image so nothing gets cropped. */
aspect-ratio: 4 / 5 !important;
min-height: 0 !important;
}
}
@media (min-width: 881px) {
.hero.small[style*="banner-hero.png"] {
background-image: url('/images/banner-hero-small.png?v=20260817b') !important;
}
}

/* Board & Train hero (images/indoor-training.jpg) -- this source photo is
already a tall portrait shot (1440x1920), so unlike banner-hero it doesn't
need a dedicated mobile crop image, just a container shape that matches it.
Without this override, .hero.small kept its wide desktop aspect-ratio
(3.2/1) on mobile, so background-size: cover squeezed this portrait photo
into a short, wide box and cropped almost all of it away -- same underlying
bug as the banner-hero fix above, just on a different page/image. */
@media (max-width: 880px) {
.hero.small[style*="indoor-training.jpg"] {
aspect-ratio: 4 / 5 !important;
min-height: 0 !important;
}
}

/* Boarding hero (images/boarding-hero-puppy-3.png) -- this is a wide panorama
(puppy centered, background extended out on both sides) but only 449px
tall, so simply reshaping the container like the Board & Train fix above
over-zooms and crops almost the whole puppy out. Needs a dedicated mobile
portrait image (built the same way as banner-hero-mobile.png -- extend the
canvas vertically around the subject) rather than just a container-shape
fix. */
@media (max-width: 880px) {
.hero.small[style*="boarding-hero-puppy-3.png"] {
background-image: url('/images/boarding-hero-puppy-mobile.png?v=20260818') !important;
aspect-ratio: 4 / 5 !important;
min-height: 0 !important;
}
}

/* Working K9s hero (images/working-k9-hero-mission.png) -- this is a 3-panel
letterboxed collage (helicopter / dog in vehicle / dog in sand), so a plain
aspect-ratio reshape zooms into one panel and crops out both dogs. Jenn
supplied a dedicated mobile photo instead (search/rescue dog working a
debris pile), which has her own "TRAIN FOR YOUR WORST DAY" text banner
baked in at the bottom -- keep that intact (extended the canvas upward,
not cropped, so nothing of Jenn's photo/banner is lost). Since the dog
sits in the vertical middle of this photo, also reposition the hero's own
heading/tagline up near the top and the call button down near the bottom
(above the banner) so neither covers the dog or Jenn's text. */
@media (max-width: 880px) {
.hero.small[style*="working-k9-hero-mission.png"] {
background-image: url('/images/working-k9-hero-mobile-v2.jpg?v=20260818') !important;
aspect-ratio: 4 / 5 !important;
min-height: 0 !important;
}
.hero.small[style*="working-k9-hero-mission.png"] .hero-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
margin: 0;
max-width: none;
padding-top: 20px;
padding-bottom: 18%;
}
.hero.small[style*="working-k9-hero-mission.png"] .hero-content .btn {
margin-top: auto;
}
}

/* Working K9s hero -- desktop only. The shared .hero.small aspect-ratio
(3.2/1) made this specific hero tall enough on wide screens to push the
page's content (the three service cards) below the fold. Jenn asked to
shorten just this page's hero rather than change the shared aspect-ratio,
so Boarding/Board & Train/Pet Dogs/Online Courses stay exactly as they
are -- she's happy with those as-is. */
@media (min-width: 881px) {
.hero.small[style*="working-k9-hero-mission.png"] {
aspect-ratio: 4.5 / 1;
}
}

/* Pet Dogs hero (images/pet-dogs-hero-collage.png) -- this is a 5-panel
letterboxed collage, so a plain aspect-ratio reshape zooms into a single
panel and crops out the rest. Per Jenn's direction, using just the 2
left-most photos (people training two black dogs; dropped the golden
retriever/balance-ball/tunnel panels on the right). Built a dedicated
mobile portrait image combining those 2 photos side by side with the
canvas extended vertically (matching wall/floor color) to reach a 4/5
crop, same technique as the Boarding puppy fix. */
@media (max-width: 880px) {
.hero.small[style*="pet-dogs-hero-collage.png"] {
background-image: url('/images/pet-dogs-hero-mobile.png?v=20260818') !important;
aspect-ratio: 4 / 5 !important;
min-height: 0 !important;
}
}

/* ---------------------------------------------------------------------
   CARDS IN A GRID STAND THE SAME HEIGHT. Sep 6, 2026.

   .grid-2 and .grid-3 carry align-items: center, which is right for the
   text-beside-a-photograph splits and wrong for a row of cards: two cards
   of unequal height get centred against each other, so their tops sit apart
   and nothing lines up. Jenn, looking at the boarding rates: "The rates
   didn't line up correctly. It looks kinda offset." The right card was 26px
   taller because its description wrapped to two lines.

   height: 100% makes each card fill its grid area (the row height, i.e. the
   tallest card), so centring has nothing left to centre. The splits are
   untouched -- they have no .card child.

   The second rule is the boarding rates only. With equal heights the price
   still sat a line lower on the card with the longer description; pushing
   the last paragraph to the bottom puts both prices on one line. It is
   scoped to .rates-grid on purpose: on a card whose last paragraph is prose
   rather than a price, the same rule opens a hole in the middle of the card.
   --------------------------------------------------------------------- */
.grid-2 > .card,
.grid-3 > .card { height: 100%; display: flex; flex-direction: column; }
.rates-grid > .card > p:last-child { margin-top: auto; }

/* ---------------------------------------------------------------------
   THE UPDATES PAGE, AND THE STRIP THAT POINTS AT IT. Sep 6, 2026.

   Jenn wanted somewhere clients could read what is going on -- the new
   website, the new booking system -- without it being buried. Two parts,
   because they do two different jobs and have two different lifespans.

   THE STRIP does the announcing. A page nobody clicks announces nothing,
   and the two things that need saying are exactly what a client would
   never go looking for. It sits above the nav on every page because every
   page includes the same header file. It is TEMPORARY -- her words, "maybe
   thirty days" -- so it lives behind a switch in inc-header.php rather than
   being something that has to be hunted down and cut out later.

   THE PAGE holds the detail and keeps the history after the strip is gone.
   Its own heading in the footer, deliberately NOT inside Quick Links and
   NOT a tenth item in the top nav -- her words: "its own little spot that
   said updates."

   The strip is green-dark rather than the header green so it reads as a
   notice sitting ABOVE the site, not as a second row of navigation.
   --------------------------------------------------------------------- */
.site-banner { background: var(--green-dark); color: var(--cream); }
.site-banner .container {
  padding: 10px 24px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 4px 14px; text-align: center; font-size: 15px; line-height: 1.4;
}
.site-banner a { color: var(--gold); text-decoration: underline; white-space: nowrap; }
.site-banner a:hover { color: var(--white); }

/* The list of entries takes the same 760px measure as the boarding copy --
   Jenn, Sep 6: "I think it looks better centered." */
.updates-list { max-width: 760px; margin: 0 auto; padding: 8px 0 8px; }
.update { border-top: 1px solid rgba(41, 48, 44, 0.14); padding: 26px 0; }
.update:first-child { border-top: 0; padding-top: 8px; }
.update h3 { margin: 6px 0 10px; }
.update p { margin: 0 0 10px; }
.update p:last-child { margin-bottom: 0; }
.update-date {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}

/* Same spacing above it as the other footer headings get, so the column
   does not look like the link was bolted on afterwards. */
.site-footer h4.footer-updates { margin-top: 22px; }