/*
Theme Name: High Five Roofing & Exteriors
Theme URI: https://highfiveroofs.com
Author: Megan Boyd at Iron Built Media
Author URI: https://ironbuiltmedia.com
Description: Custom WordPress theme for High Five Roofing & Exteriors. 
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: highfive
Tags: business, custom-menu, custom-logo, two-columns, right-sidebar
*/


:root {
  --terracotta: #b34d2d;
  --terracotta-dark: #953f24;
  --green: #2a3428;
  --green-light: #3c4a38;
  --cream: #f4efe9;
  --cream-dark: #e8ded2;
  --text-dark: #262b23;
  --max-width: 1180px;
  --radius: 6px;
  --shadow: 0 10px 30px rgba(42, 52, 40, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 0.5em;
  color: var(--green);
}

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

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

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 10px;
}

.section {
  padding: 88px 0;
}

.section-alt {
  background: var(--cream-dark);
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.section-header h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.section-header p {
  color: #5a6156;
  margin-bottom: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--terracotta);
  color: var(--cream);
  border-color: var(--terracotta);
}

.btn-primary:hover {
  background: var(--terracotta-dark);
  border-color: var(--terracotta-dark);
}

.btn-outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}

.btn-outline:hover {
  background: var(--cream);
  color: var(--green);
}

.btn-outline-dark {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}

.btn-outline-dark:hover {
  background: var(--green);
  color: var(--cream);
}

/* Top bar */
.topbar {
  background: var(--green);
  color: var(--cream-dark);
  font-size: 0.85rem;
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 16px;
}

.topbar a {
  color: var(--cream-dark);
}

.topbar a:hover { color: var(--terracotta); }

.topbar-links {
  display: flex;
  gap: 24px;
}

.topbar-links span {
  opacity: 0.8;
  margin-right: 4px;
}

/* Header / Nav */
.site-header {
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(42, 52, 40, 0.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.nav-logo img {
  height: 56px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--green);
  position: relative;
  padding: 4px 0;
}

.nav-links a:hover { color: var(--terracotta); }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-phone {
  font-weight: 700;
  color: var(--terracotta);
  font-size: 1.05rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
}

/* Hero */
.hero {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-light) 100%);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

.hero .container {
  position: relative;
  z-index: 2;
  padding-top: 100px;
  padding-bottom: 110px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.hero-watermark {
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 480px;
  opacity: 0.06;
  z-index: 1;
  pointer-events: none;
}

.hero-eyebrow {
  color: var(--terracotta);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 16px;
  display: inline-block;
}

.hero h1 {
  color: var(--cream);
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  line-height: 1.15;
  margin-bottom: 20px;
}

.hero h1 span { color: var(--terracotta); }

.hero p.lead {
  color: var(--cream-dark);
  font-size: 1.1rem;
  max-width: 480px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hero-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}

.hero-stats div strong {
  display: block;
  font-size: 1.6rem;
  color: var(--terracotta);
}

.hero-stats div span {
  font-size: 0.85rem;
  color: var(--cream-dark);
  letter-spacing: 0.02em;
}

.hero-card {
  background: var(--cream);
  color: var(--text-dark);
  border-radius: 10px;
  padding: 36px 32px;
  box-shadow: var(--shadow);
}

.hero-card h3 {
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.hero-card p {
  color: #5a6156;
  font-size: 0.92rem;
}

.hero-card ul {
  list-style: none;
  margin: 20px 0 26px;
  padding: 0;
}

.hero-card ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cream-dark);
  font-size: 0.95rem;
}

.hero-card ul li:last-child { border-bottom: none; }

.hero-card ul li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--terracotta);
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-card .btn { width: 100%; }

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-card {
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  border-radius: 10px;
  padding: 40px 32px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.service-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.service-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--terracotta);
}

