/*
 * The best practice when adding your own extensions is using the scss files under the sass/overrides folder.
 * _layout_variables and _theme_variables files allow overriding the default variables whereas _layout_styles
 * and _theme_styles files can be used to include additional styling. This approach allows seamless updates
 * so your changes are not overriden with the maintenance updates from PrimeTek.
 */
@media screen and (max-width: 714px) {
    .sideCol { display:none; }
}
/* Wide content must never widen the page. primeflex's .col is a flex child with the default min-width:auto, i.e.
   its content's min-content width, so one wide table or fixed-width block in a page section (an imported
   conference description made the document 1087px wide in a 646px window) pushed the whole layout sideways.
   min-width:0 lets the column shrink to the window, and media inside a section shrinks with it. height:auto only
   where both size attributes are set, so a shrunk picture keeps its proportions while one sized by its height
   alone (an icon) is left as authored. */
.grid > .col { min-width: 0; }
#mainContent, .ui-card.card { max-width: 100%; }
.contentItem img, .contentItem iframe, .contentItem video { max-width: 100%; }
.contentItem img[width][height] { height: auto; }
.sideContent {
    text-align:center;
    font-size:1.3rem;
}
/*
body#body {
  background-image: url('/jakarta.faces.resource/images/rainbow-bg.jpg.jsf') !important;
  background-position: center top;
  background-repeat: no-repeat !important;
  background-attachment: fixed;
  background-size: cover;
}
*/
body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  /* The shared site's fixed background, unless the root element sets --site-bg: an organization's site
     puts its own image there (or none), via BrandCommands.rootStyle on template.xhtml's <html>. With no
     image an org site sets --site-bg-color instead, which is what shows through the "none". That value is
     itself a var() when the org chose no color: var(--site-bg-default, var(--surface-ground, #333333)),
     the palette's own tint (each Freya palette declares --site-bg-default as a mix of its own primary
     color; --surface-ground behind it tracks light/dark but is the SAME grey for every palette). A nested
     var() in a custom property is substituted where it is DECLARED, on the <html> element that carries the
     theme's :root block too, so what arrives here is always a plain color. The computed result without
     either property is exactly the old shorthand: no color, the rainbow image. */
  background-color: var(--site-bg-color, transparent);
  background-image: var(--site-bg, url('/jakarta.faces.resource/images/rainbow-bg.jpg.jsf'));
  background-repeat: no-repeat;
  background-position: center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.no-bg .ui-panelgrid-cell {
    background-color: #00000000 !important;
    padding: 2px !important;
    vertical-align: top;
}
.no-table-header thead th {
    border: none !important;
    background: none !important;
}
.no-table-header thead th .ui-icon {
    display: none !important;
}

/* ------------------------------------------------------------------------------------------------------
   Full-width layout and the BAND vocabulary (the band-* content templates, StarterTemplates.java).

   Two layouts share this stylesheet. In the CLASSIC layout a band sits inside the content card like any
   other section: it takes the card's width, gets rounded corners, and the card's padding stays. In the
   FULL-WIDTH layout (mainTemplate's .layoutFull branch, chosen by brand.fullWidth) .layout-content loses
   its padding, every section gets the page's side inset back on its own .contentItem, and a .band cancels
   that inset with a negative margin so it reaches both edges of the window; its .band-inner then caps the
   content at a readable width. The two inset numbers below mirror freya's .layout-content padding
   (30px 36px, and 32px 14px under the tablet breakpoint) and must move with it.

   Colors are theme variables (Freya declares them per palette and per light/dark), with two exceptions
   that are derived rather than literal: the hero and the dark tone mix the palette's own color toward a
   near-black, so their WHITE text is readable by construction on every palette. That is deliberate: the
   theme's --primary-color-text is the contrast color for --primary-color, which on the pale palettes is a
   DARK text, and --primary-dark-color is not reliably darker than --primary-color (the platform theme's is
   lighter), so pairing either with a band background could not be trusted at 4.5:1. OrgSubdomainPwIT
   measures every band on the marketing page. --------------------------------------------------------- */
body .layout-content.layout-content-full { padding: 0; }
/* The full-width layout paints its own ground, EXCEPT when the root element declares --layout-full-bg: BrandCommands
   sets it to transparent whenever a background IMAGE is in effect (the org's, or a conference page's own), so the
   image chosen to show behind the page is not hidden by the very layout chosen to show it off. */
