/*
Theme Name: People Team For Hire
Theme URI: https://example.com/people-team-for-hire
Description: Futuristic yellow & near-black child theme for "People Team For Hire" — an on-demand response team you call up to jump in. Colours, fonts and the logo are all editable from Appearance → Editor → Styles. Built as a child of Twenty Twenty-Five.
Author: People Team For Hire
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Template: twentytwentyfive
Text Domain: ptfh
*/

/* ------------------------------------------------------------------
   Most styling lives in theme.json (so it stays editable in the Site
   Editor). The rules below add the "futuristic" cues that block
   settings can't express: glow, grid texture, angular buttons.
   ------------------------------------------------------------------ */

:root{
  --ptfh-yellow:#FFE600;
  --ptfh-base:#0A0A0A;
  --ptfh-panel:#1A1A1A;
  --ptfh-contrast:#F4F4F5;
  --ptfh-muted:#8A8A8A;
  --ptfh-darkyellow:#CC9900; /* secondary accent — recruitment arm */
}

/* Subtle dot-grid texture on the page background */
body.wp-site-blocks,
.wp-site-blocks{
  background-color:var(--ptfh-base);
  background-image:radial-gradient(rgba(255,230,0,.06) 1px, transparent 1px);
  background-size:22px 22px;
}

/* Monospace "call-sign" eyebrow — add the class "ptfh-eyebrow" to a paragraph */
.ptfh-eyebrow{
  font-family:'Space Mono', ui-monospace, monospace;
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.8rem;
  color:var(--ptfh-yellow);
}

/* Primary CTA — glow + angular clip. Apply by adding class "ptfh-cta"
   to a Button block (Advanced → Additional CSS class). */
.wp-block-button.ptfh-cta .wp-block-button__link{
  background:var(--ptfh-yellow);
  color:var(--ptfh-base);
  font-weight:700;
  letter-spacing:.02em;
  border:0;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow:0 0 0 1px rgba(255,230,0,.5), 0 0 28px rgba(255,230,0,.35);
  transition:box-shadow .18s ease, transform .18s ease;
}
.wp-block-button.ptfh-cta .wp-block-button__link:hover{
  box-shadow:0 0 0 1px rgba(255,230,0,.8), 0 0 44px rgba(255,230,0,.55);
  transform:translateY(-1px);
}

/* Outline / secondary button variant: class "ptfh-ghost" */
.wp-block-button.ptfh-ghost .wp-block-button__link{
  background:transparent;
  color:var(--ptfh-yellow);
  border:1px solid var(--ptfh-yellow);
}

/* Panel card — class "ptfh-card" on a Group/Column */
.ptfh-card{
  background:var(--ptfh-panel);
  border:1px solid rgba(255,230,0,.18);
  border-radius:14px;
}
.ptfh-card:hover{ border-color:rgba(255,230,0,.55); }

/* Thin yellow hairline divider — class "ptfh-rule" on a Separator */
.wp-block-separator.ptfh-rule{
  border:0;border-top:1px solid rgba(255,230,0,.35);
  opacity:1;max-width:100%;
}

/* Make the site logo sit nicely in the header */
.wp-block-site-logo img{display:block}

/* ------------------------------------------------------------------
   Inner-page pattern components (What we do / How it works / Contact)
   ------------------------------------------------------------------ */

/* Stat box — class "ptfh-statbox" on a Group */
.ptfh-statbox{
  background:var(--ptfh-panel);
  border:1px solid rgba(255,230,0,.18);
  border-radius:14px;
  padding:1.5rem;
}
.ptfh-statbox .ptfh-stat{
  font-family:'Space Grotesk','Arial Black',sans-serif;
  font-weight:700;font-size:2.2rem;line-height:1;
  color:var(--ptfh-yellow);margin:0;
}
.ptfh-statbox .ptfh-statlabel{ color:var(--ptfh-muted);font-size:.9rem;margin:.25rem 0 0; }

/* Process step — class "ptfh-step" on a Group (flex), number = "ptfh-step-n" */
.ptfh-step{
  display:flex;gap:1.5rem;align-items:flex-start;
  background:var(--ptfh-panel);
  border:1px solid rgba(255,230,0,.18);
  border-radius:14px;padding:1.6rem 1.75rem;
  transition:border-color .18s ease;
}
.ptfh-step:hover{ border-color:rgba(255,230,0,.55); }
.ptfh-step .ptfh-step-n{
  font-family:'Space Mono',ui-monospace,monospace;
  font-weight:700;font-size:1.7rem;line-height:1.2;
  color:var(--ptfh-yellow);margin:0;min-width:3rem;
}

