/* ========================================================================== 
   Phillips360 Modern V2.033 — visual-system consistency layer
   --------------------------------------------------------------------------
   Purpose:
   - Apply one typography, spacing, control, card, and contrast language to
     modern and retained WordPress templates.
   - Keep visual choices configurable through foundation/tokens.css and the
     WordPress Customizer instead of repeating values in component files.
   - Override inherited Bootstrap/legacy presentation without altering content.

   Safe options:
   - Density: Compact / Balanced / Generous in Appearance > Customize.
   - Card finish: Outlined / Soft / Elevated in Appearance > Customize.
   - Brand colors: use the existing four color controls, then re-test contrast.
   ========================================================================== */

/* Typography -------------------------------------------------------------- */
body.p360-site {
  color: var(--p360-text-dark);
  font-size: var(--p360-type-body);
  line-height: var(--p360-leading-body);
}

body.p360-site :where(h1, h2, h3, h4, h5, h6) {
  margin-block: 0 .5em;
  color: inherit;
  font-family: var(--p360-font-display);
  font-weight: 700;
  line-height: var(--p360-leading-heading);
  text-wrap: balance;
}
body.p360-site h1 { font-size: var(--p360-type-h1); letter-spacing: var(--p360-tracking-display); }
body.p360-site h2 { font-size: var(--p360-type-h2); letter-spacing: var(--p360-tracking-display); }
body.p360-site h3 { font-size: var(--p360-type-h3); letter-spacing: -.035em; }
body.p360-site h4 { font-size: var(--p360-type-h4); letter-spacing: -.02em; }
body.p360-site :where(h5, h6) { font-size: 1rem; letter-spacing: .02em; }
body.p360-site :where(p, li, dd) { line-height: var(--p360-leading-body); }
body.p360-site small { font-size: var(--p360-type-small); }
body.p360-site :where(strong, b) { font-weight: 720; }
body.p360-site ::selection { background: var(--p360-accent-2); color: var(--p360-ink); }

/* Section rhythm and readable copy --------------------------------------- */
body.p360-site .p360-section { padding-block: var(--p360-section-space); }
body.p360-site .p360-section-heading { margin-bottom: clamp(38px, 5vw, 72px); }
body.p360-site .p360-section-heading h2,
body.p360-site .p360-related__header h2,
body.p360-site .p360-inner-services__header h2,
body.p360-site .p360-next-step__copy h2 { font-size: var(--p360-type-h2); }
body.p360-site .p360-section-heading__copy,
body.p360-site .p360-section-heading__copy p,
body.p360-site .p360-entry-content { max-width: var(--p360-reading-width); }
body.p360-site .p360-section-heading__copy p { color: var(--p360-text-dark-muted); }
body.p360-site :where(.p360-section--dark, .p360-next-step, .p360-inner-services, .p360-footer) { color: var(--p360-text-light); }
body.p360-site :where(.p360-section--dark, .p360-next-step, .p360-inner-services, .p360-footer) :where(p, li, small) { color: var(--p360-text-light-muted); }
body.p360-site .p360-kicker {
  color: var(--p360-accent-strong);
  font-size: var(--p360-type-label) !important;
  font-weight: 760 !important;
  letter-spacing: var(--p360-tracking-label);
}
body.p360-site :where(.p360-section--dark, .p360-next-step, .p360-inner-services) .p360-kicker { color: var(--p360-accent-2); }

