/*
 * ============================================================
 *  INFINITE TIES — Document Library CSS
 *  Version: 1.0  |  Target: staging.infinite-ties.com
 * ============================================================
 *
 *  HOW TO ADD THIS TO WORDPRESS:
 *  Appearance → Customize → Additional CSS → paste entire file
 *
 *  NOTE: The @import below MUST be the very first line when
 *  pasting into Additional CSS. If the theme already loads
 *  Inter, you can remove it.
 * ============================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   FULL-BLEED WRAPPER
   Makes .it-lib and .it-doc break out of the theme's content
   column so hero sections can span the full viewport width.
   Works with most themes. If it doesn't, use a Full Width
   page template instead (see implementation guide).
   ============================================================ */
.it-lib,
.it-doc {
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden !important;
}

/* Scoped reset — only affects our elements */
.it-lib *, .it-lib *::before, .it-lib *::after,
.it-doc *, .it-doc *::before, .it-doc *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.it-lib a, .it-doc a { text-decoration: none; color: inherit; }
.it-lib img, .it-doc img { max-width: 100%; height: auto; }

/* Inner container — re-centers content within our full-bleed wrapper */
.it-container {
  max-width: 1160px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  box-sizing: border-box !important;
}

/* ============================================================
   CSS VARIABLES
   ============================================================ */
