/*
Theme Name:   Growth Pathways
Theme URI:    https://growthpathwaysacademy.com/
Description:  Astra child theme for Growth Pathways. Carries the small amount of front-end polish that no native Elementor control exposes: the brand's 45 degree clipped corner, card hover lift, WPForms details, and Xpro mobile-drawer branding. Everything else is built with native Elementor widgets and Global Colors / Global Fonts in Site Settings.
Author:       Daloren Group
Author URI:   https://growthpathwaysacademy.com/
Template:     astra
Version:      1.0.0
Text Domain:  growth-pathways-child
*/

/* ============================================================
   Growth Pathways brand polish
   Scope is deliberately tiny. Anything that CAN be set from a
   native Elementor widget control is set there, not here.
   Colors reference Elementor Global Colors, so rebranding from
   Site Settings still flows through this file.
   ============================================================ */

/* ---- Brand: one 45deg clipped corner, bottom-left ---- */
.gp-clip img{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 88%);
}
.gp-clip-video .elementor-wrapper,
.gp-clip-video video{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 84%);
}
@media (max-width: 640px){
  .gp-clip img{ clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%, 0 92%); }
  .gp-clip-video .elementor-wrapper,
  .gp-clip-video video{ clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 90%); }
}

/* ---- Image zoom on card hover ---- */
.gp-clip img{ transition: transform .35s ease; }
.e-con:hover > .e-con-inner .gp-clip img,
.e-con:hover .gp-clip img{ transform: scale(1.04); }
.gp-clip{ overflow: hidden; }

/* ---- Contain the Xpro off-canvas drawer ----
   Xpro parks its mobile menu at position:fixed / left:100vw when closed, which
   expands document scrollWidth and creates a horizontal scrollbar on phones.
   overflow-x:clip contains it WITHOUT creating a scroll container, so the
   sticky header keeps working (overflow-x:hidden would break it). */
html{ overflow-x: clip; }
body{ overflow-x: clip; }

/* ---- Tier badge ----
   The badge is an Elementor container, and a container with content_width:full
   is given width:100%, so it stretched into a full-column empty rectangle.
   Containers ignore the CSS Classes field, so this is hooked by element ID. */
#gp-tierbadge{
  width: fit-content !important;
  max-width: 100%;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}
#gp-tierbadge > .e-con-inner{ width: auto !important; }

/* ---- Card hover: lift + shadow ----
   Elementor's container transform-hover control does not emit CSS here, and
   containers ignore the CSS Classes field, so these are hooked by element ID. */
[id^="gp-vcard-"],
[id^="gp-tier-"],
[id^="gp-prog-"],
[id^="gp-c0-"],[id^="gp-c1-"],[id^="gp-c2-"],[id^="gp-c3-"],
[id^="gp-c4-"],[id^="gp-c5-"],[id^="gp-c6-"],
[id^="gp-mentor-"]{
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
[id^="gp-vcard-"]:hover,
[id^="gp-tier-"]:hover,
[id^="gp-prog-"]:hover,
[id^="gp-c0-"]:hover,[id^="gp-c1-"]:hover,[id^="gp-c2-"]:hover,[id^="gp-c3-"]:hover,
[id^="gp-c4-"]:hover,[id^="gp-c5-"]:hover,[id^="gp-c6-"]:hover,
[id^="gp-mentor-"]:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(20,23,26,.13);
}
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
  [id^="gp-vcard-"]:hover,[id^="gp-tier-"]:hover,[id^="gp-prog-"]:hover{ transform:none; }
}

/* ---- Links inside body copy ---- */
.elementor-widget-text-editor a{
  color: var(--e-global-color-gpsignal);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color .18s ease;
}
.elementor-widget-text-editor a:hover{ color: var(--e-global-color-gpgraph); }

/* ---- Icon list links ---- */
.elementor-widget-icon-list .elementor-icon-list-text a{
  color: inherit; text-decoration: none; border-bottom: 1px solid rgba(128,128,128,.4);
}
.elementor-widget-icon-list .elementor-icon-list-text a:hover{ color: var(--e-global-color-gpsignal); }

/* ---- WPForms details the widget does not expose ---- */
.wpforms-container select{
  -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--e-global-color-gpsteel) 50%),
                   linear-gradient(135deg,var(--e-global-color-gpsteel) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
  border-radius:0 !important;
}
.wpforms-container textarea{ min-height:140px; border-radius:0 !important; }
.wpforms-container .wpforms-field-label{ font-weight:400 !important; }
.wpforms-container .wpforms-required-label{ color: var(--e-global-color-gpsignal) !important; }
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus{ outline:2px solid var(--e-global-color-gpsignal); outline-offset:1px; }

/* ---- Astra: let Elementor sections run edge to edge ---- */
.ast-page-builder-template .site-content > .ast-container{ max-width:100%; padding:0; }
.ast-page-builder-template .entry-header{ display:none; }

