/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    PTST custom styles. Feature-specific styles live in separate files:
      /css/ptst-modal.css         — booking & enquiry modal
      /css/training-calendar.css  — public training calendar (FullCalendar)
      /css/course-accordion.css   — course content accordion (single-course pages)
      /css/accommodation.css      — accommodation cards (course + class pages)

    Each is enqueued conditionally by its owning PHP file (see inc/shortcodes/).
    This file holds the cross-cutting styles that aren't tied to a single feature.
*/

:root {
    --ptst-dark-section-bg: rgb(0, 43, 87);
    --brand-gold: #FCB035;
}

body,
input,
textarea,
select,
button {
  font-family: var(--font-sans) !important;
}

/* Make sure headings inherit and use design system weights */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--font-sans);
  color: var(--ink, #1a1a2e);
}

h1, .elementor h1 {
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-tracking, -0.02em);
}

h2, .elementor h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-tracking, -0.015em);
}

h3, .elementor h3 {
  font-size: var(--type-h3-size, 22px);
  font-weight: var(--type-h3-weight, 700);
  line-height: var(--type-h3-lh, 1.3);
}


/* ============================================================================
 * Course profile — accreditation & delivery partner logos
 *
 * Container .course-logos rendered by [display_logos] in
 * inc/shortcodes/course.php. Appears on single-course pages in the dark
 * hero section (hence white text). Three layout variants:
 *
 *   .accrediting-body-logo  → solo accreditation logo
 *   .single-logo            → one logo when accred name == partner name
 *   .dual-logos             → accred + partner shown side-by-side
 *
 * All three image variants share the same max-height for consistency.
 * ============================================================================ */
.course-logos {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: white;
}

.course-logos .dual-logos {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.accrediting-body-logo,
.delivery-partner-logo {
    text-align: center;
}

.accrediting-body-logo,
.delivery-partner-logo img {
    display: inline-block;
    max-width: 100%;
}

.course-logos .accrediting-body-logo img,
.course-logos .delivery-partner-logo img,
.course-logos .single-logo img {
    max-height: 150px;
    width: auto;
}


/* ============================================================================
 * Breadcrumbs
 *
 * Rendered by [course_breadcrumb] in inc/shortcodes/course.php and
 * [class_breadcrumb] in inc/shortcodes/class.php. Designed for dark hero
 * backgrounds — white text with opacity for separators.
 * ============================================================================ */
.ptst-breadcrumb,
.ptst-breadcrumb a,
.ptst-breadcrumb span {
    color: #F8FAFB !important;
    font-size: 13px;
    text-decoration: none;
    opacity: 0.85;
}

.ptst-breadcrumb a:hover {
    opacity: 1;
    text-decoration: underline;
    color: #F8FAFB;
}

.ptst-breadcrumb span {
    margin: 0 6px;
    opacity: 0.5;
}










/* ============================================================================
 * Class seats bar — chip variant (compact)
 *
 * Rendered by [class_seats_bar] in inc/shortcodes/class.php. Used in
 * Elementor class chip cards (upcoming classes loop on course pages).
 * ============================================================================ */
.ptst-seats-bar-wrap {
    width: 100%;
    display: block;
    margin: 6px 0;
}

.ptst-seats-label-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
}

.ptst-seats-label-left {
    font-size: 11px;
    color: #5a6478;
}

.ptst-seats-label-right {
    font-size: 11px;
    font-weight: 600;
    color: #1a1a2e;
    margin-left: auto;
}

.ptst-seats-bar-track {
    width: 100%;
    height: 6px;
    background-color: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.ptst-seats-bar-fill {
    height: 100%;
    border-radius: 3px;
}


/* ============================================================================
 * Class seats — detail variant (single-class page)
 *
 * Rendered by [class_seats_detail] in inc/shortcodes/class.php. Larger
 * presentation: big number + bar + footer text. Used on the class detail page.
 * ============================================================================ */
.ptst-seats-detail {
    width: 100%;
    margin: 6px 0;
}

.ptst-seats-detail-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.ptst-seats-detail-num {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1;
}

.ptst-seats-detail-label {
    font-size: 14px;
    color: #5a6478;
}

.ptst-seats-detail-footer {
    font-size: 11px;
    color: #535353;
    margin-top: 4px;
}






/* ============================================================================
 * Course / taxonomy archive search form
 *
 * Rendered by [course_search] in inc/shortcodes/archives.php. Appears on
 * course archive page and taxonomy archive pages (accrediting_body,
 * delivery_partner). Hooks into elementor/query/course_search.
 * ============================================================================ */
.ptst-course-search {
    display: flex !important;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.ptst-search-input {
    flex: 1 !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    border: none !important;
    outline: none !important;
    background: #fff !important;
    color: #1a1a2e !important;
}

.ptst-search-btn {
    background: #FCB035 !important;
    border: none !important;
    padding: 12px 20px !important;
    cursor: pointer !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 80px;
}

.ptst-search-btn:hover {
    background: #E0E6EB !important;
    color: #012f63 !important;
}

.ptst-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    color: #9AA4B5;
    text-decoration: none;
    transition: color 0.2s;
    flex-shrink: 0;
}

.ptst-search-clear:hover {
    color: #8B1A1A !important;
}

/* Responsive overrides for the search form */
@media (max-width: 1024px) {
    .ptst-course-search {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 767px) {
    .ptst-course-search {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    .ptst-search-btn {
        background-color: #FCB035 !important;
        border: none !important;
        color: #fff !important;
        min-width: 52px !important;
        flex-shrink: 0 !important;
    }
    .ptst-search-input {
        width: auto !important;
        min-width: 0 !important;
    }
}
/* NEW CSS for updated design */

header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 100;
}



/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s, color .18s, transform .12s;
}

.btn-primary {
  background: var(--brand-blue);
  color: #fff;
}
.btn-primary:hover {
  background: var(--brand-blue-deep);
}

.btn-gold {
  background: var(--brand-gold);
  color: var(--ink);
}
.btn-gold:hover {
  background: var(--brand-gold-600);
  color: #fff;
}

.btn-secondary {
  background: #fff;
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-secondary:hover {
  background: var(--brand-blue-50);
}

.btn-ghost {
  background: transparent;
  color: var(--brand-blue);
}
.btn-ghost:hover {
  color: var(--brand-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn:active {
  transform: translateY(1px);
}

.btn.sm {
  padding: 8px 14px;
  font-size: 13px;
}