.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.service-card p {
  color: #5a6156;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.service-card .service-link {
  color: var(--terracotta);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Why choose us */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.why-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.why-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.why-list .num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--cream);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-list h4 {
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.why-list p {
  color: #5a6156;
  font-size: 0.93rem;
  margin-bottom: 0;
}

.why-visual {
  background: var(--green);
  border-radius: 10px;
  padding: 56px 40px;
  text-align: center;
  color: var(--cream);
}

.why-visual img {
  width: 160px;
  height: auto;
  margin: 0 auto 24px;
}

.why-visual h3 {
  color: var(--cream);
  font-size: 1.4rem;
}

.why-visual p {
  color: var(--cream-dark);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Service area */
.area-wrap {
  background: var(--terracotta);
  color: var(--cream);
  border-radius: 12px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.area-wrap h2 { color: var(--cream); text-align: left; }

.area-wrap .eyebrow { color: var(--green); }

.area-wrap p { color: rgba(244,239,233,0.9); }

.area-towns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.area-towns span {
  background: rgba(244,239,233,0.15);
  border: 1px solid rgba(244,239,233,0.4);
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 500;
}

.area-card {
  background: var(--cream);
  color: var(--text-dark);
  border-radius: 10px;
  padding: 32px;
  text-align: center;
}

.area-card .big {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--terracotta);
  line-height: 1;
  margin-bottom: 6px;
}

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.about-badge {
  background: var(--green);
  border-radius: 10px;
  padding: 60px 30px;
  text-align: center;
}

.about-badge img { width: 130px; height: auto; margin: 0 auto; }

.about-content p {
  color: #5a6156;
}

.about-points {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 12px;
}

.about-points li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 500;
}

.about-points li::before {
  content: "\2713";
  color: var(--cream);
  background: var(--terracotta);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* CTA strip */
.cta-strip {
  background: var(--green);
  color: var(--cream);
  text-align: center;
}

.cta-strip h2 { color: var(--cream); }

.cta-strip p {
  color: var(--cream-dark);
  max-width: 520px;
  margin: 0 auto 30px;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 22px;
}

.contact-info-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.contact-info-list .ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-list .ic svg {
  width: 20px;
  height: 20px;
  stroke: var(--terracotta);
}

.contact-info-list strong {
  display: block;
  font-size: 0.95rem;
}

.contact-info-list a, .contact-info-list span.detail {
  color: #5a6156;
  font-size: 0.95rem;
}

.contact-form {
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  border-radius: 10px;
  padding: 40px;
  box-shadow: var(--shadow);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--green);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cfc6b8;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--text-dark);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--terracotta);
}

.form-note {
  font-size: 0.8rem;
  color: #8a8478;
  margin-top: 12px;
}

/* Footer */
.site-footer {
  background: var(--green);
  color: var(--cream-dark);
  padding: 60px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(244,239,233,0.12);
}

.footer-logo img { height: 56px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 16px; }

.footer-grid p { font-size: 0.9rem; color: rgba(244,239,233,0.7); }

.footer-grid h4 {
  color: var(--cream);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.footer-grid ul a {
  font-size: 0.92rem;
  color: rgba(244,239,233,0.75);
}

.footer-grid ul a:hover { color: var(--terracotta); }

.footer-bottom {
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: rgba(244,239,233,0.55);
  flex-wrap: wrap;
  gap: 10px;
}

.footer-bottom a { color: rgba(244,239,233,0.7); }
.footer-bottom a:hover { color: var(--terracotta); }

/* Mobile */
@media (max-width: 960px) {
  .hero .container,
  .why-grid,
  .about-grid,
  .contact-grid,
  .area-wrap {
    grid-template-columns: 1fr;
  }

  .services-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .why-visual, .about-badge { padding: 40px 24px; }
}

@media (max-width: 780px) {
  .topbar-links { display: none; }

  .nav-links, .nav-phone { display: none; }

  .nav-toggle { display: flex; }

  .site-header.open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    padding: 20px 24px;
    gap: 18px;
    box-shadow: 0 12px 20px rgba(0,0,0,0.08);
  }

  .site-header.open .nav-phone {
    display: block;
  }

  .services-grid { grid-template-columns: 1fr; }

  .section { padding: 64px 0; }

  .hero-stats { gap: 24px; }

  .form-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }

  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ===== Services Dropdown ===== */
.nav-links li.has-dropdown { position: relative; }

.nav-links li.has-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  vertical-align: 2px;
}

.nav-links .dropdown {
  list-style: none;
  margin: 0;
  padding: 10px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--cream);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 230px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
}

.nav-links li.has-dropdown:hover .dropdown,
.nav-links li.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-links .dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
}

.nav-links .dropdown a::after { display: none; }

.nav-links .dropdown a:hover {
  background: var(--cream-dark);
  color: var(--terracotta);
}

@media (max-width: 780px) {
  .nav-links li.has-dropdown .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    padding: 4px 0 4px 16px;
    min-width: 0;
    display: none;
  }

  .nav-links li.has-dropdown.open .dropdown { display: grid; gap: 4px; }
}

