/*
Theme Name:   PI Theme
Theme URI:    https://partnersinternational.com
Description:  A standalone, from-scratch WordPress theme built for Partners
              International. No parent theme, no page-builder framework, no
              paid license or subscription of any kind - just plain PHP/HTML/CSS
              that you upload and activate under Appearance > Themes. Keeps the
              site's deep-red brand identity and adds a subtle steampunk/techie
              visual layer (brass hairlines, gear divider, Cinzel + IBM Plex
              Mono type). The homepage is fully self-contained and does not
              depend on any plugin. Existing blog posts and pages continue to
              display correctly as long as WPBakery Page Builder (already
              installed on this site) stays active, since that's what renders
              their saved content - this theme itself has no dependency on it.
Author:       Built for Bill Decker
Author URI:   https://partnersinternational.com
Version:      1.1.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain:  pi-custom
*/

/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --pi-red:        #730C20;   /* exact brand red, sampled from the live site */
  --pi-red-dark:   #4E0714;
  --pi-red-bright: #9E1F2B;
  --pi-brass:      #B08D57;
  --pi-brass-dark: #7C6339;
  --pi-ink:        #1B1714;
  --pi-parchment:  #F3ECE0;
  --pi-teal-glow:  #2FBFAF;
  --pi-max-width:  1200px;
}

html { -webkit-text-size-adjust: 100%; }

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

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

a{ color: var(--pi-red-bright); text-decoration: none; }
a:hover{ color: var(--pi-brass); }

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

h1, h2, h3, h4, .pi-heading{
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
  color: var(--pi-ink);
  margin: 0 0 16px;
}

.pi-button,
button, input[type="submit"]{
  display: inline-block;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  letter-spacing: 0.03em;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--pi-red);
  background: transparent;
  border: 1px solid var(--pi-red);
  padding: 12px 28px;
  border-radius: 2px;
  cursor: pointer;
  transition: all .25s ease;
}
.pi-button:hover, button:hover{
  background: var(--pi-red);
  color: #fff;
  border-color: var(--pi-brass);
  box-shadow: 0 0 10px rgba(47,191,175,0.35);
}

/* ==========================================================================
   2. HEADER
   ========================================================================== */

.pi-site-header{
  background: var(--pi-ink);
  border-bottom: 3px solid var(--pi-brass);
  box-shadow: 0 2px 0 var(--pi-brass-dark);
}

.pi-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  flex-wrap: wrap;
  gap: 16px;
}

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

.screen-reader-text{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* Mobile hamburger button - hidden on desktop, shown below 900px. */
.pi-nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--pi-brass);
  border-radius: 2px;
  cursor: pointer;
}
.pi-nav-toggle span{
  display: block;
  height: 2px;
  width: 22px;
  margin: 0 auto;
  background: var(--pi-parchment);
}

.pi-nav ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  position: relative;
}
.pi-nav li{ position: relative; }
.pi-nav > ul > li > a{
  display: block;
  padding: 14px 14px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--pi-parchment);
}
.pi-nav > ul > li > a:hover,
.pi-nav > ul > li.current-menu-item > a{
  color: var(--pi-brass);
}

/* Small arrow shown on any item that has a dropdown, so it's obvious it can
   be opened - previously there was no visual cue at all. */
.pi-submenu-toggle{
  position: absolute;
  top: 2px; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--pi-parchment);
  font-size: 12px;
  cursor: pointer;
}
.pi-nav li li .pi-submenu-toggle{ top: 2px; right: 4px; }
.pi-submenu-toggle:hover{ color: var(--pi-brass); }
.pi-has-children > a{ padding-right: 34px; }

.pi-nav ul ul{
  display: none;
  position: absolute;
  top: 100%; left: 0;
  min-width: 240px;
  background: var(--pi-ink);
  border-top: 2px solid var(--pi-brass);
  padding: 6px 0;
  z-index: 100;
  /* Removes the hover "dead zone": the dropdown sits flush against the
     parent item so moving the mouse down into it doesn't lose the hover
     state and make the menu disappear. */
  margin-top: 0;
}
/* Hover still opens a dropdown on desktop (mouse users), same as before. */
.pi-nav li:hover > ul{ display: block; }
/* Click/tap also opens it now - this is the part that was missing, and is
   the only way to open a dropdown on a touchscreen. */
.pi-nav li.pi-submenu-open > ul{ display: block; }

.pi-nav ul ul li{ position: relative; }
.pi-nav ul ul li a{
  display: block;
  padding: 12px 16px;
  color: var(--pi-parchment);
  font-size: 13px;
}
.pi-nav ul ul li a:hover{ background: rgba(176,141,87,0.15); color: var(--pi-brass); }
.pi-nav ul ul ul{ top: 0; left: 100%; border-top: none; border-left: 2px solid var(--pi-brass); }

