/*
Theme Name: Green Pine
Theme URI: https://greenpinerecycling.com/
Author: SetMySite
Author URI: https://setmysite.com/
Description: Block theme for Green Pine Recycling. Native WordPress and Gutenberg only, no page builder or premium add-on dependency. Fonts are served locally.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: greenpine
Tags: block-theme, full-site-editing, business, one-column, custom-colors, custom-menu, editor-style, featured-images, accessibility-ready
*/

/* ---------------------------------------------------------------
   1. Base
---------------------------------------------------------------- */

:root {
  --gpr-ink: #152A1D;
  --gpr-ink-soft: #4A5850;
  --gpr-accent: #26744A;
  --gpr-accent-dark: #1C5A39;
  --gpr-accent-bright: #3FA870;
  --gpr-surface: #F2F5F1;
  --gpr-line: #D9E0D8;
  --gpr-radius: 4px;
  --gpr-header-h: 84px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Keyboard focus is visible everywhere, on both grounds. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--gpr-accent-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

.gpr-dark a:focus-visible,
.gpr-dark button:focus-visible { outline-color: #FFFFFF; }

.skip-link:focus {
  background: var(--gpr-ink);
  color: #fff;
  padding: 12px 20px;
  z-index: 9999;
}

/* Keep running text readable. */
p { max-width: 68ch; }
.has-text-align-center p,
.gpr-measure-none p { max-width: none; }

/* ---------------------------------------------------------------
   2. Header
---------------------------------------------------------------- */

.gpr-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: #fff;
  border-bottom: 1px solid var(--gpr-line);
}

.admin-bar .gpr-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .gpr-header { top: 46px; } }

.gpr-header .wp-block-site-logo img { height: 52px; width: auto; }

.gpr-header .wp-block-navigation { gap: 26px; }

.gpr-header .wp-block-navigation .wp-block-navigation-item__content {
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.gpr-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.gpr-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
  border-bottom-color: var(--gpr-accent);
  color: var(--gpr-accent);
}

/* Desktop submenus: a light panel with ink text, hairline, no shadow.
   Colours are forced here because core can stamp the navigation block's own
   colour classes onto the submenu container, which previously left white text
   sitting on a near-white hover background. */
.gpr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
  background-color: #fff !important;
  color: var(--gpr-ink) !important;
  border: 1px solid var(--gpr-line) !important;
  border-radius: var(--gpr-radius);
  box-shadow: 0 10px 24px -18px rgba(21, 42, 29, .55) !important;
  padding: 6px 0;
  min-width: 238px;
}

.gpr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 10px 18px;
  border-bottom: 0;
  color: var(--gpr-ink) !important;
  background-color: transparent;
}

.gpr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.gpr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background-color: var(--gpr-surface) !important;
  color: var(--gpr-accent) !important;
}

.gpr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
  color: var(--gpr-accent) !important;
  box-shadow: inset 3px 0 0 var(--gpr-accent);
}

/* Inside the open mobile overlay the submenu is inline on the dark ground. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 16px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: rgba(255,255,255,.82) !important;
  font-size: 1.05rem;
  padding: 10px 0;
}

/* Phone number in the header bar. */
.gpr-header-phone {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}
.gpr-header-phone a { color: var(--gpr-ink); text-decoration: none; }
.gpr-header-phone a:hover { color: var(--gpr-accent); }

@media (max-width: 1099px) { .gpr-header-phone { display: none; } }

/* The mobile overlay menu. */
.wp-block-navigation__responsive-container.is-menu-open {
  padding: 28px 24px 48px;
  background: var(--gpr-ink) !important;
  color: #fff !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #fff !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 4px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  border-bottom: 1px solid rgba(255,255,255,.14);
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding: 14px 0; font-size: 1.35rem; }

/* ---------------------------------------------------------------
   3. Sections and typography helpers
---------------------------------------------------------------- */