.it-lib, .it-doc {
  --brand-teal:    #007a87;
  --brand-red:     #e63946;
  --brand-dark:    #0f172a;
  --text-primary:  #1e293b;
  --text-secondary:#64748b;
  --text-muted:    #94a3b8;
  --bg-base:       #f4f6fb;
  --bg-white:      #ffffff;
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --shadow-card:  0 8px 32px rgba(0,0,0,0.09);
  --shadow-hover: 0 28px 60px rgba(0,0,0,0.18);
  --transition:   all 0.3s cubic-bezier(0.4,0,0.2,1);
  --hero-grad:    linear-gradient(135deg, #004c54 0%, #007a87 45%, #3d1a78 100%);
  --grad-1: linear-gradient(145deg, #00ACC1 0%, #1DE9B6 100%);
  --grad-2: linear-gradient(145deg, #1565C0 0%, #5E35B1 100%);
  --grad-3: linear-gradient(145deg, #E91E63 0%, #F06292 100%);
  --grad-4: linear-gradient(145deg, #00838F 0%, #26C6DA 100%);
  --grad-5: linear-gradient(145deg, #AD1457 0%, #E040FB 100%);
  --grad-6: linear-gradient(145deg, #1976D2 0%, #00BCD4 100%);
}

/* ============================================================
   LANDING PAGE — HERO
   ============================================================ */
.it-lib {
  background: var(--bg-base);
}

.itl-hero {
  background: var(--hero-grad) !important;
  padding: 6rem 0 5rem !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100vw !important;
  box-sizing: border-box !important;
}

.itl-hero::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  top: -160px; right: -80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.itl-hero::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  bottom: -250px; left: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(61,26,120,0.35) 0%, transparent 70%);
  pointer-events: none;
}

.itl-hero .it-container { position: relative; z-index: 1; }

.itl-hero-badge {
  display: inline-block;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.9);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.4rem 1rem; border-radius: 100px;
  margin-bottom: 1.75rem;
}

.itl-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 900; color: #ffffff;
  letter-spacing: -0.04em; line-height: 1.1;
  margin-bottom: 1.2rem;
}

.itl-hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #4dd0e1, #b2ebf2);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.itl-hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.72);
  max-width: 480px; margin: 0 auto; line-height: 1.75;
}

/* ============================================================
   HIDE THEME BREADCRUMB
   The theme injects its own breadcrumb above our content —
   hide it on all our library pages so only ours shows.
   ============================================================ */
.it-lib ~ .breadcrumbs,
.it-lib ~ .site-breadcrumb,
.it-lib ~ nav.breadcrumb,
.it-lib ~ .woocommerce-breadcrumb,
.it-lib ~ [class*="breadcrumb"],
.it-doc ~ .breadcrumbs,
.it-doc ~ .site-breadcrumb,
.it-doc ~ nav.breadcrumb,
.it-doc ~ [class*="breadcrumb"] {
  display: none !important;
}

/* Hide theme breadcrumb that appears BEFORE our wrapper too */
.entry-content > [class*="breadcrumb"],
.page-content > [class*="breadcrumb"],
.post-content > [class*="breadcrumb"] {
  display: none !important;
}

/* SiteOrigin / Pace theme specific breadcrumb selectors */
.site-content .breadcrumbs,
.paging-navigation ~ .breadcrumbs,
nav.breadcrumbs { display: none !important; }

/* ============================================================
   BREADCRUMB / BACK NAVIGATION
   Used on sub-widget pages to navigate back to parent section
   ============================================================ */
.itl-breadcrumb {
  background: var(--bg-white);
  border-bottom: 1px solid #e8edf5;
  padding: 0.75rem 0;
}

.itl-breadcrumb .it-container {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.82rem !important;
  color: var(--text-secondary) !important;
}

.itl-breadcrumb a {
  color: var(--brand-teal) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.itl-breadcrumb a:hover { text-decoration: underline !important; }

.itl-breadcrumb-sep { color: var(--text-muted); }

.itl-breadcrumb-current { color: var(--text-primary); font-weight: 500; }

/* ============================================================
   HERO COLOR OVERRIDES FOR SUB-WIDGET SECTIONS
   Add class to .itl-hero to match the parent card's gradient
   ============================================================ */
.itl-hero.hero-strategic { background: linear-gradient(135deg, #007a87 0%, #00ACC1 45%, #1DE9B6 100%) !important; }
.itl-hero.hero-legal     { background: linear-gradient(135deg, #1565C0 0%, #3949AB 45%, #5E35B1 100%) !important; }
.itl-hero.hero-ops       { background: linear-gradient(135deg, #880E4F 0%, #E91E63 45%, #F06292 100%) !important; }
.itl-hero.hero-marketing { background: linear-gradient(135deg, #004D40 0%, #00838F 45%, #26C6DA 100%) !important; }
.itl-hero.hero-membership{ background: linear-gradient(135deg, #6A1B9A 0%, #AD1457 45%, #E040FB 100%) !important; }

/* ============================================================
   LANDING PAGE — PROCESS STEPS
   ============================================================ */
.itl-process {
  background: var(--bg-white);
  border-bottom: 1px solid #e8edf5;
  padding: 3rem 0;
}

.itl-steps {
  display: flex;
  justify-content: center;
}

.itl-step {
  flex: 1; max-width: 260px;
  text-align: center; padding: 0 1.5rem;
  position: relative;
}

.itl-step:not(:last-child)::after {
  content: '';
  position: absolute; top: 21px; right: -4px;
  width: 8px; height: 8px;
  border-top: 2px solid #cbd5e1; border-right: 2px solid #cbd5e1;
  transform: rotate(45deg);
}

.itl-step-num {
  width: 44px; height: 44px; border-radius: 50%;
  margin: 0 auto 0.875rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--hero-grad);
  font-size: 1rem; font-weight: 800; color: white;
  box-shadow: 0 4px 14px rgba(0,122,135,0.3);
}

.itl-step h4 {
  font-size: 0.9rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 0.3rem;
}

.itl-step p {
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5;
}

/* ============================================================
   LANDING PAGE — CARD GRID
   ============================================================ */
.itl-library {
  padding: 5rem 0 6rem;
  background: var(--bg-base);
  width: 100vw !important;
  box-sizing: border-box !important;
}

.itl-section-header {
  text-align: center; margin-bottom: 3rem;
}

.itl-section-header h2 {
  font-size: 2rem; font-weight: 800;
  letter-spacing: -0.03em; color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.itl-section-header p {
  color: var(--text-secondary);
}

.itl-card-grid {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-flow: row wrap !important;
  flex-flow: row wrap !important;
  align-items: stretch !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 2rem !important;
  margin: 0 auto !important;
  width: 100vw !important;
  max-width: 1200px !important;
  box-sizing: border-box !important;
}

/* ============================================================
   HIGH-SPECIFICITY OVERRIDES
   ID selectors beat any class-based theme rules, even with
   !important, ensuring the grid always renders correctly.
   ============================================================ */
#it-card-grid {
  display: flex !important;
  flex-flow: row wrap !important;
  width: calc(100vw - 60px) !important;
  max-width: 1160px !important;
  gap: 1.5rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

#it-card-grid > .itl-card {
  width: 28vw !important;
  min-width: 220px !important;
  max-width: 360px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
  display: block !important;
  padding: 0 !important;
}

/* Inner wrapper handles the vertical flex layout */
#it-card-grid > .itl-card > .itl-card-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
  padding: 2.25rem 2rem 2rem !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

#it-card-grid > .itl-card > .itl-card-inner * {
  max-width: none !important;
  float: none !important;
}

#it-card-grid > .itl-card .itl-card-tag {
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  width: auto !important;
}

#it-card-grid > .itl-card .itl-card-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  flex-shrink: 0 !important;
}

#it-card-grid > .itl-card .itl-card-title {
  color: white !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  flex: 1 !important;
  width: auto !important;
}

#it-card-grid > .itl-card .itl-card-desc {
  color: rgba(255,255,255,0.78) !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  width: auto !important;
}

#it-card-grid > .itl-card .itl-card-cta {
  display: inline-block !important;
  width: auto !important;
  align-self: flex-start !important;
  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: white !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 0.55rem 1.25rem !important;
  border-radius: 100px !important;
  margin-top: 0.25rem !important;
}

@media (max-width: 1024px) {
  #it-card-grid > .itl-card { width: 44vw !important; max-width: 480px !important; }
}
@media (max-width: 600px) {
  #it-card-grid { width: calc(100vw - 2.5rem) !important; }
  #it-card-grid > .itl-card { width: 100% !important; max-width: none !important; }
}

/* ============================================================
   DOCUMENT CARDS
   ============================================================ */
.itl-card {
  border-radius: var(--radius-xl) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease !important;
  box-shadow: var(--shadow-card) !important;
  min-height: 300px !important;
  width: 28vw !important;
  max-width: 360px !important;
  min-width: 220px !important;
  flex-shrink: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
  display: block !important;
}

.itl-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: var(--shadow-hover);
}

.itl-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 55%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 0;
}

.itl-card:hover::before { opacity: 1; }
.itl-card > * { position: relative; z-index: 1; }

/* Invisible overlay anchor — covers the entire card so the whole tile is clickable */
.itl-card-link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  border-radius: var(--radius-xl) !important;
  display: block !important;
}

.itl-card.c1 { background: var(--grad-1); }
.itl-card.c2 { background: var(--grad-2); }
.itl-card.c3 { background: var(--grad-3); }
.itl-card.c4 { background: var(--grad-4); }
.itl-card.c5 { background: var(--grad-5); }
.itl-card.c6 { background: var(--grad-6); }

.itl-card-tag {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.itl-card-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}

.itl-card-icon svg {
  width: 28px; height: 28px;
  stroke: white; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.itl-card-title {
  font-size: 1.15rem; font-weight: 700;
  color: white; line-height: 1.3; flex: 1;
}

.itl-card-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
}

.itl-card-cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.3);
  color: white; font-size: 0.82rem; font-weight: 600;
  padding: 0.55rem 1.25rem; border-radius: 100px;
  transition: background 0.2s, gap 0.2s;
  align-self: flex-start; margin-top: 0.25rem;
}

.itl-card:hover .itl-card-cta { background: rgba(255,255,255,0.38); gap: 0.65rem; }

.itl-card-cta svg {
  width: 13px; height: 13px;
  stroke: white; fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   DETAIL PAGE — HERO
   ============================================================ */
.it-doc {
  background: var(--bg-base);
}

.itd-hero {
  padding: 4rem 0 3.5rem;
  position: relative; overflow: hidden; color: white;
}

.itd-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.itd-hero .it-container { position: relative; z-index: 1; }

.itd-hero-inner {
  display: flex; align-items: center; gap: 2.25rem;
}

.itd-hero-icon {
  width: 88px; height: 88px; min-width: 88px;
  background: rgba(255,255,255,0.2); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.itd-hero-icon svg {
  width: 46px; height: 46px;
  stroke: white; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.itd-doc-tag {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-bottom: 0.5rem;
}

.itd-hero-text h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800; letter-spacing: -0.035em;
  line-height: 1.2; margin-bottom: 0.75rem; color: white;
}

.itd-hero-text p {
  font-size: 1rem;
  color: rgba(255,255,255,0.78);
  max-width: 540px; line-height: 1.65;
}

/* ============================================================
   DETAIL PAGE — CONTENT LAYOUT
   ============================================================ */
.itd-content {
  padding: 4.5rem 0 6rem;
}

.itd-content-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3.5rem;
  align-items: start;
}

.itd-section-title {
  font-size: 1.4rem; font-weight: 700;
  color: var(--text-primary); letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

/* ============================================================
   DETAIL PAGE — VIDEO
   ============================================================ */
.itd-video-wrapper {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9; border-radius: var(--radius-md);
  overflow: hidden; background: #1e293b;
  box-shadow: 0 16px 48px rgba(0,0,0,0.16);
  margin-bottom: 1.75rem;
}

.itd-video-wrapper iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: none;
}

.itd-video-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.1rem;
  background: linear-gradient(145deg, #1e293b 0%, #2c3e6b 55%, #3d2068 100%);
}

.itd-play-btn {
  width: 76px; height: 76px;
  background: rgba(255,255,255,0.14);
  border: 2px solid rgba(255,255,255,0.36);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition); cursor: pointer;
}

.itd-play-btn:hover {
  background: rgba(255,255,255,0.24);
  transform: scale(1.1);
}

.itd-play-btn svg {
  width: 28px; height: 28px;
  fill: white; margin-left: 4px;
}

.itd-video-label {
  color: rgba(255,255,255,0.55);
  font-size: 0.85rem; font-weight: 500;
}

.itd-text-section { margin-top: 2.25rem; }

.itd-text-section p {
  font-size: 0.95rem; color: var(--text-secondary);
  line-height: 1.8; margin-bottom: 1rem;
}

.itd-text-section ul {
  margin: 0.75rem 0 0 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  color: var(--text-secondary); font-size: 0.925rem; line-height: 1.6;
}

.itd-text-section ul li strong { color: var(--text-primary); }

/* ============================================================
   DETAIL PAGE — SIDEBAR / DOWNLOAD CARD
   ============================================================ */
.itd-sidebar {
  position: sticky;
  top: 88px; /* adjust if theme header is taller */
}

.itd-sidebar-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: 2rem 1.875rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}

