/*
Theme Name: Holly Mack Child
Theme URI: https://hollymack.com
Description: Custom GeneratePress child theme for Holly Mack — B2B Marketing That Works. Optimized for SEO/AEO with Yoast, structured data, and Claude publishing workflow.
Author: Holly Mack
Author URI: https://hollymack.com
Template: generatepress
Version: 1.0.8
Text Domain: hollymack-child
*/

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
  --hm-navy: #0B1F3A;
  --hm-turquoise: #5CE1E6;
  --hm-turquoise-dark: #4bcdd2;
  --hm-turquoise-light: rgba(92,225,230,0.08);
  --hm-turquoise-border: rgba(92,225,230,0.25);
  --hm-white: #ffffff;
  --hm-gray-bg: #F4F5F7;
  --hm-gray-hero: #e8eaed;
  --hm-body-text: #4a5568;
  --hm-muted: #9ca3af;
  --hm-border: #e5e7eb;
  --hm-font-heading: 'Playfair Display', Georgia, serif;
  --hm-font-hero: 'Montserrat', -apple-system, sans-serif;
  --hm-font-body: 'Poppins', -apple-system, sans-serif;
}

/* ============================================
   BASE / GENERATEPRESS OVERRIDES
   ============================================ */
body {
  font-family: var(--hm-font-body);
  color: var(--hm-navy);
  background: var(--hm-white);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--hm-navy); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--hm-turquoise); }

/* GP container width */
.inside-article, .site-main { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* ============================================
   HEADER
   ============================================ */
.site-header {
  background: var(--hm-white);
  border-bottom: 1px solid #eee;
  position: sticky; top: 0; z-index: 100;
}
.site-header .inside-header {
  max-width: 1280px; margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  height: 80px;
}
.site-branding img { height: 50px; width: auto; }

/* NAV */
.main-navigation .menu > li > a {
  font-family: var(--hm-font-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hm-navy); padding: 0 16px;
  /* The active/hover rule is drawn with text-decoration, not border-bottom.
     A border stretches across the 16px side padding and changes the link
     box height; text-decoration hugs the label exactly like hollymack.com
     and is painted, so it can never shift the header. Transparent by
     default, turned turquoise by the hover/current rules further down. */
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
  transition: text-decoration-color 0.3s ease;
}
.main-navigation .sub-menu a {
  font-size: 13px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 { color: var(--hm-navy); }
h1 { font-family: var(--hm-font-hero); font-weight: 800; }
h2 { font-family: var(--hm-font-heading); font-weight: 700; }
h3 { font-family: var(--hm-font-hero); font-weight: 700; }
.entry-content p, .entry-content li {
  font-size: 16px; line-height: 1.8; color: var(--hm-body-text);
}

/* ============================================
   BUTTONS
   ============================================ */
.hm-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 40px;
  background: var(--hm-turquoise); color: var(--hm-navy);
  font-family: var(--hm-font-body); font-weight: 600; font-size: 15px;
  border-radius: 50px; border: none; cursor: pointer;
  transition: all 0.2s;
}
.hm-btn-primary:hover {
  background: var(--hm-turquoise-dark);
  transform: translateY(-1px); color: var(--hm-navy);
}
.hm-btn-primary.uppercase {
  font-family: var(--hm-font-hero); font-size: 11px;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.hm-btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px;
  background: var(--hm-white); color: var(--hm-navy);
  font-family: var(--hm-font-body); font-weight: 500; font-size: 15px;
  border: 1px solid var(--hm-border); border-radius: 4px;
  transition: all 0.2s;
}
.hm-btn-outline:hover {
  border-color: var(--hm-turquoise); color: var(--hm-turquoise);
}
.hm-btn-text {
  font-family: var(--hm-font-hero); font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hm-navy); transition: color 0.2s;
}
.hm-btn-text:hover { color: var(--hm-turquoise); }

/* ============================================
   CARDS
   ============================================ */