.gpr-eyebrow {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gpr-accent);
  margin-bottom: 14px !important;
}
.gpr-dark .gpr-eyebrow { color: var(--gpr-accent-bright); }

.gpr-lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--gpr-ink-soft);
}
.gpr-dark .gpr-lede { color: rgba(255,255,255,.82); }

/* Dark ground sections. */
.gpr-dark,
.gpr-dark p,
.gpr-dark li { color: rgba(255,255,255,.82); }
.gpr-dark h1, .gpr-dark h2, .gpr-dark h3, .gpr-dark h4, .gpr-dark h5, .gpr-dark h6 { color: #fff; }
.gpr-dark strong { color: #fff; }
.gpr-dark a:not(.wp-block-button__link) { color: var(--gpr-accent-bright); }
.gpr-dark a:not(.wp-block-button__link):hover { color: #fff; }
.gpr-dark hr.wp-block-separator { border-color: rgba(255,255,255,.22) !important; color: rgba(255,255,255,.22) !important; }

/* Hero: a directional scrim, dark where the headline sits and clear where the
   photograph earns its place. Flat wash on phones, where text sits centred. */
.gpr-hero-scrim > .wp-block-cover__background {
  background: linear-gradient(90deg,
    rgba(21,42,29,.90) 0%,
    rgba(21,42,29,.78) 34%,
    rgba(21,42,29,.42) 62%,
    rgba(21,42,29,.28) 100%) !important;
  opacity: 1 !important;
}
@media (max-width: 900px) {
  .gpr-hero-scrim > .wp-block-cover__background { background: rgba(21,42,29,.74) !important; }
}

/* A photo section with a scrim so white type always passes contrast. */
.gpr-scrim { position: relative; }
.gpr-scrim > .wp-block-cover__background,
.gpr-scrim .wp-block-cover__background { background-color: rgba(21,42,29,.72) !important; }

/* Hairline-topped column, used instead of card boxes. */
.gpr-rule-top {
  border-top: 2px solid var(--gpr-ink);
  padding-top: 22px;
}
.gpr-dark .gpr-rule-top { border-top-color: var(--gpr-accent-bright); }

.gpr-rule-accent { border-top: 2px solid var(--gpr-accent); padding-top: 22px; }

/* ---------------------------------------------------------------
   4. Container size guide
---------------------------------------------------------------- */

.gpr-size-card { }
.gpr-size-card img { display: block; width: 100%; height: auto; }

.gpr-size-num {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(2.6rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
  color: var(--gpr-ink);
  margin: 0 0 6px !important;
}
.gpr-size-num span { color: var(--gpr-accent); }

/* Labelled dimension list. */
.gpr-kv { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.gpr-kv li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gpr-line);
  font-size: .95rem;
}
.gpr-kv li strong { font-weight: 600; color: var(--gpr-ink); text-align: right; }
.gpr-kv li span { color: var(--gpr-ink-soft); }
.gpr-dark .gpr-kv li { border-bottom-color: rgba(255,255,255,.18); }
.gpr-dark .gpr-kv li strong { color: #fff; }
.gpr-dark .gpr-kv li span { color: rgba(255,255,255,.7); }

/* ---------------------------------------------------------------
   5. Process steps
---------------------------------------------------------------- */

.gpr-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--gpr-accent);
  color: #fff;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 18px !important;
}
.gpr-dark .gpr-step-num { background: var(--gpr-accent-bright); color: var(--gpr-ink); }

/* ---------------------------------------------------------------
   6. Checklists
---------------------------------------------------------------- */

.gpr-checklist { list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; }
.gpr-checklist li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 12px;
}
.gpr-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 18px;
  height: 10px;
  border-left: 2.5px solid var(--gpr-accent);
  border-bottom: 2.5px solid var(--gpr-accent);
  transform: rotate(-45deg);
}
.gpr-dark .gpr-checklist li::before { border-color: var(--gpr-accent-bright); }

