/* Guardian Property Management — custom design layer over the YOLO Tailwind kit.
   Everything references the kit's CSS variables, so re-theming in wp-admin still works. */

/* Heroes */
.gpm-hero{min-height:min(82vh,800px);display:flex;align-items:center}
.gpm-hero-sub{min-height:min(44vh,420px);display:flex;align-items:center}
.gpm-overlay{background:linear-gradient(100deg,
  color-mix(in srgb, var(--color-contrast) 88%, transparent) 0%,
  color-mix(in srgb, var(--color-contrast) 80%, transparent) 55%,
  color-mix(in srgb, var(--color-brand) 40%, transparent) 100%)}
/* Text sitting on a photo: soft shadow so a bright patch in the image can never wash it out */
.gpm-hero-text{text-shadow:0 2px 6px rgba(4,15,28,.45),0 0 40px rgba(4,15,28,.35)}
/* Outline buttons on photos get a translucent dark backdrop */
.gpm-btn-glass{background:color-mix(in srgb, var(--color-contrast) 45%, transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* Eyebrow label with a gold rule */
.gpm-eyebrow{display:inline-flex;align-items:center;gap:.75rem;font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.gpm-eyebrow::before{content:"";width:2.75rem;height:2px;background:var(--color-accent);flex:none}

/* Display headings: tighter, more deliberate */
.gpm-display{letter-spacing:-.02em}

/* Hairlines on dark surfaces */
.gpm-hairline{border-color:color-mix(in srgb, #fff 18%, transparent)}

/* Offset gold frame behind images */
.gpm-frame{position:relative;display:block}
.gpm-frame::before{content:"";position:absolute;top:1.25rem;right:-1rem;bottom:-1rem;left:1.25rem;border:2px solid var(--color-accent);border-radius:var(--radius-card)}
.gpm-frame>img{position:relative;display:block}

/* Gold index numerals (dark bands) and ghost numerals (light cards) */
.gpm-num{font-family:var(--font-display);font-weight:800;font-size:3rem;line-height:1;color:var(--color-accent)}
.gpm-num-ghost{font-family:var(--font-display);font-weight:800;font-size:4rem;line-height:1;color:color-mix(in srgb, var(--color-accent) 60%, transparent)}

/* Hover lift for cards */
.gpm-lift{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.gpm-lift:hover{transform:translateY(-4px);box-shadow:var(--yt-shadow-cardlg);border-color:var(--color-accent)}

/* Tick chips */
.gpm-tick{display:inline-flex;width:1.75rem;height:1.75rem;border-radius:999px;background:color-mix(in srgb, var(--color-accent) 22%, transparent);color:var(--color-brand);align-items:center;justify-content:center;flex:none}
.gpm-chip{display:flex;width:2.75rem;height:2.75rem;border-radius:calc(var(--radius-card) * .7);background:var(--color-brand);color:var(--color-accent);align-items:center;justify-content:center;flex:none}

/* Big quote */
.gpm-quote{position:relative;padding-top:3.5rem}
.gpm-quote::before{content:"\201C";position:absolute;top:0;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-size:6rem;line-height:.9;color:var(--color-accent)}

/* Sticky glass header */
.gpm-sticky{position:sticky;top:0;z-index:60}
body.admin-bar .gpm-sticky{top:32px}
.gpm-glass{background:color-mix(in srgb, var(--color-surface) 88%, transparent);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3)}

/* Nav link underline sweep */
.gpm-navlink{position:relative}
.gpm-navlink::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.3rem;height:2px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.gpm-navlink:hover::after{transform:scaleX(1)}

/* Watermark mark in dark bands */
.gpm-watermark{position:absolute;right:-2.5rem;bottom:-3.5rem;width:20rem;opacity:.08;pointer-events:none}

/* Numbered process steps with a connecting line */
.gpm-steps{position:relative}
@media (min-width:768px){
  .gpm-steps::before{content:"";position:absolute;top:1.5rem;left:12%;right:12%;height:2px;background:var(--color-line)}
}
.gpm-stepnum{position:relative;width:3rem;height:3rem;margin:0 auto;border-radius:999px;background:var(--color-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;box-shadow:0 0 0 5px color-mix(in srgb, var(--color-accent) 35%, var(--color-page))}

/* Gentle scroll reveal — modern browsers only, respects reduced motion */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .gpm-reveal{animation:gpm-rise both;animation-timeline:view();animation-range:entry 0% entry 45%}
  }
}
@keyframes gpm-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* 2px gold top rule (border-t-2 isn't in the kit) */
.gpm-rule-gold{border-top:2px solid var(--color-accent)}

/* Twenty Twenty-Five prints an UNLAYERED `a { color:#111 }` global-styles rule, which beats
   every layered daisyUI/Tailwind rule on anchors — buttons went dark-on-dark. These unlayered
   rules out-rank it by specificity (0,1,1+). Same class of bug as the kit's underline reset. */
a.btn{color:var(--btn-fg)}
a.btn.text-white{color:#fff}
a.text-white{color:#fff}
a.text-brand{color:var(--color-brand)}
a.text-accent{color:var(--color-accent)}

/* Trust bar rides on the photo's bottom edge - dark strip keeps 14px text above 4.5:1 anywhere */
.gpm-trustbar{background:color-mix(in srgb, var(--color-contrast) 55%, transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* Consistent hover + focus states for every button, taken out of daisyUI's hands.
   (daisyUI's outline-hover fills white while our unlayered white-text rule keeps the
   label white -> white-on-white. These unlayered rules win over both daisy and theme.) */
a.btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease}
a.btn:hover{transform:translateY(-1px)}
a.btn.btn-primary:hover{background:var(--color-brand-dark);border-color:var(--color-brand-dark)}
a.btn.btn-accent:hover{background:color-mix(in srgb, var(--color-accent) 82%, #ffffff);border-color:color-mix(in srgb, var(--color-accent) 82%, #ffffff);color:var(--color-ink)}
a.btn.btn-outline.text-white:hover{background:#ffffff;border-color:#ffffff;color:var(--color-brand)}
a.btn.btn-ghost:hover{background:var(--color-page);color:var(--color-ink)}
a.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* Bespoke GPM icon set - SVG shipped as CSS masks (kses-proof, takes currentColor) */
.gpm-icon{display:inline-block;width:1.375rem;height:1.375rem;flex:none;background:currentColor;-webkit-mask:var(--gi) center/contain no-repeat;mask:var(--gi) center/contain no-repeat}
.gpm-icon-inspect{--gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M8 11.2 L11 8.8 L14 11.2 M9.2 11.5 V14 H12.8 V11.5'/%3E%3Cpath d='M16 16 L21 21'/%3E%3C/svg%3E")}
.gpm-icon-shield{--gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L19 5.8 V11 C19 16 16.2 19.6 12 21 C7.8 19.6 5 16 5 11 V5.8 Z'/%3E%3Cpath d='M8.8 11.8 L11 14 L15.2 9.5'/%3E%3C/svg%3E")}
.gpm-icon-air{--gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 H13.5 C15.5 8 15.5 4.5 13.5 4.5'/%3E%3Cpath d='M3 12.5 H17.5 C19.5 12.5 19.5 16 17.5 16'/%3E%3Cpath d='M3 17 H10.5'/%3E%3C/svg%3E")}
.gpm-icon-key{--gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='12' r='3.6'/%3E%3Cpath d='M11.1 12 H21'/%3E%3Cpath d='M17.2 12 V15.4'/%3E%3Cpath d='M20 12 V14.2'/%3E%3C/svg%3E")}
.gpm-icon-leaf{--gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21 V11'/%3E%3Cpath d='M12 13.5 C6.5 13.5 4.5 9.5 4.5 6.5 C9 6.5 12 9 12 13.5 Z'/%3E%3Cpath d='M12 11 C12 7 15 4.5 19.5 4.5 C19.5 8 17 11 12 11 Z'/%3E%3C/svg%3E")}
.gpm-icon-report{--gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5 H6.5 A1 1 0 0 0 5.5 5.5 V20 A1 1 0 0 0 6.5 21 H17.5 A1 1 0 0 0 18.5 20 V5.5 A1 1 0 0 0 17.5 4.5 H15'/%3E%3Crect x='9' y='3' width='6' height='3' rx='1'/%3E%3Cpath d='M8.8 13.5 L11 15.7 L15.2 10.8'/%3E%3Cpath d='M9 18 H15'/%3E%3C/svg%3E")}
.gpm-icon-clock{--gi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5 V12 L15.2 14'/%3E%3C/svg%3E")}

/* Header nav: full-size, confident */
.gpm-navlink{font-size:1rem;font-weight:600}
.gpm-glass a.btn.btn-primary{font-size:1rem}

/* Header logo, nudged ~10% larger than the h-12 utility. */
.gpm-sticky a img{height:3.3rem}