/* Unified action controls ------------------------------------------------- */
body.p360-site :where(
  .p360-button,
  .p360-search-form button,
  .btn_primary a,
  .btn_form
) {
  display: inline-flex;
  min-height: var(--p360-control-height);
  padding: 13px 24px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid transparent;
  border-radius: var(--p360-control-radius);
  background: var(--p360-accent);
  color: var(--p360-ink) !important;
  font-family: var(--p360-font-body);
  font-size: .82rem;
  font-weight: 760;
  letter-spacing: .055em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: transform var(--p360-duration-standard) var(--p360-ease), background var(--p360-duration-standard) ease, border-color var(--p360-duration-standard) ease, box-shadow var(--p360-duration-standard) ease;
}
body.p360-site :where(.p360-button, .p360-search-form button, .btn_primary a, .btn_form):hover {
  transform: translateY(-2px);
  background: var(--p360-accent-2);
  box-shadow: var(--p360-shadow-sm);
}
body.p360-site :where(.p360-button, .p360-search-form button, .btn_primary a, .btn_form):active { transform: translateY(0); }
body.p360-site :where(button, input[type="submit"], .p360-button)[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
body.p360-site .p360-button--small { min-height: 44px; padding: 10px 18px; font-size: .72rem; }

/* Contact conversion control ---------------------------------------------
   Keep this separate from the editable accent palette. The V2.033 cascade
   allowed an ink/dark accent combination to produce black text on a black
   button. These semantic tokens guarantee a readable submit state. */
body.p360-site .p360-contact .wpcf7 :where(input[type="submit"], button[type="submit"]) {
  display: inline-flex;
  min-height: var(--p360-control-height);
  padding: 13px 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--p360-submit-background);
  border-radius: var(--p360-control-radius);
  background: var(--p360-submit-background);
  color: var(--p360-submit-text) !important;
  font-family: var(--p360-font-body);
  font-size: .82rem;
  font-weight: 760;
  letter-spacing: .055em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--p360-duration-standard) var(--p360-ease), background var(--p360-duration-standard) ease, border-color var(--p360-duration-standard) ease, box-shadow var(--p360-duration-standard) ease;
}
body.p360-site .p360-contact .wpcf7 :where(input[type="submit"], button[type="submit"]):hover {
  transform: translateY(-2px);
  border-color: var(--p360-submit-hover-background);
  background: var(--p360-submit-hover-background);
  color: var(--p360-submit-hover-text) !important;
  box-shadow: var(--p360-shadow-sm);
}
body.p360-site .p360-contact .wpcf7 :where(input[type="submit"], button[type="submit"]):active { transform: translateY(0); }

