/*
Theme Name: iDesign4Solutions Child
Template: twentytwentyfour
Version: 0.1.0
Text Domain: id4s-child
Description: Child theme for iDesign4Solutions built on Twenty Twenty-Four. Implements the ID4S "Precision Grid" design system (colors, type, spacing) via theme.json overrides, plus the homepage section patterns in /patterns.

SETUP NOTES (read before activating):
1. Install and keep the free parent theme "Twenty Twenty-Four" present in your theme
   library (Appearance > Themes > Add New > search "Twenty Twenty-Four" > Install).
   You do NOT activate it -- only this child theme gets activated. WordPress needs
   the parent theme's files present on disk for "Template: twentytwentyfour" to work.
2. Upload this whole folder as a .zip via Appearance > Themes > Add New > Upload Theme.
3. Activate "iDesign4Solutions Child".
4. Colors, fonts, and spacing are defined in theme.json -- do not hand-edit colors
   elsewhere; change them there so every block/pattern stays consistent.
5. Placeholder palette: this ships with the provisional navy/charcoal/red palette
   from the strategy document. Swap the hex values in theme.json once the real
   logo file is available and colors are extracted/contrast-checked.
*/

.id4s-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.id4s-eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.id4s-pillar-card,
.id4s-work-card {
  border: 1px solid var(--wp--preset--color--brand-border);
  border-radius: 4px;
}

.id4s-placeholder-block {
  border: 1px dashed var(--wp--preset--color--brand-border);
  border-radius: 8px;
  padding: 1.5rem;
  background: #FFFFFF;
}

.id4s-tag-placeholder {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--wp--preset--color--brand-border);
  padding: 2px 10px;
  border-radius: 20px;
}

/* ============================================================
   Motion & interaction layer (added per design-feedback round 2)
   All effects are additive polish -- see assets/js/interactions.js.
   Respects prefers-reduced-motion throughout.
   ============================================================ */

/* Scroll-reveal */
.id4s-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms cubic-bezier(.22,.7,.3,1), transform 600ms cubic-bezier(.22,.7,.3,1);
}
.id4s-reveal.id4s-in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .id4s-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Header hide-on-scroll (targets whichever header the JS finds) */
header.id4s-header-hide,
.wp-block-template-part.id4s-header-hide {
  transform: translateY(-100%);
  transition: transform 220ms ease;
}
header, .wp-block-template-part {
  transition: transform 220ms ease;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Card hover elevation -- pillars & work examples */
.id4s-pillar-card,
.id4s-work-card {
  transition: transform 220ms cubic-bezier(.22,.7,.3,1), box-shadow 220ms ease, border-color 220ms ease;
}
.id4s-pillar-card:hover,
.id4s-work-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(18,33,59,0.12);
  border-color: var(--wp--preset--color--brand-accent);
}

/* Buttons: slightly bouncier hover than default core styling */
.wp-block-button__link {
  transition: transform 180ms cubic-bezier(.22,.7,.3,1), box-shadow 180ms ease, background-color 180ms ease;
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(193,58,46,0.28);
}

/* Hero visual: animated, interactive precision mark */
.id4s-hero-visual {
  transition: transform 200ms ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}
.id4s-hero-visual svg {
  animation: id4s-rotate-mark 22s linear infinite;
  transform-origin: 50% 50%;
}
.id4s-hero-visual .id4s-hero-dot {
  animation: id4s-pulse-dot 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes id4s-rotate-mark {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes id4s-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
  .id4s-hero-visual svg,
  .id4s-hero-visual .id4s-hero-dot { animation: none !important; }
}

/* Section heading underline accent -- small motion-on-view flourish */
.id4s-reveal h2 {
  position: relative;
}