/* ===== Sub-page hero (service pages) ===== */
.page-hero {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-light) 100%);
  color: var(--cream);
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}

.page-hero .container { position: relative; z-index: 2; max-width: 780px; }

.page-hero .hero-watermark { opacity: 0.06; }

.breadcrumb {
  font-size: 0.85rem;
  color: var(--cream-dark);
  margin-bottom: 18px;
}

.breadcrumb a { color: var(--cream-dark); }
.breadcrumb a:hover { color: var(--terracotta); }

.page-hero h1 {
  color: var(--cream);
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 16px;
}

.page-hero p.lead {
  color: var(--cream-dark);
  font-size: 1.08rem;
  margin-bottom: 30px;
}

/* Included list */
.included-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.included-grid div {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 0.95rem;
}

.included-grid div::before {
  content: "\2713";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

/* Related services */
.related-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.related-card {
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  border-radius: 8px;
  padding: 20px 16px;
  text-align: center;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--green);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  color: var(--terracotta);
}

/* Reviews */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.review-card {
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  border-radius: 10px;
  padding: 28px;
}

.review-stars { color: var(--terracotta); font-size: 1rem; margin-bottom: 12px; letter-spacing: 2px; }

.review-card p { color: #5a6156; font-size: 0.95rem; font-style: italic; }

.review-card strong { display: block; margin-top: 10px; color: var(--green); font-size: 0.9rem; font-style: normal; }

@media (max-width: 960px) {
  .included-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WordPress additions
   ========================================================================== */

/* Keep the sticky header clear of the WP admin bar */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Accessibility */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
  clip: auto; clip-path: none; height: auto; width: auto;
  left: 12px; top: 12px; z-index: 999; padding: 12px 20px;
  background: var(--cream); color: var(--green); border-radius: 6px;
  font-weight: 600; box-shadow: var(--shadow);
}

/* Core WordPress alignment + caption classes */
.alignleft  { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto 16px; }
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption {
  font-size: 0.85rem; color: #5a6156; margin-top: 8px; text-align: center;
}
.wp-block-image img { border-radius: 8px; }

/* Editable body copy (page content, service copy blocks) */
.entry-content { max-width: 780px; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.6em; }
.entry-content h3 { font-size: 1.25rem; margin-top: 1.4em; }
.entry-content ul, .entry-content ol { padding-left: 22px; margin: 0 0 1em; }
.entry-content li { margin-bottom: 8px; }
.entry-content a { color: var(--terracotta); font-weight: 600; text-decoration: underline; }
.entry-content blockquote {
  border-left: 4px solid var(--terracotta);
  margin: 24px 0; padding: 4px 0 4px 22px; color: #5a6156; font-style: italic;
}
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.entry-content th, .entry-content td {
  border: 1px solid var(--cream-dark); padding: 10px 12px; text-align: left; font-size: 0.95rem;
}
.entry-content th { background: var(--cream-dark); }

/* Service page copy blocks */
.copy-block { max-width: 780px; margin: 0 auto; }
.copy-block + .copy-block { margin-top: 44px; }

/* Contact form messages */
.form-message {
  border-radius: 8px; padding: 14px 18px; margin-bottom: 20px;
  font-size: 0.95rem; font-weight: 500;
}
.form-message.is-success { background: #e4ecdf; color: #2a3428; border: 1px solid #b9cdb0; }
.form-message.is-error   { background: #f7e3dc; color: #8c3c1f; border: 1px solid #e0b6a5; }
.hf-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* Consent / small print under the form */
.form-consent { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.form-consent input { width: auto; margin-top: 4px; flex-shrink: 0; }
.form-consent label { font-size: 0.8rem; font-weight: 400; color: #5a6156; line-height: 1.5; }

/* Admin-only setup hints (never visible to site visitors) */
.hf-admin-note {
  background: #fff6e5; border: 1px dashed #d9a441; color: #6b4c14;
  padding: 14px 18px; border-radius: 8px; font-size: 0.88rem; margin-bottom: 20px;
}

/* Service archive grid reuses .services-grid */
.archive-intro { color: #5a6156; }

/* Pagination */
.hf-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.hf-pagination .page-numbers {
  padding: 10px 16px; border-radius: 6px; border: 1px solid var(--cream-dark);
  background: var(--cream); font-weight: 600; font-size: 0.9rem; color: var(--green);
}
.hf-pagination .page-numbers.current,
.hf-pagination .page-numbers:hover { background: var(--terracotta); color: var(--cream); border-color: var(--terracotta); }

/* 404 */
.error-404 { text-align: center; max-width: 620px; margin: 0 auto; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* Rank Math breadcrumb output inside the page banner */
.breadcrumb nav,
.breadcrumb .rank-math-breadcrumb { display: inline; }
.breadcrumb .rank-math-breadcrumb p { margin: 0; display: inline; }
.breadcrumb .last { color: var(--cream); }

/* Contact map embed */
.contact-map iframe { width: 100%; min-height: 260px; border: 0; display: block; }

/* Service page FAQ + copy blocks sit on either background */
.section-alt .copy-block .wp-block-image img,
.section .copy-block .wp-block-image img { border-radius: 8px; }

/* Blog and archive cards reuse .service-card, so let headings link cleanly */
.service-card h3 a { color: inherit; }
.service-card h3 a:hover { color: var(--terracotta); }

/* Logos are sized by height, so width must stay automatic or the width and
   height attributes on the img tag stretch them. */
.footer-logo img,
.nav-logo img { display: block; }

/* Form fields laid out from the field settings */
.form-row.is-single { grid-template-columns: 1fr; }
.form-group.is-full { grid-column: 1 / -1; }

/* ==========================================================================
   Service area
   ========================================================================== */

/* The plain box was top aligned in a taller grid cell, which is what made the
   CSRA text sit off centre. */
.area-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

/* With a map image: wording on the left, map on the right, town pills running
   the full width underneath. The map stays beside the text rather than under
   it, so the section does not grow taller than the words next to it. */
.area-wrap.has-image {
  grid-template-columns: 1.05fr 0.95fr;
  align-items: start;
  row-gap: 30px;
}

.area-wrap.has-image .area-intro p:last-child { margin-bottom: 0; }

.area-image {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 12px 30px rgba(42, 52, 40, 0.18);
  line-height: 0;
  max-width: 520px;
  margin-left: auto;
}

.area-image .area-image-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pills sit below both columns so they read as a list of everywhere served,
   not as a caption on the map. */
.area-towns-full {
  grid-column: 1 / -1;
  margin-top: 0;
}

@media (max-width: 960px) {
  .area-wrap.has-image { grid-template-columns: 1fr; row-gap: 24px; }
  .area-image { max-width: 100%; margin-left: 0; }
}


/* Link in the hero that opens the roof calculator */
.hero-calc-line { margin: -22px 0 34px; }

.hero-calc-link {
  color: var(--terracotta);
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(179, 77, 45, 0.5);
  padding-bottom: 2px;
}

.hero-calc-link:hover { color: var(--cream); border-bottom-color: var(--cream); }

/* Agency credit, bottom right of the footer */
.footer-credit a {
  color: rgba(244, 239, 233, 0.55);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.footer-credit a:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

/* Heading above the estimate form, matching "Contact information" opposite */
.contact-form-col > h3 {
  font-size: 1.15rem;
  margin-bottom: 20px;
  color: var(--green);
}

/* Designer credit in the footer bottom bar */
.footer-credit a {
  color: rgba(244, 239, 233, 0.75);
  border-bottom: 1px solid transparent;
}

.footer-credit a:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.footer-extra { opacity: 0.75; margin-left: 10px; }

@media (max-width: 640px) {
  .footer-extra { display: block; margin-left: 0; margin-top: 4px; }
}

/* Footer bottom bar: privacy link and designer credit */
.footer-legal {
  color: rgba(244, 239, 233, 0.75);
  border-bottom: 1px solid transparent;
  margin-left: 8px;
}

.footer-legal:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.footer-legal::before {
  content: "·";
  margin-right: 10px;
  color: rgba(244, 239, 233, 0.4);
}

.footer-credit a {
  color: rgba(244, 239, 233, 0.75);
  border-bottom: 1px solid transparent;
}

.footer-credit a:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.footer-extra { opacity: 0.75; margin-left: 10px; }

@media (max-width: 640px) {
  .footer-legal { display: inline-block; margin-left: 0; margin-top: 4px; }
  .footer-legal::before { display: none; }
  .footer-extra { display: block; margin-left: 0; margin-top: 4px; }
}

/* Required and optional markers on the estimate form labels */
.form-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #8a8478;
  font-size: 0.85em;
  margin-left: 4px;
}

.form-required {
  color: var(--terracotta);
  font-weight: 700;
  margin-left: 3px;
}