/* Contact form card — class "ptfh-form" on a Group wrapping a Custom HTML block */
.ptfh-form{
  max-width:620px;margin-inline:auto;
  background:var(--ptfh-panel);
  border:1px solid rgba(255,230,0,.18);
  border-radius:16px;padding:2rem;
}
.ptfh-form .field{ margin-bottom:1.15rem; }
.ptfh-form label{
  display:block;font-family:'Space Mono',ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  color:var(--ptfh-yellow);margin-bottom:.45rem;
}
.ptfh-form input,.ptfh-form textarea{
  width:100%;box-sizing:border-box;
  background:#0F0F0F;border:1px solid rgba(255,255,255,.14);
  border-radius:8px;color:var(--ptfh-contrast);
  font-family:inherit;font-size:1rem;padding:.75rem .85rem;
}
.ptfh-form input:focus,.ptfh-form textarea:focus{
  outline:none;border-color:var(--ptfh-yellow);
  box-shadow:0 0 0 3px rgba(255,230,0,.18);
}
.ptfh-form textarea{ min-height:120px;resize:vertical; }
.ptfh-form button{
  width:100%;cursor:pointer;border:0;
  font-family:'Space Grotesk','Arial Black',sans-serif;font-weight:700;
  background:var(--ptfh-yellow);color:var(--ptfh-base);
  padding:.9rem 1.6rem;border-radius:8px;
  box-shadow:0 0 0 1px rgba(255,230,0,.5),0 0 28px rgba(255,230,0,.35);
  transition:box-shadow .18s ease,transform .18s ease;
}
.ptfh-form button:hover{
  box-shadow:0 0 0 1px rgba(255,230,0,.8),0 0 44px rgba(255,230,0,.55);
  transform:translateY(-1px);
}

/* ------------------------------------------------------------------
   Recruitment arm — SECONDARY accent (dark yellow). Red-team recruitment:
   the team also headhunts & places people INTO other companies, and
   the Careers tab links out to that external jobs board.
   ------------------------------------------------------------------ */

/* Dark yellow eyebrow — add BOTH classes: "ptfh-eyebrow ptfh-eyebrow-recruit"
   (defined after .ptfh-eyebrow so the dark yellow colour wins). */
.ptfh-eyebrow-recruit{ color:var(--ptfh-darkyellow); }

/* Recruitment CTA button — class "ptfh-cta-recruit" on a Button block */
.wp-block-button.ptfh-cta-recruit .wp-block-button__link{
  background:var(--ptfh-darkyellow);
  color:#1A0A00;
  font-weight:700;
  border:0;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow:0 0 0 1px rgba(204,153,0,.5), 0 0 28px rgba(204,153,0,.35);
  transition:box-shadow .18s ease, transform .18s ease;
}
.wp-block-button.ptfh-cta-recruit .wp-block-button__link:hover{
  box-shadow:0 0 0 1px rgba(204,153,0,.85), 0 0 44px rgba(204,153,0,.55);
  transform:translateY(-1px);
}

/* Dark yellow panel card — class "ptfh-card-recruit" */
.ptfh-card-recruit{
  background:var(--ptfh-panel);
  border:1px solid rgba(204,153,0,.35);
  border-radius:14px;
}
.ptfh-card-recruit:hover{ border-color:rgba(204,153,0,.7); }

/* Dark yellow pill / chip — class "ptfh-chip" on a paragraph */
.ptfh-chip{
  display:inline-block;
  border:1px solid rgba(204,153,0,.4);
  border-radius:999px;
  padding:.45rem 1rem;
  color:var(--ptfh-darkyellow);
  font-family:'Space Mono', ui-monospace, monospace;
  text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  margin:0;
}

/* Give the recruitment band a dark yellow hairline frame — class "ptfh-band-recruit" */
.ptfh-band-recruit{
  border-top:1px solid rgba(204,153,0,.55);
  border-bottom:1px solid rgba(204,153,0,.55);
}

/* Header "Careers" nav item styled as the recruitment (dark yellow) link.
   Add the class "ptfh-careers" to that Navigation link. */
.wp-block-navigation .ptfh-careers a,
.wp-block-navigation-item.ptfh-careers a{
  color:#1A0A00 !important;
  background:var(--ptfh-darkyellow);
  border-radius:6px;
  padding:.35rem .8rem;
  font-weight:700;
}

/* ------------------------------------------------------------------
   Team — member cards (use on an inner page, e.g. "What we do").
   Class "ptfh-member" on each Column.
   ------------------------------------------------------------------ */
.ptfh-member{
  background:var(--ptfh-panel);
  border:1px solid rgba(255,230,0,.18);
  border-radius:14px;
  padding:1.6rem 1.25rem;
  text-align:center;
  transition:border-color .18s ease;
}
.ptfh-member:hover{ border-color:rgba(255,230,0,.5); }
.ptfh-member img{
  width:104px;height:104px;border-radius:50%;
  object-fit:cover;display:block;margin:0 auto .9rem;
}
.ptfh-member h3{ font-size:1.12rem;margin:0; }
.ptfh-member .ptfh-role{ color:var(--ptfh-muted);font-size:.88rem;margin:.3rem 0 .9rem; }
/* center the per-member LinkedIn social icon */
.ptfh-member .wp-block-social-links{ justify-content:center; }