/* ---- Xpro mobile drawer: brand it ----
   The widget's responsive controls color the menu ITEMS but not the drawer
   panel or its close button, which ship light gray and clash with the header. */
.xpro-elementor-horizontal-navbar-wrapper{
  background: var(--e-global-color-gpgraph) !important;
  border-left: 1px solid var(--e-global-color-gpinkrule);
}
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-menu-close{
  background: transparent !important;
  border: 1px solid var(--e-global-color-gpinkrule) !important;
  border-radius: 0 !important;
  color: var(--e-global-color-gpwhite) !important;
}
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-menu-close i,
.xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-menu-close svg{
  color: var(--e-global-color-gpwhite) !important;
  fill: var(--e-global-color-gpwhite) !important;
}
.xpro-elementor-horizontal-navbar-wrapper .menu-item{
  border-bottom: 1px solid var(--e-global-color-gpinkrule);
}
@media (max-width: 1024px){
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link{
    font-family: Archivo, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    padding: 18px 20px !important;
  }
}

/* ---- Xpro nav: inherit brand instead of generic blue ---- */
.xpro-elementor-nav-menu a,
.xpro-menu-nav a{ text-decoration:none; }

/* ---- Enrollment section bullet list ----
   Elementor centers the icon against the whole item, so a two-line bullet
   dropped its square to the vertical middle instead of sitting on the first
   line. Align to the top and nudge down to the cap height. */
#register .elementor-icon-list-item {
  align-items: flex-start;
}
#register .elementor-icon-list-item > .elementor-icon-list-icon {
  margin-top: 6px;
}

/* The "Already enrolled?" line is a separate text widget directly after the
   list. Indent it to the bullet text column (icon box is 15px wide) and drop it
   clear of the last bullet so it reads as its own line, not a fourth bullet. */
#register .elementor-widget-icon-list + .elementor-widget-text-editor {
  margin-top: 30px;
  padding-left: 15px;
}
#register .elementor-widget-icon-list + .elementor-widget-text-editor p {
  margin-top: 0;
}

/* ============================================================
   Card grids and FAQ accordions
   ============================================================ */

/* ---- Equal-height cards ----
   Each card is a bordered box nested inside a gutter wrapper. The row and the
   wrapper already stretch to the tallest item, but the bordered box is a flex
   item in a COLUMN wrapper, so it sized to its own content and every card in a
   row ended up a different height. Let it fill the wrapper instead.
   Applies at every breakpoint: when a row wraps, cards match within each line. */
.e-con.e-yes {
  flex-grow: 1;
}

/* The inner content column should fill the card too, so padding stays put once
   the box is taller than its text. */
.e-con.e-yes > .e-con {
  flex-grow: 1;
}

/* ---- FAQ accordion ----
   Elementor gave the open panel padding only at the bottom, so the answer sat
   flush against the divider with roughly 49px of dead space beneath it (the
   paragraph's own bottom margin plus the panel padding). Even it out. */
/* Panel padding itself is set on the widget (content_padding), so it stays
   editable in Elementor rather than being fought with CSS here. */
.elementor-accordion .elementor-tab-content > *:last-child {
  margin-bottom: 0;
}

/* ---- Header auth items ----
   Sign in / Dashboard / Sign out are set apart from the site nav: they are
   account actions, not places to browse. The header column widths (logo 22%,
   menu 78%) are set on the Xpro header template so nine items fit one row. */
.xpro-elementor-horizontal-navbar-nav li.gp-auth > a.menu-link {
  opacity: .78;
}
.xpro-elementor-horizontal-navbar-nav li.gp-auth > a.menu-link:hover,
.xpro-elementor-horizontal-navbar-nav li.gp-auth > a.menu-link:focus {
  opacity: 1;
}

/* ---- Hero video framing ----
   The hero containers are wider than 16:9, so a cover-fit video loses a band off
   the top and the bottom (86px each at 1280x547). Several clips place heads in
   that top band, which read as the header cutting them off. Aligning the video to
   the top removes the top crop entirely and takes the whole loss off the bottom,
   where these shots carry only floor and furniture.

   Top alignment rather than a smaller offset on purpose: how much gets cropped
   changes with the window width, but the top edge does not, so heads stay safe at
   every viewport. This is a no-op on mobile, where the hero is taller than the
   video and only the sides are cropped.

   The home hero is framed correctly as-is and is deliberately excluded.
   Only hero backgrounds are affected; the accent clips are video widgets. */
.elementor-background-video-container video {
  object-position: 50% 0%;
}
body.page-id-44 .elementor-background-video-container video {
  object-position: 50% 50%;
}

/* Course card track marker (design system v1.4, 25 September 2026). A 3px bar
   above each Foundations course card. As a flex child of the card it would
   otherwise share the card's spare height with the body box and grow. */
.e-con.gp-track-marker,
.gp-track-marker {
	flex: 0 0 3px !important;
	height: 3px;
	min-height: 3px !important;
	max-height: 3px;
	padding: 0 !important;
}