/* ============================================================
   INNER PAGE LAYOUT CSS
   Applies to all pages except the homepage
   ============================================================ */

/* Hero banner */
.page-hero {
  background: #002d74;
  padding: 60px 0;
  text-align: center;
}
.page-hero h1 {
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

/* Light hero variant — title on white, matching the live /services/
   page (navy #002d74, 60px, centered, short green underline) instead of
   the white-on-blue band. Scoped via the page-hero-light modifier so
   other inner pages keep the blue hero. */
.page-hero-light {
  background: #ffffff;
  padding: 40px 0 0;
}
.page-hero-light h1 {
  color: #002d74;
  font-size: 60px;
  line-height: 1.1;
}
.page-hero-light .hero-underline {
  width: 120px;
  height: 0;
  border-top: 3px solid #7fbc42;
  margin: 18px auto 0;
}

/* Main content wrapper */
.inner-page-content {
  background: #ffffff;
  padding: 60px 0;
}
.inner-page-content .page-container {
  max-width: 1160px;
}

/* Typography inside content */
.inner-page-content h1 {
  display: none; /* H1 moved to hero banner */
}
.inner-page-content h2 {
  font-size: 1.7rem;
  font-weight: 500;
  color: #002d74;
  margin: 40px 0 14px;
  line-height: 1.25;
}
.inner-page-content h2:first-child {
  margin-top: 0;
}
/* Headings that are links must stay the navy h2 color, not the green
   body-link color. Matches live (h2 link = #002d74). */
.inner-page-content h2 a,
.inner-page-content h3 a {
  color: #002d74;
  text-decoration: none;
}
.inner-page-content h2 a:hover,
.inner-page-content h3 a:hover { color: #46711b; }
.inner-page-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #002d74;
  margin: 28px 0 10px;
}
.inner-page-content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #002d74;
  margin: 20px 0 8px;
}
.inner-page-content p {
  font-size: 16px;
  line-height: 1.75;
  color: #3a3a3a;
  margin-bottom: 18px;
}
.inner-page-content a {
  color: #46711b;
  text-decoration: none;
}
.inner-page-content a:hover { color: #002d74; }
.inner-page-content strong { color: inherit; }

/* Lists */
.inner-page-content ul,
.inner-page-content ol {
  margin: 0 0 20px 0;
  padding-left: 24px;
}
.inner-page-content li {
  font-size: 16px;
  line-height: 1.75;
  color: #3a3a3a;
  margin-bottom: 8px;
}
.inner-page-content li a { color: #46711b; }
.inner-page-content li a:hover { color: #002d74; }
.inner-page-content li strong { color: inherit; }

/* Images inside content (global default — centered block, full width).
   Other inner pages embed large 1000px photos that rely on this rule,
   so it must stay unchanged. The services-listing row layout is scoped
   separately below via .services-list. */
.inner-page-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 28px auto;
}

/* Contact section (green) — same as homepage */
.section-contact {
  background: #46711b;
  padding: 60px 0;
}
.contact-inner {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}
.contact-info { flex: 1; }
.contact-info h2 {
  font-size: 1.8rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 20px;
}
.contact-info p {
  font-size: 16px;
  line-height: 1.7;
  color: #ffffff;
  margin-bottom: 12px;
}
.contact-info a {
  color: #ffffff;
  text-decoration: none;
}
.contact-info a:hover { text-decoration: underline; }
.contact-form { flex: 1; }
.contact-form .form-field { margin-bottom: 12px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  border: none;
  box-sizing: border-box;
  background: #ffffff;
}
.contact-form textarea { resize: vertical; }
.contact-form button[type="submit"] {
  background: #002d74;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 40px;
  border: none;
  cursor: pointer;
}
.contact-form button[type="submit"]:hover { background: #001a50; }

/* Areas served (dark blue) — same as homepage */
.section-areas-served {
  background: #002d74;
  padding: 50px 0;
}
.section-areas-served h2 {
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 4px;
  color: #ffffff;
  margin-bottom: 30px;
}
.areas-grid {
  display: flex;
  justify-content: center;
  gap: 80px;
}
.areas-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.areas-col a {
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
}
.areas-col a:hover { color: #7fbc42; }

/* Shared container (used on all inner pages) */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ============================================================
   SERVICES LISTING PAGE — image-left rows
   Scoped to .inner-page-content.services-list so ONLY the /services/
   index gets the float layout. Each image floats left; the heading and
   copy wrap to its right. clear:both forces every image onto a fresh
   row regardless of how short the preceding copy is. display:flow-root
   contains the floats so the contact section below is unaffected.
   Mirrors the live conroyslawnandlandscape.com/services/ layout.
   ============================================================ */
/* Live row geometry: 1000px content row, ~290px image column, ~630px
   text column. Constrain this page's container to 1000px so the copy
   column doesn't stretch to the full inner-page width. */
.services-list .page-container {
  max-width: 1000px;
}
/* Two-column row: image (290px) left, copy column (~630px) right, an 80px
   gutter between — mirrors the live page exactly. 20px vertical padding +
   40px row gap reproduces the live row pitch (~262px). */
.service-row {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  padding: 20px 0;
  margin-bottom: 40px;
}
.service-row:last-child { margin-bottom: 0; }
.service-media { flex: 0 0 290px; }
.service-media img {
  width: 290px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}
.service-body { flex: 1; min-width: 0; }
.service-body h2 {
  font-size: 24px;
  font-weight: 500;
  color: #002d74;
  margin: 0 0 20px;
  line-height: 1.25;
}
.service-body h2 a { color: #002d74; text-decoration: none; }
.service-body h2 a:hover { color: #46711b; }
.service-body p {
  font-size: 16px;
  line-height: 1.857;
  color: #3a3a3a;
  margin: 0 0 20px;
}
.service-body p:last-child { margin-bottom: 0; }
.service-body ul {
  list-style: disc;
  margin: 0 0 0 48px;
  padding: 0;
}
.service-body ul:last-child { margin-bottom: 0; }
.service-body li {
  color: #3a3a3a;
  font-size: 16px;
  line-height: 1.857;
  margin-bottom: 0;
}
.service-body li a { color: #46711b; text-decoration: none; }
.service-body li a:hover { color: #002d74; }

/* ============================================================
   ABOUT PAGE — text left (67%), portrait image right (33%),
   in a 1000px centered row. Mirrors the live /about/ layout.
   ============================================================ */
.about-page-row {
  display: flex;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
}
.about-page-text {
  flex: 0 0 67%;
  max-width: 67%;
  box-sizing: border-box;
  padding: 0 20px;
}
.about-page-text p {
  line-height: 1.857;
  margin: 0 0 25.6px;
}
.about-page-text p:last-child { margin-bottom: 0; }
.about-page-media {
  flex: 0 0 33%;
  box-sizing: border-box;
  text-align: center;
}
.about-page-media img {
  width: 254px;
  max-width: 100%;
  height: auto;
  display: inline-block;
  margin: 0;
}
@media (max-width: 768px) {
  .about-page-row { flex-direction: column; gap: 24px; }
  .about-page-text, .about-page-media { flex: 1 1 100%; max-width: 100%; padding: 0; }
}

/* ============================================================
   CONTACT PAGE — light hero, centered cities subtitle, then a
   GET IN TOUCH two-column row: info (left) + quote form (right).
   Mirrors the live /contact/ layout (1000px row, 500px columns).
   ============================================================ */
.contact-page-cities {
  text-align: center;
  font-size: 16px;
  line-height: 1.857;
  color: #3a3a3a;
  margin: 0 0 40px;
}
.contact-page-row {
  display: flex;
  max-width: 1000px;
  margin: 90px auto 0;
  align-items: flex-start;
}
.contact-page-left {
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
  padding-right: 40px;
}
.contact-page-left h2 {
  font-size: 24px;
  font-weight: 500;
  color: #002d74;
  margin: 0 0 20px;
  line-height: 1.3;
}
.contact-page-left p {
  font-size: 16px;
  line-height: 1.857;
  color: #3a3a3a;
  margin: 0 0 12px;
}
.contact-page-left a { color: #3a3a3a; text-decoration: none; }
.contact-page-left a:hover { color: #46711b; }
.contact-page-social { margin-top: 24px; display: flex; gap: 14px; align-items: center; }
.contact-page-social a, .contact-page-social span { display: inline-flex; line-height: 0; }
.contact-page-social svg { width: 26px; height: 26px; fill: #b3b3b3; display: block; transition: fill .15s; }
.contact-page-social a:hover svg { fill: #7fbc42; }
.contact-page-right { flex: 0 0 50%; max-width: 50%; box-sizing: border-box; }
.contact-page-right form input,
.contact-page-right form select,
.contact-page-right form textarea {
  width: 100%;
  border: 1px solid #cccccc;
  background: #fafafa;
  padding: 5px;
  font-size: 16px;
  border-radius: 2px;
  box-sizing: border-box;
  margin-bottom: 12px;
  font-family: 'Raleway', sans-serif;
  color: #555555;
}
.contact-page-right .form-row { display: flex; gap: 12px; }
.contact-page-right .form-row input { flex: 1; }
.contact-page-right textarea { resize: vertical; }
.contact-page-right button[type="submit"] {
  background: #002d74;
  color: #ffffff;
  border: none;
  padding: 20px 45px;
  font-size: 15px;
  font-family: 'Raleway', sans-serif;
  cursor: pointer;
}
.contact-page-right button[type="submit"]:hover { background: #001a50; }
@media (max-width: 768px) {
  .contact-page-row { flex-direction: column; }
  .contact-page-left, .contact-page-right { flex: 1 1 100%; max-width: 100%; padding-right: 0; }
  .contact-page-left { margin-bottom: 24px; }
}

/* ============================================================
   SERVICE DETAIL PAGES — full-width hero image banner with the
   navy page title below it (matches live service pages). The
   per-page image is set inline on .svc-hero-media.
   ============================================================ */
.svc-hero-media {
  width: 100%;
  height: 650px;
  background-size: cover;
  background-position: center;
}
.svc-hero-img {
  width: 100%;
  height: 650px;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .svc-hero-media { height: 300px; }
  .svc-hero-img { height: 300px; }
}

/* Service detail: text-left / image-right rows (e.g. Landscape Design).
   Live geometry: ~960px row, 560px copy column, 360px image, 40px gap. */
.svc-split {
  display: flex;
  max-width: 960px;
  margin: 0 auto 40px;
  gap: 40px;
  align-items: flex-start;
}
.svc-split-text { flex: 1; min-width: 0; }
.svc-split-text h2 { margin-top: 0; }
.svc-split-media { flex: 0 0 360px; max-width: 360px; }
.svc-split-media img { width: 100%; height: auto; display: block; margin: 0; }
@media (max-width: 768px) {
  .svc-split { flex-direction: column; gap: 16px; }
  .svc-split-media { flex: 1 1 100%; max-width: 100%; }
}
/* Commercial variant: full 1160 row, wide copy + 440px image (Commercial Lawn Care) */
.svc-split-comm { max-width: 1160px; }
.svc-split-comm .svc-split-media { flex: 0 0 440px; max-width: 440px; }

/* Floated-image content sections (Colleyville/location sub-pages): the image
   floats to the upper-right, text wraps beside it, then reclaims FULL width
   below the image — matches live's WordPress layout (not a rigid 2-column). */
.svc-floatsec { margin: 0 auto 34px; }
.svc-floatsec::after { content: ""; display: block; clear: both; }
.svc-floatsec > h2 { margin-top: 0; }
img.svc-float { float: right; width: 360px; height: auto; margin: 4px 0 18px 36px; }
@media (max-width: 768px) { img.svc-float { float: none; width: 100%; margin: 0 0 16px; } }

/* Image-LEFT rows (e.g. location pages' "Our Services" list): 290px image
   left, copy right, 960px row. */
.svc-il { display: flex; max-width: 960px; margin: 0 auto 40px; gap: 40px; align-items: flex-start; }
.svc-il-media { flex: 0 0 290px; max-width: 290px; }
.svc-il-media img { width: 100%; height: auto; display: block; margin: 0; }
.svc-il-body { flex: 1; min-width: 0; }
.svc-il-body h2, .svc-il-body h3 { margin-top: 0; }
@media (max-width: 768px) {
  .svc-il { flex-direction: column; gap: 16px; }
  .svc-il-media { flex: 1 1 100%; max-width: 100%; }
}

/* Two equal side-by-side columns (e.g. Serving Keller | North Texas Challenges).
   Live geometry: two ~580px columns, full ~1160px row. */
.svc-twocol { display: flex; max-width: 1160px; margin: 0 auto 40px; gap: 40px; align-items: flex-start; }
.svc-twocol-col { flex: 1; min-width: 0; }
.svc-twocol-col h2 { margin-top: 0; }
@media (max-width: 768px) { .svc-twocol { flex-direction: column; gap: 24px; } }

/* 3-column service grid (e.g. "WE TAKE CARE OF EVERYTHING" 9-card block).
   Live geometry: three ~353px cards per row, ~1080px grid. */
.svc-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1120px; margin: 70px auto 10px; }
.svc-grid3 .svc-grid-card { background: #e8e8e8; padding: 20px; text-align: center; }
.svc-grid3 .svc-grid-card h3 { margin: 0 0 8px; text-align: center; }
.svc-grid3 .svc-grid-card p { margin: 0; text-align: center; }
@media (max-width: 900px) { .svc-grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid3 { grid-template-columns: 1fr; } }

/* Centered, constrained section heading (e.g. WE TAKE CARE OF EVERYTHING) */
.inner-page-content h2.svc-center { text-align: center; max-width: 760px; margin: 0 auto 20px; }

/* ===== Section vertical rhythm — replicates live's Beaver Builder row gaps.
   Live: ~80px white space above most sections, ~104px before sections that
   follow a two-column / split row. Applies to every inner service page. ===== */
.inner-page-content .page-container > h2 { margin-top: 104px; }
.inner-page-content .page-container > h2.svc-center { margin-top: 80px; }
.inner-page-content .svc-split { margin-top: 80px; }
.inner-page-content .svc-twocol { margin-top: 80px; }

/* Responsive */
@media (max-width: 768px) {
  .page-hero { padding: 40px 0; }
  .page-hero h1 { font-size: 1.6rem; }
  .inner-page-content { padding: 40px 0; }
  .contact-inner { flex-direction: column; }
  .areas-grid { flex-direction: column; gap: 20px; align-items: center; }
  /* Tablet: tighter gutter + smaller image column. */
  .service-row { gap: 40px; }
  .service-media { flex: 0 0 260px; }
  .service-media img { width: 260px; }
  .page-hero-light h1 { font-size: 2.2rem; }
}

/* Phones: stack the image above its heading/copy. */
@media (max-width: 600px) {
  .service-row {
    flex-direction: column;
    gap: 16px;
    padding: 12px 0;
    margin-bottom: 24px;
  }
  .service-media { flex: none; width: 100%; }
  .service-media img { width: 100%; }
  .service-body ul { margin-left: 24px; }
}

/* ============================================================
   OUR WORK — galleries + hub category cards
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
}
.gallery-item { display: block; line-height: 0; overflow: hidden; cursor: zoom-in; }
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.gallery-item:hover img { transform: scale(1.05); }

/* ============================================================
   Gallery lightbox (click a photo to open + navigate)
   ============================================================ */
.glb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 18, 46, 0.93);
  padding: 24px;
  box-sizing: border-box;
}
.glb-overlay[hidden] { display: none; }
.glb-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.glb-img {
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.5);
}
.glb-caption {
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  margin-top: 14px;
  max-width: 80vw;
}
.glb-close, .glb-prev, .glb-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease;
}
.glb-close:hover, .glb-prev:hover, .glb-next:hover { background: #7fbc42; }
.glb-close:focus-visible, .glb-prev:focus-visible, .glb-next:focus-visible {
  outline: 3px solid #7fbc42;
  outline-offset: 2px;
}
.glb-close { top: 16px; right: 20px; width: 48px; height: 48px; font-size: 30px; }
.glb-prev, .glb-next { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 30px; }
.glb-prev { left: 20px; }
.glb-next { right: 20px; }
.glb-counter {
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
}
@media (max-width: 768px) {
  .glb-prev, .glb-next { width: 44px; height: 44px; font-size: 24px; }
  .glb-prev { left: 8px; }
  .glb-next { right: 8px; }
  .glb-close { top: 8px; right: 8px; }
  .glb-img { max-height: 74vh; }
}

/* Our Work hub — large stacked cards, each a 2-image fade slideshow with a
   centered LABEL / VIEW ALL overlay (matches live /our-work/). */
.work-hub { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.work-card { position: relative; display: block; width: 100%; overflow: hidden; text-decoration: none; background: #002d74; }
.work-card-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; animation: workFade 12s infinite;
}
.work-card-slide:nth-child(2) { animation-delay: 6s; }
@keyframes workFade { 0%{opacity:1} 46%{opacity:1} 50%{opacity:0} 96%{opacity:0} 100%{opacity:1} }
.work-card-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(0,0,0,0.18); text-align: center;
}
.work-card-title { color: #fff; font-family: 'Raleway', sans-serif; font-size: 34px; font-weight: 500; letter-spacing: 3px; }
.work-card-line { width: 320px; max-width: 55%; height: 0; border-top: 1px solid rgba(255,255,255,0.85); }
.work-card-viewall { color: #fff; font-family: 'Raleway', sans-serif; font-size: 15px; letter-spacing: 2px; }
@media (max-width: 768px) { .work-card-title { font-size: 24px; } }
@media (min-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Blog post (single) — featured image on top, navy left-aligned
   title below, ~907px content column. Mirrors live posts.
   ============================================================ */
.blog-post .page-container { max-width: 947px; }
.blog-post h1 {
  display: block;
  font-size: 60px;
  font-weight: 500;
  color: #002d74;
  line-height: 1.1;
  text-align: left;
  margin: 20px 0 24px;
}
.blog-post figure { margin: 0; }
.blog-post figure img,
.blog-post > .page-container > img { width: 100%; height: auto; display: block; margin: 0; }
.blog-post .post-breadcrumb { color: #46711b; font-size: 14px; margin: 0 0 18px; }
.blog-post .post-breadcrumb a { color: #46711b; text-decoration: none; }
.blog-post .post-breadcrumb a:hover { color: #002d74; }

/* ============================================================
   Landscaping Tips — blog index (3-column card grid)
   Mirrors live: 280px cards, 1px #e6e6e6 border, image-top (3:2),
   navy 20px titles, 14px date + excerpt. Posts are distributed
   round-robin into 3 columns (col 1 = posts 1,4,7,10 …) to match
   the live masonry order.
   ============================================================ */
.tips-index .page-container { max-width: 1000px; }
.tips-index .tip-grid { display: flex; gap: 60px; align-items: flex-start; }
.tips-index .tip-col { flex: 1; display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.tips-index .tip-card { border: 1px solid #e6e6e6; background: #ffffff; }
.tips-index .tip-thumb { display: block; line-height: 0; }
.tips-index .tip-thumb img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; }
.tips-index .tip-card-body { padding: 20px; }
.tips-index .tip-title { font-family: 'Raleway', sans-serif; font-size: 20px; font-weight: 500; line-height: 1.3; margin: 0 0 10px; }
.tips-index .tip-title a { color: #002d74; text-decoration: none; }
.tips-index .tip-title a:hover { color: #46711b; }
.tips-index .tip-date { font-size: 14px; line-height: 1.57; color: #3a3a3a; margin: 0 0 10px; }
.tips-index .tip-excerpt { font-size: 14px; line-height: 1.57; color: #3a3a3a; margin: 0; }

/* Pagination (matches live .page-numbers) */
.tip-pagination { margin-top: 50px; }
.tip-pagination ul.page-numbers { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; }
.tip-pagination ul.page-numbers li { margin: 0; }
.tip-pagination .page-numbers .page-numbers { display: inline-block; font-size: 16px; line-height: 1.4; padding: 5px 10px; border: 1px solid #e6e6e6; text-decoration: none; }
.tip-pagination span.current { background: #f5f5f5; color: #3a3a3a; }
.tip-pagination a.page-numbers { color: #46711b; background: #ffffff; }
.tip-pagination a.page-numbers:hover { background: #f5f5f5; }

/* Responsive */
@media (max-width: 900px) {
  .tips-index .tip-grid { gap: 30px; }
}
@media (max-width: 680px) {
  .tips-index .tip-grid { flex-direction: column; }
}

/* ===== Landscaping Tips guide pages (problem-identification long-form) ===== */
.guide-page .page-container{max-width:947px;}
.guide-page h1{display:block;font-size:60px;font-weight:500;color:#002d74;line-height:1.1;text-align:center;margin:10px 0 30px;}
.guide-page h2{color:#002d74;}
.guide-page p img{float:right;width:360px;height:auto;margin:6px 0 16px 28px;border-radius:2px;}
.guide-page ul,.guide-page ol{overflow:hidden;}