/*
Theme Name: Prime Flex Parks
Author: Josh Yager
Author URI: https://thedevq.com/
Description: Custom WordPress theme for Prime Flex Parks — flex warehouse leasing, Mentor and Westlake OH.
Version: 2.0.0
Text Domain: devq
DevQ Kit: 485c387 (2026-08-18)
*/

/* -----------------------------------------------------------------------------
 * CSS Variables
 * -------------------------------------------------------------------------- */
:root {
  /* Note: --spacing-small, --spacing-medium, --spacing-large are set dynamically in theme-settings-css.php */

  /* Z-index layers */
  --z-index-dropdown: 3;

  /* Transitions */
  --transition-fast: all 0.1s ease-in-out;
  --transition-default: all 0.3s ease-in-out;

  /* Other */
  --video-aspect-ratio: 56.25%;
  /* 16:9 */
}

/* -----------------------------------------------------------------------------
 * Base Elements
 * -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  position: relative;
  font-family: var(--font2);
  font-weight: var(--body-weight, 400);
  color: var(--bone);
  line-height: var(--body-line-height, 1.6);
  -webkit-font-smoothing: antialiased;
}

p, ul, li {
  font-family: var(--font2);
  font-weight: var(--body-weight, 400);
  color: inherit;
  line-height: var(--body-line-height, 1.6);
}

img {
  max-width: 100%;
}

/* -----------------------------------------------------------------------------
 * Typography
 * -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font1);
  font-weight: var(--heading-weight, 400);
  line-height: var(--heading-line-height, 0.95);
  color: var(--bone);
  margin: 0 0 0.4em;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}



/* -----------------------------------------------------------------------------
 * Layout
 * -------------------------------------------------------------------------- */
.container-fluid {
  max-width: 2400px;
  margin: auto;
}

.videoWrapper {
  position: relative;
  padding-bottom: var(--video-aspect-ratio);
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* -----------------------------------------------------------------------------
 * Buttons
 * -------------------------------------------------------------------------- */
.btn {
  text-decoration: none;
  background: var(--primary);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--button-padding, 12px 28px);
  font-family: var(--font1);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  transition: var(--transition-default);
  border: 1px solid var(--primary);
  border-radius: var(--button-radius, 4px);
  cursor: pointer;
  /* Chunky by default, but never a hard floor. A flat `min-width: 250px` here
     resolves flex items' `min-width: auto` to 250px, so a .btn in a card footer
     or filter bar refuses to shrink and pushes its siblings out of the
     container. min() keeps the look and lets it collapse when space is tight. */
  min-width: min(250px, 100%);
}

.btn i {
  font-size: 14px;
}

.btn:hover {
  background: var(--tertiary);
  color: var(--ink);
  border-color: var(--tertiary);
}

/* Button Variants */
.btn.btn-secondary {
  background: var(--secondary);
  border-color: var(--secondary);
}

.btn.btn-secondary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

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

.btn.btn-tertiary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn.btn-white {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}

.btn.btn-white:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

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

.btn.btn-outline:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn.btn-outline-secondary {
  background: transparent;
  color: #fff;
  border-color: var(--secondary);
}

.btn.btn-outline-secondary:hover {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}

.btn.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.btn.btn-outline-white:hover {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}

/* Header & navigation styles are in template-parts/header/ */
/* Footer styles are in template-parts/footer/ */
/* Mobile menu styles are in template-parts/mobile-menu/ */

/* -----------------------------------------------------------------------------
 * Utility Classes
 * -------------------------------------------------------------------------- */
.mobileonly,
.mobileOnly {
  display: none;
}

/* Section background variants */
.section-light {
  background-color: #f8f7f4;
}

.section-offwhite {
  background-color: #f5f4f0;
}

.section-dark {
  background-color: #1a1a2e;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark p,
.section-dark li {
  color: #fff;
}

.section-dark .cs-topper {
  color: var(--tertiary);
}

/* -----------------------------------------------------------------------------
 * Browser Customization
 * -------------------------------------------------------------------------- */
::selection {
  background: var(--tertiary);
  color: var(--secondary);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--tertiary);
}

/* -----------------------------------------------------------------------------
 * Content Styles
 * -------------------------------------------------------------------------- */
.maincopy ul li {
  list-style: none;
  position: relative;
  margin-bottom: 15px;
}

/* -----------------------------------------------------------------------------
 * Media Queries
 * -------------------------------------------------------------------------- */