body.p360-site :where(.p360-text-link, .btn-link) {
  color: inherit !important;
  font-weight: 720;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
body.p360-site :where(.p360-text-link, .btn-link):hover { text-decoration-thickness: 2px; }

/* Unified card language --------------------------------------------------- */
body.p360-site :where(
  .p360-post-card,
  .p360-value-card,
  .p360-story-step,
  .p360-empty-state,
  .p360-payment-card,
  .card
) {
  border-color: var(--p360-card-border);
  border-radius: var(--p360-radius);
  background: var(--p360-card-background);
  box-shadow: var(--p360-card-shadow);
}
body.p360-site :where(.p360-post-card, .p360-value-card, .p360-story-step, .card) {
  transition: transform var(--p360-duration-standard) var(--p360-ease), border-color var(--p360-duration-standard) ease, box-shadow var(--p360-duration-standard) ease;
}
@media (hover: hover) and (pointer: fine) {
  body.p360-site :where(.p360-post-card, .p360-value-card, .card):hover {
    transform: translateY(-4px);
    border-color: var(--p360-line-strong);
    box-shadow: var(--p360-shadow);
  }
}
body.p360-site .card-body { padding: clamp(24px, 3.5vw, 42px); }
body.p360-site :where(.p360-post-card__meta, .p360-entry-meta, .text-muted) { color: var(--p360-text-dark-muted) !important; }

/* Forms ------------------------------------------------------------------- */
body.p360-site :where(
  input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select,
  .form-control
) {
  min-height: var(--p360-control-height);
  border: 1px solid var(--p360-line-strong);
  border-radius: var(--p360-radius-sm);
  background: var(--p360-surface-raised);
  color: var(--p360-text-dark) !important;
  font: inherit;
  line-height: 1.45;
  caret-color: var(--p360-accent-strong);
  box-shadow: none;
  transition: border-color var(--p360-duration-fast) ease, box-shadow var(--p360-duration-fast) ease, background var(--p360-duration-fast) ease;
}
body.p360-site textarea { min-height: 150px; resize: vertical; }
body.p360-site :where(input, textarea)::placeholder { color: #59636d !important; opacity: 1 !important; }
body.p360-site :where(input, textarea, select, .form-control):focus {
  border-color: var(--p360-accent-strong);
  outline: 0;
  box-shadow: var(--p360-focus-ring);
}
body.p360-site label { color: inherit; font-size: .84rem; font-weight: 700; }
body.p360-site :where(.wpcf7-not-valid-tip, .alert-danger) { color: #9e2112; }

/* Header and footer consistency ------------------------------------------ */
body.p360-site .p360-header__inner { min-height: 82px; }
body.p360-site .p360-nav__list > li > a,
body.p360-site .p360-menu-toggle__label,
body.p360-site .p360-footer__eyebrow {
  font-size: var(--p360-type-label);
  font-weight: 760;
  letter-spacing: var(--p360-tracking-label);
}
body.p360-site .p360-header.is-scrolled { background: rgba(8, 17, 26, .92); }
body.p360-site .p360-nav__list .sub-menu { background: rgba(8, 17, 26, .98); }
body.p360-site .p360-footer { background: #071019; }
body.p360-site .p360-footer__nav-list > li > a { color: var(--p360-text-light) !important; }
body.p360-site .p360-footer__nav-list .sub-menu a,
body.p360-site .p360-footer__bottom :where(p, a) { color: var(--p360-text-light-muted) !important; }

/* Legacy-template normalization ----------------------------------------- */
body.p360-site :where(.sub_page_main_heading, .heading_wrap h2, .services_container_wrap h2) {
  color: var(--p360-text-dark);
  font-family: var(--p360-font-display);
  font-size: var(--p360-type-h2);
  font-weight: 700;
  letter-spacing: var(--p360-tracking-display);
  line-height: var(--p360-leading-heading);
}
body.p360-site :where(.p360_section_pragh, .Mrgn_top_prgh, .wraping_pargh) { color: var(--p360-text-dark-muted); }
body.p360-site :where(.theme_color, .site_nav .main_nav li a:hover) { color: var(--p360-accent-strong); }
body.p360-site :where(.theme_bg_color, .btn_form) { background-color: var(--p360-accent); }
body.p360-site .portfolio_single_wrap,
body.p360-site .blog_single_wrap { overflow: hidden; border: 1px solid var(--p360-card-border); background: var(--p360-card-background); box-shadow: var(--p360-card-shadow); }

/* Responsive and print ---------------------------------------------------- */
@media (max-width: 900px) {
  body.p360-site .p360-section-heading--split { gap: 28px; }
  body.p360-site .p360-section-heading__copy { max-width: var(--p360-reading-width); }
}
@media (max-width: 640px) {
  body.p360-site { --p360-control-height: 52px; }
  body.p360-site .p360-section { padding-block: clamp(54px, 15vw, 86px); }
  body.p360-site :where(.p360-button, .p360-search-form button, .p360-contact .wpcf7 input[type="submit"], .btn_form) { width: auto; max-width: 100%; }
}
@media print {
  body.p360-site { background: #fff; color: #000; font-size: 11pt; }
  body.p360-site :where(.p360-header, .p360-menu-panel, .p360-scroll-progress, .p360-footer, video, .p360-button) { display: none !important; }
  body.p360-site :where(.p360-section, .p360-content-section, .p360-content-archive) { padding-block: 1.5rem; }
  body.p360-site a { color: #000 !important; text-decoration: underline; }
}

/* Payment-method readiness ------------------------------------------------
 * Braintree Drop-in owns the sensitive card controls inside isolated frames.
 * This local status text explains when those controls are complete enough to
 * request a one-time payment nonce without exposing any payment data. */
body.p360-site .p360-payment-status {
  margin: 1rem 0 .75rem;
  color: var(--p360-text-dark-muted);
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.5;
}
body.p360-site #payment-error:not([hidden]) {
  margin: .75rem 0 1rem;
}