.itd-sidebar-accent {
  height: 4px;
  margin: -2rem -1.875rem 1.5rem;
}

.itd-sidebar-tag {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.4rem;
}

.itd-sidebar-card h3 {
  font-size: 1.1rem; font-weight: 700;
  color: var(--text-primary); letter-spacing: -0.02em;
  line-height: 1.35; margin-bottom: 1.5rem;
}

.itd-divider {
  height: 1px;
  background: rgba(0,0,0,0.07);
  margin: 1.5rem 0;
}

.itd-features-label {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: 0.875rem;
}

.itd-features {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.625rem;
  margin-bottom: 1.75rem;
}

.itd-features li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: 0.875rem; color: var(--text-primary); line-height: 1.5;
}

.itd-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; min-width: 20px;
  background: #dcfce7; border-radius: 50%; margin-top: 1px;
}

.itd-check svg {
  width: 10px; height: 10px;
  stroke: #16a34a; fill: none;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   DOWNLOAD BUTTON
   ============================================================ */
.itd-download-btn {
  display: block !important;
  text-align: center !important;
  width: 100% !important; padding: 1rem 1.5rem !important;
  color: white !important; font-size: 1rem !important; font-weight: 700 !important;
  border-radius: var(--radius-md) !important; border: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none !important; letter-spacing: -0.01em !important;
  cursor: pointer !important; box-sizing: border-box !important;
}

.itd-download-btn:hover {
  transform: translateY(-3px) !important;
  color: white !important;
}

/* Inner span handles icon + text side-by-side, centered inside the block-level anchor */
.itd-btn-inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
}

.itd-download-btn svg {
  width: 22px !important; height: 22px !important;
  stroke: white !important; fill: none !important;
  stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
  flex-shrink: 0 !important;
}

.itd-download-note {
  text-align: center; font-size: 0.775rem;
  color: var(--text-muted); margin-top: 0.7rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .itl-card { width: 44vw !important; max-width: 480px !important; }
  .itl-card-grid { padding: 0 1.5rem !important; }
  .itd-content-grid { grid-template-columns: 1fr; }
  .itd-sidebar { position: static; }
}

@media (max-width: 768px) {
  .it-container { padding: 0 1.25rem !important; }
  .itl-hero { padding: 4.5rem 0 4rem; }
  .itl-steps { flex-direction: column; align-items: center; gap: 2rem; }
  .itl-step:not(:last-child)::after { display: none; }
  .itd-hero-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
  .itl-card { width: 90vw !important; max-width: none !important; }
  .itd-content { padding: 3rem 0 4rem; }
}