@media (max-width: 1199px) {

  /* Utility Classes */
  .mobileonly,
  .mobileOnly {
    display: initial;
  }

  .desktopOnly {
    display: none;
  }
}

/* Mobile Styles - 767px and below */
@media (max-width: 767px) {

  .btn {
    width: 100%;
    min-width: unset;
  }

  /* Typography */
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2.25rem;
  }

  h3 {
    font-size: 2rem;
  }

  h4 {
    font-size: 1.75rem;
  }

  h5 {
    font-size: 1.5rem;
  }

  .bigger-title {
    font-size: 3rem;
  }

  .sub-title {
    font-size: 20px;
  }
}
/* -----------------------------------------------------------------------------
 * Header / Footer -- scaffold baseline
 *
 * Deliberately plain. Every site rewrites header.php / footer.php to spec and
 * replaces this block; it exists so a freshly scaffolded site is legible rather
 * than unstyled.
 * -------------------------------------------------------------------------- */

.devq-header-wrap {
  position: relative;
  background: #fff;
  z-index: 100;
}

.devq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 0;
}

.devq-header-logo a {
  display: inline-block;
  text-decoration: none;
}

.devq-header-logo img {
  display: block;
  max-height: 60px;
  width: auto;
}

.devq-header-wordmark {
  font-family: var(--font1);
  font-size: 22px;
  font-weight: 400;
  color: var(--primary);
  text-decoration: none;
}

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

.devq-desktop-nav li {
  position: relative;
}

.devq-desktop-nav a {
  text-decoration: none;
  color: inherit;
  font-family: var(--font2);
}

.devq-desktop-nav .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-default);
  z-index: var(--z-index-dropdown);
}

.devq-desktop-nav li:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.devq-desktop-nav .dropdown-menu a {
  display: block;
  padding: 8px 16px;
}

.devq-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Mobile menu ------------------------------------------------------------- */

.devq-mobile-menu {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-default);
  z-index: 999;
}

.devq-mobile-menu.is-active {
  opacity: 1;
  visibility: visible;
}

.devq-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

.devq-mobile-logo img {
  max-height: 56px;
  width: auto;
}

.devq-mobile-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.devq-mobile-nav a {
  display: block;
  padding: 10px 0;
  font-size: 20px;
  text-decoration: none;
  color: inherit;
}

.devq-mobile-contact a {
  text-decoration: none;
  color: inherit;
  font-weight: 400;
}

/* Footer ------------------------------------------------------------------ */

.devq-footer {
  background: var(--secondary);
  padding: 32px 0;
  color: #fff;
}

.devq-footer a {
  color: #fff;
  text-decoration: none;
}

.devq-footer a:hover {
  opacity: 0.75;
}

.devq-footer-menu,
.devq-footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.devq-footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}

.devq-footer-copyright {
  margin: 0;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

/* =============================================================================
 * Prime Flex Parks — site design layer
 * Dark industrial: near-black ground, bone text, gold accent, condensed display.
 * ========================================================================== */

:root {
  --ink:        #0f0f0f;  /* page ground */
  --ink-2:      #1a1919;  /* raised panel */
  --ink-3:      #252320;  /* inset panel */
  --ink-4:      #0a0a0a;  /* footer */
  --line:       #2e2b27;  /* hairline */
  --bone:       #f0ece3;  /* primary text */
  --bone-dim:   #c1bab3;  /* secondary text */
  --bone-faint: #847d75;  /* tertiary / legal -- 4.88:1 on --ink-4, passes AA */
  --paper:      #ffffff;  /* form panels */
  --paper-line: #d0ccc7;
  --paper-dim:  #6b6560;
}

/* --- Layout ---------------------------------------------------------------- */
.container { max-width: 1340px; }

/* --- Type scale ------------------------------------------------------------ */
h1 { font-size: 5.5rem; letter-spacing: -0.015em; }
h2 { font-size: 4.375rem; letter-spacing: -0.015em; }
h3 { font-size: 2.25rem; letter-spacing: -0.01em; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

@media (max-width: 1199px) {
  h1 { font-size: 4.25rem; }
  h2 { font-size: 3.25rem; }
  h3 { font-size: 1.875rem; }
}
@media (max-width: 767px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.5rem; }
  h3 { font-size: 1.625rem; }
  h4 { font-size: 1.25rem; }
}

a { color: var(--primary); }
a:hover { color: var(--tertiary); }

/* --- Shared: section eyebrow (rule + gold caps) ---------------------------- */
.pfp-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.pfp-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--primary);
  flex-shrink: 0;
}
.pfp-eyebrow span {
  font-family: var(--font1);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--primary);
}