.layoutFull { background: var(--layout-full-bg, var(--surface-ground, #F2F4F6)); }
.layoutFull .contentItem { margin: 0; padding: 0 36px; }
.layoutFull .band { margin: 0 -36px; }
@media (max-width: 991px) {
    .layoutFull .contentItem { padding: 0 14px; }
    .layoutFull .band { margin: 0 -14px; }
}
/* Inside a band (a container's children, a grid cell) the inset and the classic gap are the band's own. */
.band .contentItem, .layoutFull .band .contentItem { margin: 0; padding: 0; }
/* Edit mode frames each section (contentSections.xhtml); a band then stays inside its frame, and the
   page toolbar takes the same inset the sections have. */
.layoutFull .tripEditFrame .band { margin: 0; }
.layoutFull .pageOpsBar { margin-left: 36px; margin-right: 36px; }
/* The footer is a band of its own out here: the freya footer colors were chosen for the classic card
   frame over the site background, where they read; over the page background below a dark CTA band the
   text all but vanished. */
.layoutFull .layout-footer { padding: 28px 36px; text-align: center; background: var(--surface-card, #fff);
    color: var(--text-color, #333); border-top: 1px solid var(--surface-border, #dee2e6); }
.layoutFull .layout-footer a, .layoutFull .layout-footer a:link, .layoutFull .layout-footer a:visited,
.layoutFull .layout-footer .footerTitle { color: var(--primary-color); }
/* The footer's links are p:links (2026-10-28), which bring the theme's .ui-link hover underline and color fade;
   the footer keeps exactly the look its plain links always had, on both layouts. */
.layout-footer .ui-link { transition: none; }
.layout-footer .ui-link:hover { text-decoration: none; }
.ui-card .band { border-radius: 16px; }

/* --- the band itself --- */
.band {
    padding: 64px 24px;
    color: var(--text-color, #495057);
    background: var(--surface-card, #FFFFFF);
}
.band-inner { max-width: 1200px; margin: 0 auto; }
.band-tint {
    /* The theme's translucent tint composed over the card surface, so the band is opaque. */
    background: linear-gradient(var(--primary-lighter-color, rgba(0, 0, 0, 0.04)),
            var(--primary-lighter-color, rgba(0, 0, 0, 0.04))) var(--surface-card, #FFFFFF);
}
.band-dark, .band-hero {
    --band-deep: color-mix(in srgb, var(--primary-dark-color, #303031) 40%, #14171C);
    --band-deep-from: color-mix(in srgb, var(--primary-color, #303031) 50%, #14171C);
    color: #FFFFFF;
}
.band-dark { background: var(--band-deep); }
.band-hero {
    padding: 96px 24px;
    background-color: var(--band-deep);
    background-image: linear-gradient(135deg, var(--band-deep-from), var(--band-deep));
}
/* Links inside a deep band inherit its white; every palette's a:link would paint them in the primary. */
body .band-dark a:link, body .band-dark a:visited, body .band-hero a:link, body .band-hero a:visited {
    color: inherit;
}

/* --- headings and text --- */
.band-heading { font-size: 2rem; line-height: 1.2; font-weight: 700; margin: 0 0 16px 0; }
.band-heading:empty { display: none; }
.band-center { text-align: center; }
.band-body { font-size: 1.1rem; line-height: 1.6; }
.band-body:empty { display: none; }
.band-body p:first-child { margin-top: 0; }
.band-body p:last-child { margin-bottom: 0; }
.band-prose { max-width: 820px; margin-left: auto; margin-right: auto; }
.band-note { margin-top: 14px; font-size: 0.9rem; opacity: 0.8; }
.band-note:empty { display: none; }
.band-link { display: inline-block; margin-top: 16px; font-weight: 600; }
.band-link:empty { display: none; }

/* --- buttons: anchors, so specificity has to beat a:link; hidden when their text is blank --- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.band a.cta {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
}
.band a.cta:empty { display: none; }
.band a.cta.cta-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-text, #FFFFFF);
}
.band a.cta.cta-secondary { color: var(--primary-color); border-color: var(--primary-color); }
.band-dark a.cta.cta-primary, .band-hero a.cta.cta-primary {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--band-deep);
}
.band-dark a.cta.cta-secondary, .band-hero a.cta.cta-secondary {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.7);
}
.band a.cta:hover { filter: brightness(1.08); }
.cta-band { text-align: center; }
.cta-band .cta-row { justify-content: center; }

/* --- hero --- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 48px; align-items: center; }
.hero:has(.hero-art img[src=""]) { grid-template-columns: minmax(0, 1fr); }
.hero-art img { display: block; width: 100%; max-width: 520px; height: auto; border-radius: 16px; }
.hero-art img[src=""], .hero-art:has(img[src=""]) { display: none; }
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.85;
    margin-bottom: 14px;
}
.eyebrow:empty { display: none; }
.hero-headline {
    font-size: clamp(2.1rem, 4.5vw, 3.3rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 18px 0;
    max-width: 760px;
}
.hero-sub { font-size: 1.25rem; line-height: 1.5; max-width: 640px; margin-bottom: 30px; opacity: 0.92; }
.hero-sub:empty { display: none; }

/* --- text beside a picture (or an icon) --- */
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; align-items: center; }
.split-right .split-art { order: 2; }
.split-art { text-align: center; }
.split-art img { display: block; width: 100%; height: auto; border-radius: 16px; }
.split-art img[src=""] { display: none; }
.split-art .split-icon {
    display: inline-flex;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    color: var(--primary-color);
    background: var(--primary-lighter-color, rgba(0, 0, 0, 0.06));
}
.band-dark .split-art .split-icon { color: #FFFFFF; background: rgba(255, 255, 255, 0.12); }
.split-art:has(img:not([src=""])) .split-icon, .split-art .split-icon[data-icon=""] { display: none; }
/* Neither a picture nor an icon: the copy takes the whole band. */
.split:has(.split-art > img[src=""]):has(.split-icon[data-icon=""]) { grid-template-columns: minmax(0, 1fr); }
.split:has(.split-art > img[src=""]):has(.split-icon[data-icon=""]) .split-art { display: none; }

/* --- features: a grid of cards; the row writes the title, the card holds icon + text --- */
.featureGrid {
    display: grid;
    /* 340px, not 280: at the 1200px inner width six cards then fall 3+3 rather than 4+2. */
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
    margin-top: 36px;
}
.feature-cell {
    position: relative;
    padding: 24px;
    border: 1px solid var(--surface-border, #DEE2E6);
    border-radius: 14px;
    background: var(--surface-card, #FFFFFF);
}
.feature-cell .feature-icon {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.4rem;
    color: var(--primary-color);
    background: var(--primary-lighter-color, rgba(0, 0, 0, 0.06));
}
.feature-cell .feature-icon[data-icon=""] { display: none; }
.feature-title {
    margin: 0 0 10px 0;
    padding-left: 52px;
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 1.15rem;
    font-weight: 700;
}
.feature-title:empty { display: none; }
.feature-cell:has(.feature-icon[data-icon=""]) .feature-title { padding-left: 0; min-height: 0; }
.feature-text { line-height: 1.55; }

/* --- stats --- */
.statGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px;
    margin-top: 36px;
    text-align: center;
}
.stat-value { font-size: 2.2rem; font-weight: 800; line-height: 1.15; }
.stat-label { margin-top: 8px; opacity: 0.85; }

/* --- questions and answers --- */
.faqList { margin-top: 28px; }
.faqItem { border-top: 1px solid var(--surface-border, #DEE2E6); }
.faqItem:last-child { border-bottom: 1px solid var(--surface-border, #DEE2E6); }
.faqQuestion {
    cursor: pointer;
    padding: 16px 0;
    font-weight: 600;
    font-size: 1.05rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faqQuestion::-webkit-details-marker { display: none; }
.faqQuestion::after { content: "+"; font-size: 1.5rem; line-height: 1; opacity: 0.6; }
.faqItem[open] .faqQuestion::after { content: "\2212"; }
.faqAnswer { padding: 0 0 18px 0; line-height: 1.55; }

/* --- logos --- */
.logoStrip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px 48px;
    margin-top: 28px;
}
.logoStrip img { max-height: 56px; width: auto; }

/* --- testimonial --- */
.testimonial { max-width: 820px; margin: 0 auto; text-align: center; }
.testimonial-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; }
.testimonial-photo[src=""] { display: none; }
.testimonial-quote { margin: 0; font-size: 1.35rem; line-height: 1.5; font-style: italic; }
.testimonial-name { margin-top: 20px; font-weight: 700; }
.testimonial-name:empty, .testimonial-role:empty { display: none; }
.testimonial-role { opacity: 0.8; font-size: 0.95rem; }

/* --- narrow windows: one column, tighter bands --- */
@media (max-width: 760px) {
    .band { padding: 44px 18px; }
    .band-hero { padding: 60px 18px; }
    .hero, .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .split-right .split-art { order: 0; }
    .band-heading { font-size: 1.6rem; }
}

/* People list (the "people-list" container + "person" cards, e.g. /board): one card per row, the four columns
   the old board table had (picture, name and role, email, phone), stacked on a narrow screen. The template
   body only names these classes, so the columns live here once. A speaker card adds a subtitle under the name
   and a biography row spanning everything after the picture. */
.peopleList {
    width: 90%;
    margin: auto;
    border: 2px solid #bbbbbb;
}
.peopleList .peopleRow:nth-child(odd) {
    background-color: #FFFFFF55;
}
.personCard {
    display: grid;
    grid-template-columns: 64px minmax(0, 32fr) minmax(0, 32fr) minmax(0, 27fr);
    gap: 12px;
    align-items: start;
    padding: 9px;
}
.personCard .personEmail {
    overflow-wrap: anywhere;
}
.personCard .personSubtitle {
    font-style: italic;
    opacity: 0.85;
}
.personCard .personBio {
    grid-column: 2 / -1;
}
.personCard .personBio p {
    margin: 0 0 6px 0;
}
@media (max-width: 640px) {
    .peopleList {
        width: 100%;
    }
    .personCard {
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .personCard .personEmail,
    .personCard .personPhone,
    .personCard .personBio {
        grid-column: 2;
    }
}

/* Conference page (../trip/docs/conference.md): the section strip, the public schedule (trip-schedule) and the
   registration block (trip-registration). Theme variables only, never a literal text color on the primary
   color (the pale palettes put dark text on it), so every org palette stays readable. */
.confNav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    margin: 0 0 14px 0;
    border-bottom: 1px solid var(--surface-d, #dddddd);
}
.confNav a {
    font-weight: 600;
    text-decoration: none;
}
.confNav .confNavCta {
    margin-left: 10px;
}
/* The tab strip and the anchor strip above a conference's sections take the sections' own inset when the org's
   layout is Full width (the .layoutFull .contentItem rule above); in the classic card they need none. */
.layoutFull .confHead { padding: 12px 36px 0 36px; }
@media (max-width: 991px) {
    .layoutFull .confHead { padding: 12px 14px 0 14px; }
}
.agenda {
    padding: 8px 0 16px 0;
}
.agenda-day {
    margin: 0 0 18px 0;
}
.agenda-date {
    margin: 0 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--primary-color);
}
.agenda-item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--surface-d, #e5e5e5);
}
.agenda-time {
    font-weight: 600;
    white-space: nowrap;
}
.agenda-title {
    font-weight: 700;
}
.agenda-track {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: 600;
    background: var(--primary-color);
    color: var(--primary-color-text);
}
.agenda-meta {
    opacity: 0.85;
}
.agenda-empty {
    font-style: italic;
    opacity: 0.8;
}
.regStatus {
    padding: 12px 16px;
    margin: 8px 0 16px 0;
    border: 1px solid var(--surface-d, #dddddd);
    border-radius: 8px;
}
.regStatus-state {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 6px;
}
.regStatus-countdown .tripCountdown {
    font-size: 1.6em;
    font-weight: 900;
}
.regStatus-question {
    font-weight: 700;
    margin-top: 8px;
}
.regStatus-prices ul {
    margin: 4px 0 0 0;
}
.regStatus-cta {
    margin-top: 12px;
}
a.ui-button.regStatus-button,
a.ui-button.regStatus-button:link,
a.ui-button.regStatus-button:visited {
    padding: 8px 22px;
    font-weight: 700;
    text-decoration: none;
    background: var(--primary-color);
    color: var(--primary-color-text);
}
@media (max-width: 640px) {
    .agenda-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}