/*
Theme Name: Wingerd Media
Template: astra
Version: 1.1.0
Description: Custom child theme for wingerdmedia.com, built on Astra. Matches the
approved Claude Design mockup exactly - fonts, colors, layout, animation.
*/

:root {
  --wm-teal:   #3ddfc7;
  --wm-orange: #ae511e;
  --wm-orange-bright: #de753c;
  --wm-black:  #000000;
  --wm-white:  #ffffff;
  --wm-cream:  #eff6e0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wm-white);
  font-family: Manrope, system-ui, sans-serif;
  color: #101010;
  -webkit-font-smoothing: antialiased;
}

body a { color: var(--wm-orange); text-decoration: none; }
body a:hover { color: #b95b28; }

h1, h2, h3, h4 { font-family: Archivo, sans-serif; }

/* Astra chrome we don't want: default header, default page title bar, default footer */
.ast-container > .ast-page-header,
.entry-header,
.page-header,
.ast-archive-title,
.ast-small-footer,
footer.site-footer,
#footer,
.site-header,
header.site-header,
#masthead {
  display: none !important;
}

.ast-container,
#content,
#primary,
.site-content,
article,
.entry-content,
.ast-container .ast-row {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.entry-content > p:first-child { margin-top: 0; }

.entry-content a { text-decoration: none !important; }

.entry-content > section,
.entry-content > div,
.ast-container > section,
.ast-container > div {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wm-container {
  max-width: 1240px;
  margin: 0 auto;
}

.wm-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: screen;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22180%22%20height=%22180%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.8%22%20numOctaves=%223%22%20stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect%20width=%22180%22%20height=%22180%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E');
  background-size: 180px 180px;
  animation: omGrain 24s linear infinite;
}

.wm-glow-teal {
  position: absolute;
  left: -12%;
  top: -30%;
  width: 70%;
  height: 150%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(61,223,199,0.17), transparent 72%);
  animation: omDriftA 11s ease-in-out infinite;
}

.wm-glow-orange {
  position: absolute;
  right: -16%;
  bottom: -34%;
  width: 62%;
  height: 140%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(222,117,60,0.2), transparent 70%);
  animation: omDriftB 14s ease-in-out infinite;
}

.wm-placeholder {
  border: 1px solid #202020;
  border-radius: 4px;
  background-color: #0b0b0b;
  background-image: repeating-linear-gradient(135deg, rgba(61,223,199,0.14) 0 2px, transparent 2px 11px);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.wm-placeholder-light {
  border: 1px solid #dfe6cf;
  border-radius: 4px;
  background-color: #e9f0de;
  background-image: repeating-linear-gradient(135deg, rgba(222,117,60,0.15) 0 2px, transparent 2px 11px);
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

.wm-placeholder-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: #7d8b88;
}

.wm-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wm-orange);
  margin-bottom: 22px;
}

.wm-btn-orange {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: 54px;
  padding: 0 30px;
  border-radius: 3px;
  background: var(--wm-orange);
  color: var(--wm-white) !important;
  font-weight: 700;
  font-size: 16px;
  transition: background 160ms ease;
}
.wm-btn-orange:hover { background: #c9642e; color: var(--wm-white) !important; }

.wm-btn-outline-teal {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: 54px;
  padding: 0 30px;
  border-radius: 3px;
  border: 1px solid var(--wm-teal);
  color: var(--wm-teal) !important;
  font-weight: 600;
  font-size: 16px;
  transition: background 160ms ease;
}
.wm-btn-outline-teal:hover { background: rgba(61,223,199,0.09); }

.wm-card-hover {
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.wm-card-hover:hover {
  border-color: var(--wm-orange) !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -20px rgba(0,0,0,0.35);
}

.wm-btn-sm-outline-teal {
  transition: background 160ms ease;
}
.wm-btn-sm-outline-teal:hover { background: rgba(61,223,199,0.1); }

.wm-btn-outline-neutral:hover { border-color: var(--wm-orange) !important; }

.wm-team-card { cursor: pointer; }

.wm-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 200;
  padding: 40px 20px;
  overflow-y: auto;
  align-items: flex-start;
  justify-content: center;
}
.wm-modal-overlay.wm-modal-open { display: flex; }

.wm-modal-box {
  position: relative;
  background: #0b0b0b;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  max-width: 880px;
  width: 100%;
  padding: 40px;
  animation: omRise 260ms cubic-bezier(0.2,0.7,0.2,1) both;
}

.wm-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #2a2a2a;
  background: #141414;
  color: #d6d6d6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.wm-modal-close:hover { border-color: var(--wm-orange); color: #ffffff; }

.wm-social-embed-frame { width: 100%; aspect-ratio: 9/16; border: 0; display: block; }

.wm-modal-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: start;
}

.wm-modal-cta {
  margin-top: 16px;
  border: 1px solid #2a2a2a;
  border-radius: 5px;
  padding: 18px;
  background: #101010;
}

.wm-modal-divider {
  height: 1px;
  background: #232323;
  margin: 22px 0;
}

.wm-modal-section-title {
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: #3ddfc7;
  margin: 0 0 12px;
}

.wm-modal-placeholder {
  font-size: 15.5px;
  line-height: 1.6;
  color: #6b6b66;
  font-style: italic;
  margin: 0;
}

.wm-modal-text {
  font-size: 15.5px;
  line-height: 1.6;
  color: #d6d6d6;
  margin: 0;
}

.wm-modal-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 26px;
}

.wm-modal-fact-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #de753c;
  margin-bottom: 6px;
}