.gpr-crosslist { list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; }
.gpr-crosslist li { position: relative; padding-left: 34px; margin-bottom: 12px; }
.gpr-crosslist li::before,
.gpr-crosslist li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: .68em;
  width: 16px;
  height: 2.5px;
  background: var(--gpr-ink-soft);
}
.gpr-crosslist li::before { transform: rotate(45deg); }
.gpr-crosslist li::after { transform: rotate(-45deg); }

/* ---------------------------------------------------------------
   7. Tables
---------------------------------------------------------------- */

.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th,
.wp-block-table td {
  border: 0;
  border-bottom: 1px solid var(--gpr-line);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
}
.wp-block-table th {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--gpr-surface);
  border-bottom: 2px solid var(--gpr-ink);
}
.wp-block-table tr:last-child td { border-bottom: 0; }

@media (max-width: 781px) {
  .wp-block-table { overflow-x: auto; }
  .wp-block-table table { min-width: 560px; }
}

/* ---------------------------------------------------------------
   8. Buttons
---------------------------------------------------------------- */

.wp-block-button__link { transition: background-color .15s ease, transform .08s ease; }
.wp-block-button__link:active { transform: translateY(1px); }

.wp-block-button.is-style-outline > .wp-block-button__link {
  border-width: 1px;
  border-color: var(--gpr-ink);
  color: var(--gpr-ink);
  background: transparent;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--gpr-ink);
  color: #fff;
}
.gpr-dark .wp-block-button.is-style-outline > .wp-block-button__link,
.gpr-footer .wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: #fff;
  color: #fff;
}
.gpr-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.gpr-footer .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: #fff;
  color: var(--gpr-ink);
}

/* A white button on a dark ground keeps its contrast on hover. */
.gpr-dark .wp-block-button__link.has-background[style*="FFFFFF"]:hover,
.gpr-footer .wp-block-button__link.has-background[style*="FFFFFF"]:hover {
  background-color: var(--gpr-surface) !important;
  color: var(--gpr-ink) !important;
}

/* ---------------------------------------------------------------
   9. Contact Form 7
---------------------------------------------------------------- */

.gpr-form .wpcf7-form p { max-width: none; margin: 0 0 18px; }

.gpr-form label {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
  margin-bottom: 7px;
  color: var(--gpr-ink);
}
.gpr-dark .gpr-form label { color: #fff; }

.gpr-form input[type=text],
.gpr-form input[type=email],
.gpr-form input[type=tel],
.gpr-form input[type=url],
.gpr-form input[type=date],
.gpr-form input[type=number],
.gpr-form select,
.gpr-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: 'Barlow', sans-serif;
  font-size: 1rem;
  color: var(--gpr-ink);
  background: #fff;
  border: 1px solid var(--gpr-line);
  border-radius: var(--gpr-radius);
  appearance: none;
}
.gpr-form select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234A5850' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
}
.gpr-form textarea { min-height: 148px; resize: vertical; }

