/* =====================================================================
   TIVALCO — Astra child theme custom styles
   Design tokens mirror the approved HTML prototype's "ocean" palette.
   ===================================================================== */

:root{
  --tv-navy:#0B1F45;
  --tv-navy-deep:#08152F;
  --tv-blue:#0037CF;
  --tv-blue-hover:#002A9E;
  --tv-blue-light:#429AFE;
  --tv-gold:#D9CE93;
  --tv-gold-hover:#C7B87A;
  --tv-bg-1:#FBFAF8;
  --tv-bg-2:#F2F6FC;
  --tv-heading:#0B1F45;
  --tv-body:#48566B;
  --tv-card-body:#5A6A80;
  --tv-border:#E7ECF3;
  --tv-nav-text:#33445E;
  --tv-nav-muted:#8A97A8;
  --tv-footer-text:#8FA0C2;
  --tv-footer-muted:#5C6E8F;
  --tv-font: 'Inter', Helvetica, Arial, sans-serif;
}

body{ font-family: var(--tv-font); color:#16202B; background:var(--tv-bg-1); }
*{ box-sizing:border-box; }

/* Force our page templates to take the full content row — these pages have
   no sidebar, but Astra's .ast-container is a flex row by default. Without
   this, #primary can end up sized as if a sidebar sibling exists. */
.ast-container{ display:block !important; padding-top:0 !important; }
#primary.content-area.primary{ width:100% !important; max-width:none !important; float:none !important; margin-top:0 !important; padding-top:0 !important; }
#main.site-main, .site-content{ padding-top:0 !important; margin-top:0 !important; }

/* Our templates render their own hero/banner — hide Astra's default page
   title bar so it doesn't add an empty strip above it. */
.ast-container .page-header,
.ast-container .entry-header,
.ast-archive-title,
.page .entry-header{
  display:none !important;
}

/* Full-bleed hero/banner — Astra's container is boxed with side padding,
   so break these two elements out to the true viewport edge. */
html{ overflow-x:hidden; }
.tv-hero, .tv-banner, .tv-section, .tv-training, .tv-cta, .tv-contact-section{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
a{ color:var(--tv-blue); text-decoration:none; }
a:hover{ color:var(--tv-blue-light); }

/* ---------------------------------------------------------------------
   Astra header builder overrides — makes the stock Astra header match
   the approved design without touching header.php.
   Configure in Customizer: Header Builder → Logo, Menu, and a Button
   element (give the button the CSS class "tv-nav-cta").
   --------------------------------------------------------------------- */
.ast-main-header-bar{
  background: rgba(255,255,255,0.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tv-border) !important;
}
.main-header-bar .main-header-bar-navigation .main-navigation ul li a,
.ast-builder-menu-1 .menu-link{
  font-family: var(--tv-font);
  font-weight:600;
  font-size:16px;
  color: var(--tv-nav-text) !important;
}
.main-header-bar .main-header-bar-navigation .main-navigation ul li.current-menu-item > a{
  color: var(--tv-blue) !important;
  font-weight:700;
}
.ast-custom-logo, .site-logo-img{ height:48px; width:auto; border-radius:4px; }
a.tv-nav-cta,
.ast-builder-button-wrap a.tv-nav-cta{
  font-size:16px !important;
  font-weight:700 !important;
  color:#fff !important;
  background: var(--tv-blue) !important;
  padding:10px 20px !important;
  border-radius:999px !important;
}
a.tv-nav-cta:hover{ background: var(--tv-blue-hover) !important; }

/* 1.4.0: 16px nav text needs tighter item spacing so the menu stays on one row. */
.ast-builder-menu-1 .menu-item > .menu-link,
.main-header-bar .main-navigation ul li > a{ padding-left:12px !important; padding-right:12px !important; white-space:nowrap; }
.ast-builder-menu-1 .main-header-menu{ flex-wrap:nowrap; }
a.tv-nav-cta{ white-space:nowrap; }

/* Footer builder — dark bar, muted links, centered copyright */
.ast-footer-overlay,
footer.site-footer .site-footer-focus-item{
  background: var(--tv-navy-deep) !important;
}
footer.site-footer a{
  color: var(--tv-footer-text) !important;
  font-size:16px;
  font-weight:600;
}
footer.site-footer .ast-footer-copyright p,
footer.site-footer .ast-footer-copyright{
  color: var(--tv-footer-muted) !important;
  font-size:16px;
}

/* =====================================================================
   Page banner (interior pages)
   ===================================================================== */
.tv-banner{ position:relative; padding:100px 40px 90px; overflow:hidden; }
.tv-banner__media{ position:absolute; inset:0; }
.tv-banner__media img{ width:100%; height:100%; object-fit:cover; }
.tv-banner__overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(4,16,54,0.92) 0%, rgba(51,153,254,0.7) 60%, rgba(51,153,254,0.35) 100%);
}
.tv-banner__content{ position:relative; max-width:1180px; margin:0 auto; }
.tv-banner__back{ font-size:16px; font-weight:600; color:#CFE0FF; }
.tv-banner__title{ font-size:56px; font-weight:800; color:#fff; margin:0; max-width:860px; line-height:1.15; text-wrap:pretty; }

.tv-eyebrow{ display:block; font-size:16px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#3660AC; margin:0 0 14px; }
.tv-eyebrow--gold{ color:var(--tv-gold); margin:22px 0 14px; }

/* =====================================================================
   Generic section / typography helpers
   ===================================================================== */
.tv-section{ padding:100px 40px; }
.tv-section--tight-top{ padding-top:60px; }
.tv-section--tight-bottom{ padding-bottom:60px; }
.tv-section--bg1{ background: var(--tv-bg-1); }
.tv-section--bg2{ background: var(--tv-bg-2); }
.tv-section--navy{ background: var(--tv-navy); color:#fff; }

.tv-container{ max-width:1180px; margin:0 auto; }
.tv-container--narrow{ max-width:820px; margin:0 auto; text-align:center; }

.tv-h2{ font-size:40px; font-weight:800; color:var(--tv-heading); margin:0 0 22px; line-height:1.2; }
.tv-body{ font-size:16px; line-height:1.8; color:var(--tv-body); margin:0 0 20px; }
.tv-body:last-child{ margin-bottom:0; }
/* Beat Astra's .entry-content p sizing so body copy is always 16/1.8. */
.entry-content p.tv-body, .tv-section p.tv-body{ font-size:16px; line-height:1.8; }
.entry-content p.tv-lead, .tv-section p.tv-lead{ font-size:20px; line-height:1.8; }
.tv-lead{ font-size:20px; line-height:1.8; color:var(--tv-body); margin:0; }

/* Two/Three-up grids */
.tv-grid-2{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:72px; align-items:start; }
.tv-grid-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }

.tv-card{ background:#fff; border:1px solid var(--tv-border); border-radius:16px; padding:30px; }
.tv-card__dot{ width:40px; height:40px; border-radius:10px; margin-bottom:16px; }
.tv-card h3{ font-size:22px; font-weight:700; color:var(--tv-heading); margin:0 0 8px; }
.tv-card p{ font-size:16px; line-height:1.8; color:var(--tv-card-body); margin:0; }

.tv-stat-panel{ background:var(--tv-bg-2); border-radius:18px; padding:36px; display:flex; flex-direction:column; gap:26px; }
.tv-stat-panel .tv-stat-num{ font-size:40px; font-weight:800; color:var(--tv-blue); }
.tv-stat-panel .tv-stat-label{ font-size:16px; font-weight:600; color:var(--tv-nav-text); }
.tv-stat-panel .tv-divider{ height:1px; background:#DCE4F5; }
hr.tv-divider{ border:none; margin:0; }

/* =====================================================================
   CTA band
   ===================================================================== */
.tv-cta{ padding:80px 40px; background:var(--tv-navy); text-align:center; }
.tv-cta__inner{ max-width:640px; margin:0 auto; }
.tv-cta h2{ font-size:40px; font-weight:800; color:#fff; margin:0 0 16px; }
.tv-cta p{ font-size:16px; line-height:1.8; color:#B9C4DC; margin:0 0 28px; }
.tv-cta__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.tv-btn{ display:inline-block; font-size:16px; font-weight:700; padding:14px 28px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; }
.wp-block-button.tv-btn{ background:none; border:none; padding:0; border-radius:0; }
.wp-block-button.tv-btn .wp-block-button__link{ display:inline-block; font-size:16px; font-weight:700; padding:14px 28px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; }
.tv-btn--gold, .wp-block-button.tv-btn--gold .wp-block-button__link{ color:var(--tv-navy); background:var(--tv-gold); }
.tv-btn--gold:hover, .wp-block-button.tv-btn--gold .wp-block-button__link:hover{ color:var(--tv-navy); background:var(--tv-gold-hover); }
.tv-btn--outline, .wp-block-button.tv-btn--outline .wp-block-button__link{ color:#fff; background:transparent; border:1.5px solid rgba(255,255,255,0.5); padding:12.5px 28px; }
.tv-btn--outline:hover, .wp-block-button.tv-btn--outline .wp-block-button__link:hover{ color:#fff; border-color:#fff; }
.tv-btn--blue, .wp-block-button.tv-btn--blue .wp-block-button__link{ color:#fff; background:var(--tv-blue); }
.tv-btn--blue:hover, .wp-block-button.tv-btn--blue .wp-block-button__link:hover{ color:#fff; background:var(--tv-blue-hover); }

/* =====================================================================
   Home page specific
   ===================================================================== */
.tv-hero{ position:relative; min-height:640px; display:flex; align-items:center; overflow:hidden; }
.tv-hero__media{ position:absolute; inset:0; }
.tv-hero__media img{ width:100%; height:100%; object-fit:cover; }
.tv-hero__overlay{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(4,16,54,0.92) 0%, rgba(51,153,254,0.75) 45%, rgba(51,153,254,0.35) 100%); }
.tv-hero__content{ position:relative; max-width:1280px; margin:0 auto; padding:110px 40px 130px; width:100%; }
.tv-hero__content-inner{ max-width:768px; }
.tv-hero h1{ font-size:64px; line-height:1.1; font-weight:800; color:#fff; margin:0 0 22px; text-wrap:pretty; }
.tv-hero p{ font-size:20px; line-height:1.6; color:#DCE4F5; margin:0 0 36px; max-width:620px; }
.tv-hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }

.tv-stat-card{ position:absolute; bottom:-22px; left:-22px; background:var(--tv-blue); color:#fff; padding:22px 26px; border-radius:14px; box-shadow:0 20px 40px -12px rgba(0,55,207,0.45); max-width:220px; }
.tv-stat-card .tv-stat-card__num{ font-size:40px; font-weight:800; }
.tv-stat-card .tv-stat-card__label{ font-size:16px; opacity:0.85; font-weight:600; }

.tv-media-frame{ position:relative; }
.tv-media-frame img{ width:100%; height:520px; object-fit:cover; border-radius:18px; }

.tv-training{ background:var(--tv-navy); color:#fff; padding:100px 40px; }
.tv-training-card{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:40px; }
.tv-training-card ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:16px; }
.tv-training-card li{ display:flex; gap:14px; font-size:16px; line-height:1.5; color:#E4E9F5; }
.tv-training-card li .tv-num{ color:var(--tv-gold); font-weight:700; }

.tv-avatar{ width:76px; height:76px; border-radius:50%; color:var(--tv-gold); font-size:32px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.tv-avatar-lg{ width:180px; height:180px; border-radius:16px; color:var(--tv-gold); font-size:56px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Pattern-only helper classes (used by inc/patterns.php blocks) */
.has-white-color{ color:#fff; }
.tv-service-detail-row{ column-gap:56px; }
.tv-card__link a{ display:inline-block; font-size:16px; font-weight:700; color:var(--tv-blue); }
.tv-service-list{ list-style:none; margin:0; padding:0; font-size:16px; line-height:2; color:var(--tv-body); columns:2; column-gap:32px; }
.tv-leadership-bio{ margin-bottom:48px; }
.tv-avatar-photo img{ width:180px; height:225px; object-fit:cover; border-radius:16px; }
.tv-role{ font-size:16px; font-weight:600; color:var(--tv-blue); margin:0 0 16px; }
.tv-info-bar{ background:#fff; border:1px solid var(--tv-border); border-radius:20px; padding:40px; }
.tv-info-label{ font-size:16px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--tv-nav-muted); margin:0 0 6px; }
.tv-info-value{ font-size:16px; font-weight:700; color:var(--tv-heading); line-height:1.8; margin:0; }
.tv-contact-field{ margin-bottom:22px; }
.tv-contact-field .tv-info-label{ color:var(--tv-blue); }
.tv-contact-field p:not(.tv-info-label){ font-size:16px; font-weight:600; color:var(--tv-heading); margin:0; }
.tv-schedule-table table{ width:100%; border-collapse:collapse; }
.tv-schedule-table thead tr{ background:var(--tv-blue); }
.tv-schedule-table th{ color:#fff; font-size:16px; font-weight:700; text-align:left; padding:16px 18px; }
.tv-schedule-table td{ padding:18px; font-size:16px; color:var(--tv-body); border-top:1px solid var(--tv-border); }
.tv-schedule-table tbody tr:nth-child(even){ background:var(--tv-bg-2); }
.tv-schedule-table td a{ font-weight:700; }

/* Contact form */
.tv-form-card{ background:#fff; border:1px solid var(--tv-border); border-radius:18px; padding:40px; }
.tv-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.tv-form-card label{ display:block; font-size:16px; font-weight:600; color:var(--tv-nav-text); margin-bottom:6px; }
.tv-form-card input:not([type=checkbox]):not([type=radio]), .tv-form-card textarea, .tv-form-card select{
  width:100%; padding:12px 14px; border:1px solid #DCE4F5; border-radius:10px;
  font-size:16px; color:#16202B; font-family:var(--tv-font);
}
.tv-form-card textarea{ resize:vertical; }
.tv-form-card select{ background:#fff; }
.tv-form-card label:has(input[type=checkbox]){ display:flex; align-items:center; gap:10px; margin:0; }
.tv-form-card form{ margin:0; display:flex; flex-direction:column; gap:18px; }
.tv-contact-field p{ line-height:1.6; }
.tv-map-placeholder{
  background:var(--tv-bg-2); border-radius:16px; height:220px; display:flex; align-items:center; justify-content:center;
  color:var(--tv-nav-muted); font-size:16px; font-family:monospace; text-align:center; padding:20px;
}

/* =====================================================================
   WordPress core layout reconciliation
   These pages were designed as hand-tuned CSS grids. WordPress emits its
   own per-block layout rules — .wp-block-columns.is-layout-flex sets
   display:flex at specificity (0,2,0), which OVERRIDES our .tv-grid-2
   (0,1,0). Without the overrides below the two-column patterns silently
   fall back to WP's equal-width flex instead of the 1.1fr/0.9fr design.
   ===================================================================== */

/* Force the designed grid ratio onto Columns-based patterns. */
.wp-block-columns.tv-grid-2{
  display:grid !important;
  grid-template-columns:1.1fr 0.9fr;
  gap:72px;
  align-items:start;
}
.wp-block-columns.tv-grid-2 > .wp-block-column{ margin:0 !important; flex-basis:auto !important; }

/* Card grid group is is-layout-flow; WP's flow rule adds margin-block-start
   between siblings, which offsets rows once the group becomes a grid. */
.tv-grid-cards.is-layout-flow > *{ margin-block:0 !important; }

/* Absolutely/relatively positioned banner & hero children pick up stray
   flow margins from WP — positioning owns their layout, so zero them. */
.tv-banner > *, .tv-hero > *{ margin-block:0 !important; }

/* Kill default figure/image block margins where the design pins the image. */
.tv-banner__media, .tv-hero__media,
.tv-media-frame .wp-block-image,
.tv-avatar-photo.wp-block-image,
.tv-training-card .wp-block-image{ margin:0 !important; }

/* WP list block padding/markers on our styled lists. */
.tv-training-card ul.wp-block-list,
.tv-service-list.wp-block-list{ padding-inline-start:0; }

/* Column-set gaps WP injects on the detail/bio/contact rows. */
.wp-block-columns.tv-service-detail-row{ gap:56px; }
.wp-block-columns.tv-leadership-bio{ gap:40px; align-items:flex-start; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 900px){
  .tv-grid-2, .tv-form-row, .tv-contact-grid{ grid-template-columns:1fr !important; gap:32px; }
  .wp-block-columns.tv-grid-2{ grid-template-columns:1fr !important; gap:32px; }
  .wp-block-columns.tv-service-detail-row,
  .wp-block-columns.tv-leadership-bio{ gap:28px; }
  .tv-service-list{ columns:1; }
  .tv-hero h1{ font-size:40px; }
  .tv-banner__title{ font-size:36px; }
  .tv-h2, .tv-cta h2{ font-size:32px; }
  .tv-section, .tv-cta, .tv-banner, .tv-training, .tv-hero__content{ padding-left:24px; padding-right:24px; }
}


/* =====================================================================
   1.5.0 — Transparent header on Home: the hero photo + gradient run up
   behind the navigation. Body class added in functions.php.
   ===================================================================== */
body.tv-transparent-header #masthead{ position:absolute; top:0; left:0; right:0; z-index:100; background:transparent !important; border:0 !important; box-shadow:none !important; }
body.tv-transparent-header #masthead .ast-primary-header-bar,
body.tv-transparent-header #masthead .main-header-bar,
body.tv-transparent-header #masthead .ast-above-header-bar,
body.tv-transparent-header #masthead .ast-below-header-bar,
body.tv-transparent-header #masthead .ast-main-header-wrap{ background:transparent !important; border:0 !important; box-shadow:none !important; }
body.tv-transparent-header.admin-bar #masthead{ top:32px; }
@media (min-width:922px){
  body.tv-transparent-header #masthead .main-header-menu > .menu-item > .menu-link,
  body.tv-transparent-header #masthead .ast-builder-menu-1 .menu-item > .menu-link,
  body.tv-transparent-header #masthead .ast-header-html,
  body.tv-transparent-header #masthead .ast-header-html a{ color:#fff !important; }
  body.tv-transparent-header #masthead a.tv-nav-cta{ background:#fff !important; color:#0B1F45 !important; }
}
body.tv-transparent-header #masthead .ast-mobile-menu-trigger-minimal,
body.tv-transparent-header #masthead .menu-toggle{ color:#fff !important; }
body.tv-transparent-header #masthead .ast-mobile-menu-trigger-minimal svg{ fill:#fff !important; }
body.tv-transparent-header .tv-hero__overlay{ background:linear-gradient(180deg, rgba(4,16,54,0.55) 0%, rgba(4,16,54,0) 180px), linear-gradient(100deg, rgba(4,16,54,0.92) 0%, rgba(51,153,254,0.75) 45%, rgba(51,153,254,0.35) 100%); }
body.tv-transparent-header .tv-hero{ min-height:720px; }
body.tv-transparent-header .tv-hero__content{ padding-top:190px; }
@media (max-width:900px){ body.tv-transparent-header .tv-hero__content{ padding-top:150px; } }

/* Workshop Schedule ([tivalco_schedule]) — stacked cards on narrow screens (1.8.1) */
@media (max-width:760px){
  .tv-schedule__head{ display:none !important; }
  .tv-schedule__row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:10px 16px; padding:22px 20px; align-items:start !important; }
  .tv-schedule__row > div{ padding:0 !important; }
  .tv-schedule__row .tv-sc-id{ grid-column:1 / -1; color:#3660AC !important; }
  .tv-schedule__row .tv-sc-title{ grid-column:1 / -1; font-size:20px !important; line-height:1.4; margin-bottom:4px; }
  .tv-schedule__row .tv-sc-btn{ grid-column:1 / -1; display:grid; margin-top:8px; }
  .tv-schedule__row .tv-sc-btn a, .tv-schedule__row .tv-sc-btn button{ text-align:center; }
}

/* IT Solutions — Salesforce Certified box stacks on mobile (1.9.5) */
@media (max-width:860px){
  .tv-sf-box{ grid-template-columns:1fr !important; padding:32px 24px !important; gap:28px !important; }
}