/* ==========================================================================
   3. HERO VIDEO (homepage) - plain, framed, no plugin dependency
   ========================================================================== */

.pi-hero{
  background: var(--pi-parchment);
  padding: 56px 24px;
  text-align: center;
}
.pi-hero-video{
  max-width: 640px;
  margin: 0 auto;
}
.pi-hero-video-frame{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border: 3px solid var(--pi-brass);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.pi-hero-video-frame iframe{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

.pi-intro{
  max-width: 820px;
  margin: 40px auto 0;
  font-size: 19px;
  color: #555;
}

/* ==========================================================================
   4. STEAMPUNK / TECHIE DECORATIVE TOUCHES
   ========================================================================== */

.pi-gear-divider{
  position: relative;
  border-top: 2px solid var(--pi-brass);
  max-width: var(--pi-max-width);
  margin: 48px auto;
}
.pi-gear-divider::after{
  content: "\2699";
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--pi-brass-dark);
  font-size: 22px;
  width: 28px; height: 28px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  border: 2px solid var(--pi-brass);
}

/* ==========================================================================
   5. HOMEPAGE SOLUTIONS COLUMNS
   ========================================================================== */

.pi-solutions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: var(--pi-max-width);
  margin: 0 auto;
  padding: 40px 24px 64px;
  text-align: center;
}
@media (max-width: 767px){
  .pi-solutions{ grid-template-columns: 1fr; }
}
.pi-solutions h3{
  color: var(--pi-red);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pi-solutions ul{
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  color: #555;
}
.pi-solutions li{ margin-bottom: 10px; }

/* ==========================================================================
   6. BLOG / ARCHIVE / SINGLE
   ========================================================================== */

.pi-content-area{
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 24px;
}

article.pi-post{
  border: 1px solid rgba(176,141,87,0.35);
  padding: 24px;
  margin-bottom: 32px;
  transition: border-color .25s ease, transform .2s ease;
}
article.pi-post:hover{
  border-color: var(--pi-brass);
  transform: translateY(-2px);
}
.pi-post-title a{ color: var(--pi-ink); }
.pi-post-title a:hover{ color: var(--pi-red); }
.pi-post-meta{
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
}

.pi-pagination{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.pi-site-footer{
  background: var(--pi-ink);
  color: var(--pi-parchment);
  padding: 48px 24px 24px;
  margin-top: 64px;
  border-top: 3px solid var(--pi-brass);
}
.pi-footer-inner{
  max-width: var(--pi-max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}
.pi-footer-contact a{ color: var(--pi-parchment); }
.pi-footer-social{
  display: flex;
  gap: 16px;
}
.pi-footer-social a{
  color: var(--pi-parchment);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: filter .2s ease, color .2s ease;
}
.pi-footer-social a:hover{
  color: var(--pi-brass);
  filter: drop-shadow(0 0 6px rgba(47,191,175,0.6));
}
.pi-footer-bottom{
  max-width: var(--pi-max-width);
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-align: center;
}

/* ==========================================================================
   8. MOBILE NAV (hamburger + tap-to-open dropdowns)
   ========================================================================== */

@media (max-width: 900px){
  .pi-header-inner{ position: relative; }
  .pi-nav-toggle{ display: flex; }

  /* Whole menu collapses behind the hamburger button. If JavaScript is
     unavailable for some reason, the menu still shows (see .no-js below)
     so navigation is never fully lost. */
  .pi-nav{
    display: none;
    width: 100%;
    order: 3;
  }
  .pi-nav.pi-nav-open{ display: block; }

  .pi-nav > ul{ flex-direction: column; align-items: stretch; }
  .pi-nav ul ul{
    display: none;
    position: static;
    border-top: none;
    border-left: 2px solid var(--pi-brass);
    padding-left: 16px;
    margin-top: 4px;
  }
  .pi-nav li:hover > ul{ display: none; } /* hover means nothing on touch */
  .pi-nav li.pi-submenu-open > ul{ display: block; }
  .pi-nav ul ul ul{ left: 0; border-left: 2px solid var(--pi-brass); }

  .pi-submenu-toggle{ width: 44px; height: 44px; top: 0; right: 0; }

  .pi-header-inner{ flex-direction: column; align-items: flex-start; }
}

/* If JavaScript doesn't run, don't hide the menu behind a hamburger that
   would then have nothing to open it - fall back to always-visible. */
.no-js .pi-nav{ display: block !important; }
.no-js .pi-nav-toggle{ display: none !important; }
.no-js .pi-nav ul ul{ display: none; }
.no-js .pi-nav li:hover > ul{ display: block; }