.hm-card {
  background: var(--hm-white);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.hm-card-top-border { border-top: 4px solid var(--hm-turquoise); }
.hm-card-left-border { border-left: 4px solid var(--hm-turquoise); }
.hm-card-inner { padding: 32px 24px; }

/* ============================================
   BADGES / PILLS
   ============================================ */
.hm-badge {
  display: inline-block;
  padding: 10px 20px;
  background: var(--hm-turquoise-light);
  border: 1px solid var(--hm-turquoise-border);
  border-radius: 24px;
  font-size: 14px; font-weight: 500;
  color: var(--hm-turquoise);
}

/* ============================================
   NUMBERED CIRCLE
   ============================================ */
.hm-step-number {
  width: 40px; height: 40px;
  background: var(--hm-turquoise); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hm-font-hero); font-weight: 700;
  font-size: 16px; color: var(--hm-white);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hm-hero {
  padding: 160px 0 100px;
  background: var(--hm-gray-hero);
  position: relative; overflow: hidden;
}
.hm-hero-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 55% 45%;
  gap: 32px; align-items: center;
  position: relative; z-index: 1;
}
.hm-hero h1 {
  font-size: 56px; line-height: 1.1; margin: 0 0 32px;
  color: #2d3748;
}
.hm-hero-avatar {
  display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}
.hm-hero-avatar img {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; border: 3px solid #e0e0e0;
}
.hm-hero-avatar span {
  font-family: var(--hm-font-hero); font-size: 14px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.hm-hero-photo {
  position: relative;
  width: 420px; height: 560px;
  max-width: 100%;
}
/* turquoise capsule sits BEHIND the portrait, so the cutout can overhang it */
.hm-hero-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--hm-turquoise);
  border-radius: 999px;
  z-index: 0;
}
/* The source cutout is chopped flat across its final row (875px opaque of
   900 wide), so letting it render at its natural height puts a hard
   horizontal edge across her arms. hollymack.com solves this by filling the
   frame with object-fit:cover and rounding the bottom corners, so the photo
   ends on the same arc as the capsule and the flat edge is masked away.
   Radii clamp to half the width, so the two bottom corners meet in the
   middle and the arcs of img and capsule coincide exactly at every size. */
.hm-hero-photo img {
  position: absolute; z-index: 1;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0 0 999px 999px;
  display: block;
}

/* ============================================
   SECTION BACKGROUNDS
   ============================================ */
.hm-bg-white { background: var(--hm-white); }
.hm-bg-gray { background: var(--hm-gray-bg); }
.hm-bg-hero { background: var(--hm-gray-hero); }
.hm-bg-navy { background: var(--hm-navy); color: var(--hm-white); }
.hm-bg-navy h2, .hm-bg-navy h3 { color: var(--hm-white); }
.hm-bg-navy p { color: rgba(255,255,255,0.6); }

.hm-section { padding: 100px 24px; }
.hm-section-inner { max-width: 1200px; margin: 0 auto; }

/* ============================================
   TURQUOISE ACCENT TEXT
   ============================================ */
.hm-turquoise { color: var(--hm-turquoise); }
.hm-turquoise-italic {
  color: var(--hm-turquoise);
  font-family: var(--hm-font-heading);
  font-style: italic;
}

/* ============================================
   BLOCKQUOTE (turquoise left border)
   ============================================ */
.hm-blockquote {
  border-left: 3px solid var(--hm-turquoise);
  padding: 16px 20px; background: #fafbfc;
  margin: 0;
}
.hm-blockquote p { font-size: 15px; line-height: 1.7; color: var(--hm-body-text); margin: 0; }

/* ============================================
   BULLET LIST (turquoise dots + separators)
   ============================================ */
.hm-bullet-list { list-style: none; padding: 0; margin: 0; }
.hm-bullet-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid var(--hm-border);
  font-size: 15px; font-weight: 600; color: var(--hm-navy);
}
.hm-bullet-list li:last-child { border-bottom: none; }
.hm-bullet-list li::before {
  content: ''; width: 10px; height: 10px;
  border-radius: 50%; background: var(--hm-turquoise);
  flex-shrink: 0;
}

/* ============================================
   BLOG CARDS
   ============================================ */