@keyframes omGrain { from { background-position: 0 0; } to { background-position: 180px 180px; } }
@keyframes omBlink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes omDriftA { 0%, 100% { transform: translate3d(-9%, -6%, 0) scale(1.0); } 50% { transform: translate3d(12%, 8%, 0) scale(1.22); } }
@keyframes omDriftB { 0%, 100% { transform: translate3d(8%, 7%, 0) scale(1.18); } 50% { transform: translate3d(-11%, -6%, 0) scale(0.98); } }
@keyframes omWave { 0%, 100% { transform: scaleY(0.82); } 50% { transform: scaleY(1.18); } }
@keyframes omFloat { 0%, 100% { transform: translateY(0) rotate(-0.3deg); } 50% { transform: translateY(-10px) rotate(0.3deg); } }
@keyframes omRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes omPop { 0%, 22% { opacity: 0; transform: scale(0.4); } 34% { opacity: 1; transform: scale(1.25); } 44% { transform: scale(1); } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes omRing { 0%, 30% { transform: scale(0.4); opacity: 0; } 38% { transform: scale(0.55); opacity: 0.85; } 58%, 100% { transform: scale(1.5); opacity: 0; } }
/* Motifs sit in a flex row next to a heading with no wrap and a
   flex-shrink:0 heading, so between 640-900px (tablets in portrait, phones
   in landscape) the motif can overflow past the row's edge before this
   used to hide it. Matches the site's single mobile breakpoint instead of
   its own separate one, so it's gone everywhere the layout is already
   mobile-stacked. */
@media (max-width: 900px) { .wm-motif { display: none !important; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

@media (max-width: 900px) {
  /* Matches the source design's near-universal mobile collapse: every grid layout
     (hero columns, card grids, bullet-dot rows, the pricing table) goes to a single
     column. Targets the inline style directly so nothing gets missed by hand-tagging
     individual elements - !important in an external stylesheet overrides a plain
     (non-!important) inline style, which is what every grid here uses. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* The blanket collapse above also catches small icon/dot + text rows
     (bullet lists), stacking the dot above the text instead of beside it.
     Restore the specific narrow-first-column patterns used site-wide for
     bullet rows so they stay inline. */
  [style*="grid-template-columns: 14px 1fr"] { grid-template-columns: 14px 1fr !important; }
  [style*="grid-template-columns: 16px 1fr"] { grid-template-columns: 16px 1fr !important; }
  [style*="grid-template-columns: 18px 1fr"] { grid-template-columns: 18px 1fr !important; }

  .wm-container { padding-left: 22px !important; padding-right: 22px !important; }

  /* Headings are inline-styled at their desktop size (up to 60px) with no
     mobile scaling - on a 390px screen that forces ugly mid-word breaks
     ("manageme-nt"). Matches the source design's own mobile heading scale. */
  h1 { font-size: 34px !important; line-height: 1.15 !important; }
  h2 { font-size: 26px !important; line-height: 1.2 !important; }

  /* The "Platforms we manage" bar is a flex-wrap row (label + 4 icon/label
     pairs), not a CSS grid, so the blanket grid-collapse rule above doesn't
     reach it. Left to wrap on its own it breaks unevenly on a phone (one
     platform alone, two others paired, whichever items happen to fit) -
     stack the label above a clean 2-column icon grid instead. */
  .wm-platforms-bar { flex-direction: column !important; align-items: flex-start !important; }
  .wm-platforms-icons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100%;
    gap: 18px 20px !important;
  }

  .wm-price-row {
    padding: 6px 0 14px !important;
  }
  .wm-price-row > div {
    padding: 4px 22px !important;
  }
  .wm-price-row > div:first-child {
    padding-top: 14px !important;
  }

  /* Collapse the header nav into a hamburger toggle instead of the source
     design's plain flex-wrap, which pushes real content below the fold on a
     real phone (confirmed on device - the design mockup never got tested at
     true mobile width). */
  #wm-nav-toggle { display: flex !important; }
  #wm-nav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #000000;
    border-bottom: 1px solid #1c1c1c;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 22px 20px;
  }
  #wm-header.wm-nav-open #wm-nav { display: flex !important; }
  #wm-nav a { width: 100%; }
  #wm-nav a.wm-btn-orange { margin-left: 0 !important; margin-top: 8px; justify-content: center; }

  /* CTA buttons are a fixed pixel height, sized for one line of text. That's
     fine on desktop, but the same text can wrap to two lines in a narrower
     mobile column (the contact card, pricing tiers) and gets clipped/cramped
     inside the fixed height. Let them grow instead. */
  .wm-btn-orange,
  .wm-btn-outline-teal,
  .wm-btn-outline-neutral {
    height: auto !important;
    min-height: 44px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    text-align: center;
    line-height: 1.3;
  }

  /* The home hero photo bleeds past its grid column on desktop to feel
     bigger/blended into the section. On mobile the grid collapses to one
     column, so that bleed would just push the photo off the right edge of
     the screen and cause horizontal scroll. */
  .wm-hero-photo {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  /* Team modal: stack photo/CTA above the bio content instead of a side
     column, and trim padding so it fits a phone screen. */
  .wm-modal-box { padding: 26px 20px; }
  .wm-modal-grid { grid-template-columns: 1fr; gap: 22px; }
  .wm-modal-facts { grid-template-columns: 1fr; }
  .wm-modal-overlay { padding: 20px 12px; }
}

@media (max-width: 620px) {
  h1 { font-size: 29px !important; }
  h2 { font-size: 23px !important; }
}

/* Astra core's built-in "scroll to top" button (#ast-scroll-top) ships with its own
   default blue (rgb(4, 107, 210)), unrelated to this site's brand palette -- found live
   2026-08-02 on the audiobook review player page, but the button is site-wide (Astra
   footer feature), not specific to that page. Brand teal per
   docs/wingerd-media-brand-palette.md's official swatch. */
.ast-scroll-top-icon {
  background-color: #3ddfc7 !important;
}