/* --- Shared: display heading ----------------------------------------------- */
.pfp-display { text-transform: uppercase; }
.pfp-display em { font-style: normal; color: var(--bone-dim); }
.pfp-display strong { font-weight: inherit; color: var(--primary); }

/* --- Shared: lede ---------------------------------------------------------- */
.pfp-lede {
  color: var(--bone-dim);
  font-weight: 400;
  max-width: 46rem;
}

/* --- Shared: square gold bullet list --------------------------------------- */
.pfp-ticks { list-style: none; margin: 0; padding: 0; }
.pfp-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 5px 0;
  color: var(--bone);
  font-size: 0.9375rem;
}
.pfp-ticks li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  background: var(--primary);
  flex-shrink: 0;
}

/* --- Shared: status badge --------------------------------------------------- */
.pfp-badge {
  display: inline-block;
  background: var(--primary);
  color: var(--ink);
  font-family: var(--font1);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 12px;
}

/* --- Buttons: outline variant on dark -------------------------------------- */
.btn.btn-outline-white {
  background: transparent;
  color: var(--bone);
  border-color: #bdb8b0;
}
.btn.btn-outline-white:hover {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn.btn-outline:hover {
  background: var(--primary);
  color: var(--ink);
}
/* Buttons sitting in constrained rows must be able to shrink. */
.pfp-btnrow .btn { min-width: 0; flex: 1; }
.pfp-btnrow { display: flex; gap: 16px; flex-wrap: wrap; }

/* --- Forms on white panels (Gravity Forms) --------------------------------- */
.pfp-formpanel {
  background: var(--paper);
  padding: 34px;
}
.pfp-formpanel h2,
.pfp-formpanel h3 {
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pfp-formpanel .pfp-formnote {
  color: var(--paper-dim);
  font-size: 0.875rem;
  margin: -6px 0 22px;
}

/* Gravity drives the field grid off its own custom properties (40px row gap by
   default), so set the variables AND the longhand — the orbital theme sets both. */
.pfp-formpanel .gform_wrapper,
.pfp-formpanel .gform_wrapper .gform_fields {
  --gf-form-gap-y: 16px !important;
  --gf-form-gap-x: 16px !important;
}
.pfp-formpanel .gform_wrapper .gform_fields {
  row-gap: 16px !important;
  column-gap: 16px !important;
}

.pfp-formpanel .gform_wrapper .gfield_label { display: none !important; }
.pfp-formpanel .gform_wrapper input[type="text"],
.pfp-formpanel .gform_wrapper input[type="email"],
.pfp-formpanel .gform_wrapper input[type="tel"],
.pfp-formpanel .gform_wrapper select,
.pfp-formpanel .gform_wrapper textarea {
  width: 100% !important;
  background: var(--paper) !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  padding: 13px 16px !important;
  font-family: var(--font2) !important;
  font-size: 0.875rem !important;
  transition: border-color 0.2s ease !important;
}
.pfp-formpanel .gform_wrapper input:focus,
.pfp-formpanel .gform_wrapper select:focus,
.pfp-formpanel .gform_wrapper textarea:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
}
.pfp-formpanel .gform_wrapper ::placeholder { color: #aaa5a0 !important; opacity: 1 !important; }

/* Gravity's theme pins .gfield_select to a fixed height; with our padding that
   squeezes the selected option out of the content box and the field renders
   blank. Let it size to its content and draw our own chevron. */
.pfp-formpanel .gform_wrapper select {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b6560' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 42px !important;
}

.pfp-formpanel .gform_wrapper select option {
  color: var(--ink) !important;
  background: var(--paper) !important;
}
.pfp-formpanel .gform_wrapper textarea { resize: none !important; }
.pfp-formpanel .gform_wrapper .gform_footer,
.pfp-formpanel .gform_wrapper .gform-footer {
  margin: 16px 0 0 !important;
  padding: 0 !important;
  display: block !important;
}

.pfp-formpanel .gform_wrapper input[type="submit"],
.pfp-formpanel .gform_wrapper .gform_button,
.pfp-formpanel .gform_wrapper .gform-footer button,
.pfp-formpanel .gform_wrapper .gform_footer button {
  width: 100% !important;
  max-width: none !important;
  background: var(--primary) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font1) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 16px 24px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}
.pfp-formpanel .gform_wrapper input[type="submit"]:hover,
.pfp-formpanel .gform_wrapper .gform_button:hover,
.pfp-formpanel .gform_wrapper .gform-footer button:hover,
.pfp-formpanel .gform_wrapper .gform_footer button:hover {
  background: var(--tertiary) !important;
}
.pfp-formpanel .gform_wrapper .gform_confirmation_message {
  color: var(--ink) !important;
  font-size: 1rem !important;
}
.pfp-formpanel .gform_wrapper .gfield_required { color: #b1483a !important; }
.pfp-formpanel .gform_wrapper .validation_message {
  color: #b1483a !important;
  font-size: 0.8125rem !important;
  padding: 4px 0 0 !important;
  border: none !important;
  background: none !important;
}

/* ---------------------------------------------------------------------------
   Sideways overflow guard

   AOS parks a fade-left element 100px to the right of its final position until
   it scrolls into view. On a full-width block that makes the document wider
   than the viewport, so the whole page scrolls sideways -- most obvious on a
   phone, but it happens at every width. Clipping at the block wrapper lets the
   element still slide in from the edge without widening the document.

   overflow-x: clip rather than hidden, because clip does not create a scroll
   container and so cannot break position: sticky inside a block.
--------------------------------------------------------------------------- */
.container-fluid {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  .container-fluid {
    overflow-x: hidden;
  }
}

/* ---------------------------------------------------------------------------
   fade-left: slide in from inside the gutter, not from outside the viewport

   The clip above stops the document from scrolling, but the element is still
   laid out 100px past the right edge until it animates -- 70px outside the
   container at every width below 1440, and 20px at 1440. Anything that clips a
   composited (transformed) child unreliably, iOS Safari included, leaks that
   overflow back and the page scrolls sideways on a phone.

   Shortening the travel to 24px keeps the whole animation inside the 30px
   container gutter, so nothing ever sits outside the container and there is no
   overflow left to clip. The clip above stays as a backstop.
--------------------------------------------------------------------------- */
[data-aos="fade-left"] {
  transform: translate3d(24px, 0, 0);
}
[data-aos="fade-left"].aos-animate {
  transform: translate3d(0, 0, 0);
}

/* ---------------------------------------------------------------------------
   Plain content pages

   page.php drops the_content() straight into <main>, which is right for a page
   built out of blocks -- every block carries its own .container-fluid. A page
   written in core paragraphs and headings (the legal pages) has no wrapper at
   all, so give those elements the container width and the site's reading
   styles instead of letting them run edge to edge.
--------------------------------------------------------------------------- */
.pfp-site-main > p,
.pfp-site-main > h1,
.pfp-site-main > h2,
.pfp-site-main > h3,
.pfp-site-main > h4,
.pfp-site-main > ul,
.pfp-site-main > ol,
.pfp-site-main > hr,
.pfp-site-main > blockquote,
.pfp-site-main > figure,
.pfp-site-main > table {
  /* Line the reading column up with the left edge of .container (max-width
     1340 + 30px gutter) so body copy starts under the banner heading rather
     than floating in the middle of the page. Below 1340 it falls back to the
     plain 30px gutter. */
  width: min(860px, 100% - 60px);
  margin-left: max(30px, calc(50% - 640px));
  margin-right: auto;
}

.pfp-site-main > :first-child { margin-top: 72px; }
.pfp-site-main > :last-child  { margin-bottom: 96px; }

.pfp-site-main > p,
.pfp-site-main > ul,
.pfp-site-main > ol {
  color: var(--bone-dim);
  margin-bottom: 1.25em;
}

.pfp-site-main > h2 { font-size: 2.25rem; margin-top: 2.25em; margin-bottom: 0.5em; }
.pfp-site-main > h3 { font-size: 1.5rem;  margin-top: 1.75em; margin-bottom: 0.5em; }

.pfp-site-main > ul,
.pfp-site-main > ol { padding-left: 60px; }
.pfp-site-main > ul li,
.pfp-site-main > ol li { margin-bottom: 0.5em; }

.pfp-site-main > hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-top: 3em;
  margin-bottom: 3em;
}

@media (max-width: 767px) {
  .pfp-site-main > h2 { font-size: 1.625rem; }
  .pfp-site-main > h3 { font-size: 1.25rem; }
}

/* --- Footer legal row ------------------------------------------------------ */
.pfp-footer-legalmenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.pfp-footer-legalmenu a {
  color: var(--bone-faint);
  font-size: 0.875rem;
  text-decoration: none;
}
.pfp-footer-legalmenu a:hover { color: var(--primary); }