.hm-blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.hm-blog-card { text-decoration: none; display: block; transition: transform 0.25s; }
.hm-blog-card:hover { transform: translateY(-4px); }
.hm-blog-card img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px;
  margin-bottom: 16px;
}
.hm-blog-card h3 {
  font-family: var(--hm-font-hero); font-size: 16px;
  font-weight: 700; line-height: 1.4; color: var(--hm-navy); margin: 0;
}

/* ============================================
   IMAGE GALLERY
   ============================================ */
.hm-gallery {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
}
.hm-gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  padding: 36px 32px; background: var(--hm-white);
  border-top: 1px solid var(--hm-border);
}
.site-footer .inside-footer {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.site-footer .copyright { font-size: 13px; color: var(--hm-muted); }
.site-footer .footer-logo img { height: 44px; width: auto; }
.site-footer .social-icons { display: flex; gap: 12px; }
.site-footer .social-icons a { color: var(--hm-navy); }
.site-footer .social-icons a:hover { color: var(--hm-turquoise); }

/* ============================================
   SINGLE POST STYLES
   ============================================ */
.single .entry-header { margin-bottom: 32px; }
.single .entry-title {
  font-family: var(--hm-font-heading);
  font-size: 42px; font-weight: 700; line-height: 1.2;
}
.single .entry-meta { color: var(--hm-muted); font-size: 14px; }
.single .entry-content h2 {
  font-family: var(--hm-font-heading);
  font-size: 30px; margin-top: 48px;
}
.single .entry-content h3 {
  font-family: var(--hm-font-hero);
  font-size: 22px; margin-top: 36px;
}

/* ============================================
   ARCHIVE / BLOG LISTING
   ============================================ */
.archive .page-header h1, .blog .page-header h1 {
  font-family: var(--hm-font-heading);
  font-size: 42px; text-align: center; margin-bottom: 48px;
}

/* ============================================
   GOHIGHLEVEL FORM EMBED
   ============================================ */
.hm-ghl-form iframe {
  width: 100%; border: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .hm-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hm-hero h1 { font-size: 42px; }
  .hm-hero-photo { margin: 0 auto; width: 320px; height: 427px; }
  .hm-blog-grid { grid-template-columns: 1fr 1fr; }
  .hm-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .hm-hero { padding: 120px 0 60px; }
  .hm-hero h1 { font-size: 36px; }
  .hm-section { padding: 60px 16px; }
  .hm-blog-grid { grid-template-columns: 1fr; }
  .hm-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   HEADER NAV — dropdown indicators, hover, panel
   (added to match the reference header design)
   ============================================ */
.main-navigation .menu > li.menu-item-has-children > a::after {
  content: "+";
  margin-left: 8px;
  color: var(--hm-turquoise);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  /* inline-block makes this an atomic inline box, which stops the link's
     underline from running on underneath the "+" indicator */
  display: inline-block;
  vertical-align: baseline;
}
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li > a:focus-visible,
.main-navigation .menu > li:hover > a {
  color: var(--hm-navy);
  text-decoration-color: var(--hm-turquoise);
}
.main-navigation .menu > li:hover > a::after {
  color: var(--hm-turquoise);
}
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current-menu-item > a:hover {
  color: var(--hm-navy);
  text-decoration-color: var(--hm-turquoise);
}
/* dropdown panel */
.main-navigation .menu .sub-menu {
  width: 240px;
  padding: 16px 0;
  background: var(--hm-white);
  box-shadow: 0 12px 32px rgba(11, 31, 58, 0.10);
}
.main-navigation .menu .sub-menu a {
  display: block;
  padding: 13px 30px;
  font-family: var(--hm-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-navy);
}
/* Dropdown items get the same treatment as the top level: the label stays
   navy (turquoise on white is ~1.6:1 contrast and hard to read) and the
   turquoise rule underneath carries the highlight. */
.main-navigation .menu .sub-menu a:hover,
.main-navigation .menu .sub-menu a:focus-visible,
.main-navigation .menu .sub-menu li.current-menu-item > a {
  color: var(--hm-navy);
  background: transparent;
  text-decoration-line: underline;
  text-decoration-color: var(--hm-turquoise);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}
/* ==== LAYOUT HELPERS (added: explicit column counts) ====
   auto-fit + minmax created 3 tracks in a 1152px container, so
   two-child sections rendered squeezed into the left two thirds. */
.hm-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hm-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .hm-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hm-two-col  { grid-template-columns: 1fr; gap: 40px; }
  .hm-card-grid { grid-template-columns: 1fr; }
}

/* header container aligned to the 1200px content column:
   (vw-1264)/2 + 32px padding == (vw-1200)/2, so the logo shares
   the same left edge as every section heading below it. */
.site-header .inside-header { max-width: 1264px; }

/* active state must also show when the current page is a submenu child */
.main-navigation .menu > li.current-menu-ancestor > a,
.main-navigation .menu > li.current-menu-parent > a {
  color: var(--hm-navy);
  text-decoration-color: var(--hm-turquoise);
}

/* ==== BLOG INDEX / MARKETING NOTES ==== */
.hm-breadcrumb a { color: #9ca3af; }
.hm-breadcrumb a:hover { color: var(--hm-turquoise); }

.hm-topic-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hm-topic-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 50px;
  border: 1px solid var(--hm-border);
  background: var(--hm-white); color: var(--hm-navy);
  font-family: var(--hm-font-body);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  transition: all 0.2s;
}
a.hm-topic-chip:hover { border-color: var(--hm-turquoise); color: var(--hm-navy); }
.hm-topic-chip.is-active { background: var(--hm-navy); color: var(--hm-white); border-color: var(--hm-navy); }
.hm-topic-count { opacity: 0.55; font-size: 11px; }

.hm-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.hm-blog-card {
  background: var(--hm-white); border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s;
}
.hm-blog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(11,31,58,0.10); }
.hm-blog-card-media { display: block; line-height: 0; background: #eef0f3; }
.hm-blog-card-media img { width: 100%; height: 200px; object-fit: cover; display: block; }
.hm-blog-card-placeholder { display: block; width: 100%; height: 200px; background: #d1d5db; }
.hm-blog-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.hm-blog-tag {
  align-self: flex-start; margin-bottom: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hm-navy); background: rgba(92,225,230,0.18);
  padding: 5px 10px; border-radius: 4px;
}
.hm-blog-card-title { font-size: 18px; line-height: 1.35; margin: 0 0 10px; }
.hm-blog-card-title a { color: var(--hm-navy); }
.hm-blog-card-title a:hover { color: var(--hm-turquoise); }
.hm-blog-card-excerpt { font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.hm-blog-card-meta { font-size: 12px; color: #9ca3af; margin: auto 0 0; }

.hm-pagination { margin-top: 48px; }
.hm-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hm-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px; border-radius: 50px;
  border: 1px solid var(--hm-border); background: var(--hm-white);
  color: var(--hm-navy); font-size: 13px; font-weight: 600;
}
.hm-pagination .page-numbers:hover { border-color: var(--hm-turquoise); }
.hm-pagination .page-numbers.current { background: var(--hm-navy); color: var(--hm-white); border-color: var(--hm-navy); }
.hm-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.hm-faq-item { padding: 24px 0; border-bottom: 1px solid var(--hm-border); }
.hm-faq-item:last-child { border-bottom: none; }
.hm-faq-item h3 { font-size: 19px; margin: 0 0 10px; }
.hm-faq-item .faq-answer { margin: 0; }

.aeo-lead { font-weight: 500; }

@media (max-width: 1024px) { .hm-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .hm-blog-grid { grid-template-columns: 1fr; } }

.hm-updated { color: #9ca3af; }

.hm-card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 860px) { .hm-card-grid-2 { grid-template-columns: 1fr; } }

/* A white card inside a navy section must not inherit the section's white
   text colours, or its heading and body copy render white-on-white. */
.hm-bg-navy .hm-card { color: var(--hm-body-text); }
.hm-bg-navy .hm-card h2,
.hm-bg-navy .hm-card h3,
.hm-bg-navy .hm-card h4 { color: var(--hm-navy); }
.hm-bg-navy .hm-card p { color: var(--hm-body-text); }