.gpr-form input[type=file] {
  width: 100%;
  padding: 11px 14px;
  font-family: 'Barlow', sans-serif;
  font-size: .95rem;
  color: var(--gpr-ink-soft);
  background: #fff;
  border: 1px dashed var(--gpr-line);
  border-radius: var(--gpr-radius);
  cursor: pointer;
}
.gpr-form input[type=file]::file-selector-button {
  margin-right: 14px;
  padding: 8px 16px;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  background: var(--gpr-ink);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.gpr-form input[type=file]:hover { border-color: var(--gpr-accent); }
.gpr-form input[type=file]::file-selector-button:hover { background: var(--gpr-accent); }

.gpr-form input:focus,
.gpr-form select:focus,
.gpr-form textarea:focus {
  border-color: var(--gpr-accent);
  outline: 2px solid var(--gpr-accent);
  outline-offset: 0;
}

.gpr-form ::placeholder { color: #8B968F; opacity: 1; }

/* Won with !important because the Elementor kit stylesheet is still
   installed site-wide and restyles every input[type=submit]. */
.gpr-form input.wpcf7-submit,
.gpr-form .wpcf7-submit {
  width: 100%;
  padding: 15px 34px !important;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #fff !important;
  background: var(--gpr-accent) !important;
  background-color: var(--gpr-accent) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--gpr-radius) !important;
  box-shadow: none !important;
  cursor: pointer;
}
.gpr-form input.wpcf7-submit:hover,
.gpr-form .wpcf7-submit:hover { background-color: var(--gpr-accent-dark) !important; }

/* Two and three column form rows. */
.gpr-form .gpr-row { display: grid; gap: 18px; }
@media (min-width: 600px) {
  .gpr-form .gpr-row-2 { grid-template-columns: 1fr 1fr; }
  .gpr-form .gpr-row-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.gpr-form .wpcf7-not-valid-tip { color: #B3261E; font-size: .85rem; margin-top: 5px; }
.gpr-form .wpcf7-response-output {
  margin: 18px 0 0 !important;
  padding: 14px 16px !important;
  border-width: 1px !important;
  border-radius: var(--gpr-radius);
  font-size: .95rem;
}
.gpr-form .wpcf7 form.sent .wpcf7-response-output { border-color: var(--gpr-accent) !important; background: #EDF5F0; color: var(--gpr-ink); }

/* Form on a dark or photo ground sits on its own white panel. */
.gpr-form-panel {
  background: #fff;
  border-radius: var(--gpr-radius);
  padding: clamp(24px, 4vw, 40px);
}

/* ---------------------------------------------------------------
   10. Footer
---------------------------------------------------------------- */

.gpr-footer { background: var(--gpr-ink); color: rgba(255,255,255,.8); }
.gpr-footer h2, .gpr-footer h3, .gpr-footer h4 { color: #fff; }
.gpr-footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.gpr-footer a:hover { color: var(--gpr-accent-bright); text-decoration: underline; }
.gpr-footer .wp-block-site-logo img { height: 56px; width: auto; }

.gpr-footer-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.gpr-footer-list li { margin-bottom: 9px; }

.gpr-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .9rem;
  color: rgba(255,255,255,.6);
}

/* ---------------------------------------------------------------
   11. Utilities
---------------------------------------------------------------- */

.gpr-cover-tall { min-height: clamp(420px, 62vh, 620px); }
.gpr-cover-mid { min-height: clamp(260px, 34vh, 380px); }

.gpr-img-flush img { border-radius: 0 !important; display: block; width: 100%; height: auto; }

.gpr-img-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Equal-height media columns without a card box. */
@media (min-width: 782px) {
  .gpr-cols-stretch > .wp-block-columns { align-items: stretch; }
}

/* Mobile: every multi column layout is single column below 782px.
   Core already does this; this makes the intent explicit and catches
   nested columns that core leaves alone. */
@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
  /* beats the block's inline min-height, which is set in vh */
  .gpr-cover-tall { min-height: 480px !important; }
  .gpr-hero-inner > .gpr-lede,
  .gpr-hero-inner > p { max-width: none; }
  .gpr-hero-text { order: -1; }
}

/* Left-anchored hero copy inside a full-bleed cover. */
.gpr-hero-inner { max-width: 880px; margin-right: auto; }
.gpr-hero-inner > .gpr-lede,
.gpr-hero-inner > p { max-width: 620px; }
.gpr-maxw-680 { max-width: 680px; }
.gpr-maxw-780 { max-width: 780px; }

/* A stacked list of entries separated by hairlines, used instead of
   a row of identical feature cards. */
.gpr-stack > * + * { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--gpr-line); }
.gpr-dark .gpr-stack > * + * { border-top-color: rgba(255,255,255,.18); }

/* Screen reader text. */
.gpr-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}