/* ===================================================================
   FONTS
   =================================================================== */

@font-face {
      font-family: 'Oswald Regular';
      font-style: normal;
      font-weight: normal;
      src: url('../fonts/Oswald-Regular.woff') format('woff');
   }
   
   @font-face {
      font-family: 'open_sanscondensed_light';
      src: url('../fonts/OpenSans-CondLight-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
   }
   
   @font-face {
      font-family: 'open_sans_condensedbold';
      src: url('../fonts/OpenSans-CondBold-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
   }
   
   @font-face {
      font-family: 'open_sansregular';
      src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
   
   }
   
   @font-face {
      font-family: 'open_sansbold';
      src: url('../font/OpenSans-Bold-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
   }


/* ===================================================================
   GLOBAL TYPE
   =================================================================== */

body {
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald Regular', sans-serif;
    font-weight: normal;
}

/* Heading colours */
h1 { color: #e67300; }
h2 { color: #000; }
h3 { color: #94c6e4; }
h4 { color: #c0c0c0; }
h5 { color: #e67300; }

a { color: #e67300; }


/* ===================================================================
   BOOTSTRAP BUTTON OVERRIDES — orange, all-caps Oswald Regular
   =================================================================== */

.btn-primary,
.btn-primary:link,
.btn-primary:visited {
    background-color: #e67300;
    border-color: #e67300;
    color: #fff;
    font-family: 'Oswald Regular', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: #ff8c1a !important;
    border-color: #ff8c1a !important;
    color: #fff;
}

/* Secondary uses the soft blue from the original site */
.btn-secondary,
.btn-secondary:link,
.btn-secondary:visited {
    background-color: #94c6e4;
    border-color: #94c6e4;
    color: #fff;
    font-family: 'Oswald Regular', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    background-color: #6caecf;
    border-color: #6caecf;
    color: #fff;
}


/* ===================================================================
   NAVBAR
   =================================================================== */

.owf-header {
    background: white;
}

.owf-navbar {
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 0;
}

/* Brand: logo is the positioning context for the superimposed tagline */
.owf-brand {
    position: relative;
    display: inline-block;
    line-height: 1;
}

.owf-logo {
    /* width: 16rem; */
    width: 20rem;
    display: block;
}

/* Tagline superimposed over the lower-right area of the logo */
.owf-tagline {
    position: absolute;
    bottom: 0rem;
    left: 8.5rem;
    font-family: 'Oswald Regular', sans-serif;
    font-size: 0.6rem;
    color: #94c6e4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Custom hamburger — strip Bootstrap's default button chrome */
.navbar-toggler {
    border: none;
    padding: 0;
    background: none !important;
    box-shadow: none !important;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.owf-menu-button-img {
    width: 2.75rem;
    height: 2.75rem;
    display: block;
}

/* Desktop nav links: Oswald Regular, uppercase, slide-down hover animation.
   The tab background image (67x168px) is pinned to the bottom of the link.
   On hover the link grows taller, revealing more of the image from below —
   reproducing the original sprite-tab effect.

   The nav wrapper gets a fixed height equal to the tallest hovered state
   (5rem) so that growing items don't shift the navbar's overall height and
   cause neighbouring items to jiggle. */
@media (min-width: 768px) {
    /* Fixed-height row prevents layout shift when any item grows on hover */
    .owf-nav {
        height: 5rem;
        align-items: flex-start;
    }

    .owf-nav .nav-link {
        font-family: 'Oswald Regular', sans-serif;
        font-size: 0.875rem;
        text-transform: uppercase;
        color: #5f5e5f;
        padding: 1rem 0 0;
        width: 4.75rem;
        height: 4.5rem;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        background: url('../images/site/menu-bg-default.png') center bottom no-repeat;
        transition: padding-top 0.1s linear, height 0.1s linear;
    }

    .owf-nav .nav-link:hover,
    .owf-nav .nav-link:active {
        color: #5f5e5f;
        padding-top: 1.5rem;
        height: 5rem;
        text-decoration: none;
    }

    /* Active page: selected tab background, white text */
    .owf-nav .nav-item.active .nav-link,
    .owf-nav .nav-link.active {
        color: #fff;
        background-image: url('../images/site/menu-bg-selected.png');
        font-weight: normal;
    }
}

/* Utility bar: My Account + cart, sits below the navbar on desktop */
.owf-utility-bar {
    align-items: center;
    gap: 1.5rem;
    padding: 0.35rem 1rem;
    font-size: 0.8rem;
}

/* My Account link */
.owf-account-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #94c6e4;
    font-family: 'Oswald Regular', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
}

.owf-account-link:hover {
    color: #6caecf;
    text-decoration: none;
}

.owf-account-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.owf-account-label {
    display: block;
}


/* ===================================================================
   MAIN CONTENT AREA
   =================================================================== */

@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1600px;
    }
}

#main {
    padding-bottom: 3rem;
}

/* Grey background and stripe bar are constrained to roughly container width
   (container max-width + 2rem gutter on each side) rather than full viewport */
.owf-content-wrap {
    max-width: calc(var(--bs-container-max-width, 1400px) + 4rem);
    margin: 0 auto;
    background-color: #f7f8f7;
    padding-bottom: 2rem;
}

/* Coloured stripe decoration at the top of <main>, matching the
   original four-segment content-area-top bar */
.owf-stripe-bar {
    display: flex;
    height: 7px;
    margin-bottom: 2rem;
}

.owf-stripe {
    height: 100%;
}

.owf-stripe--red    { width: 4%;  background-color: #804030; margin-right: 0.5%; }
.owf-stripe--purple { width: 4%;  background-color: #c193c4; margin-right: 0.5%; }
.owf-stripe--green  { width: 4%;  background-color: #9bc645; margin-right: 0.5%; }
.owf-stripe--blue   { flex: 1;    background-color: #8ed4e4; }


/* ===================================================================
   FOOTER
   =================================================================== */

.owf-footer {
    background-color: #582a1e;
    color: #aa928c;
    font-family: 'Oswald Regular', sans-serif;
    padding: 1.5rem 0 2rem;
}

.owf-footer a {
    color: #aa928c;
    text-decoration: none;
}

.owf-footer a:hover {
    color: #d5cac7;
}

.owf-footer h4 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.owf-footer p {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.owf-footer-org-name {
    text-transform: uppercase;
    font-size: 1.4rem;
    color: #d5cac7;
    /* Pull the text up so its cap-height aligns with the top of the footer background,
       matching the original layout where the org name floated above the footer columns */
    margin-top: -1.95rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #7a4035;
    padding-bottom: 0.75rem;
}

.owf-footer-col {
    font-size: 0.875rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}

/* Social links — two per row using flex-wrap */
.owf-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0;
}

.owf-social-links a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 50%;
    height: 22px;
    font-size: 0.875rem;
}

.owf-social-links img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* ===================================================================
   YII2 HELPERS
   =================================================================== */

.not-set {
    color: #c55;
    font-style: italic;
}

/* GridView sort arrows */
a.asc::after,
a.desc::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
}

a.asc::after  { border-bottom: solid 7px #212529; border-top-width: 0; }
a.desc::after { border-top: solid 7px #212529; border-bottom-width: 0; }

.grid-view th { white-space: nowrap; }

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

.form-group {
    margin-bottom: 1rem;
}


/* ===================================================================
 TICKET SELECTOR
 =================================================================== */

/*
 * Three-column grid: label | input | price
 * The label column is widest; the input and price columns are fixed-width.
 * On narrow screens the grid collapses to a single column.
 */

.ticket-selector {
    max-width: 560px;
}

.ticket-selector__event-title {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.ticket-selector__heading {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.ticket-selector__table {
    border-collapse: collapse;
}

.ticket-selector__table tr {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.ticket-selector__table tr:first-child {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.ticket-selector__table td {
    padding: 0.5rem 0.75rem;
}

.ticket-selector__table td:first-child {
    padding-left: 0;
}

.ticket-selector__table td:last-child {
    padding-right: 0;
}

@media (max-width: 480px) {
    .ticket-selector__table tr {
        display: block;
        margin-bottom: 0.75rem;
    }

    .ticket-selector__table td {
        display: block;
        padding: 0.25rem 0;
    }
}


/* ===================================================================
   CART
   =================================================================== */

/* Cart table — same decoration rules as the ticket selector table */

.cart-table {
   border-collapse: collapse;
   width: 100%;
}

.cart-table tr {
   border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.cart-table tr:first-child {
   border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.cart-table td {
   padding: 0.5rem 0.75rem;
   vertical-align: middle;
}

/* No left margin on first column, no right margin on last */
.cart-table td:first-child { padding-left: 0; }
.cart-table td:last-child  { padding-right: 0; }

/* Line total — right-aligned, no wrap */
.cart-table__line-total {
   text-align: right;
   white-space: nowrap;
}

/* Subtotal / discount / total summary rows */
.cart-table__subtotal-row td,
.cart-table__discount-row td,
.cart-table__total-row td {
   border: none;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
}

.cart-table__discount-row td { color: var(--bs-success, #198754); }

.cart-table__total-row {
   border-top: 1px solid var(--bs-border-color, #dee2e6) !important;
}

/* Quantity stepper */
.cart-qty {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   white-space: nowrap;
}

.cart-qty__btn {
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;
   background: none;
   border: 1px solid var(--bs-border-color, #dee2e6);
   border-radius: 4px;
   cursor: pointer;
   line-height: 1;
}

.cart-qty__btn:hover { background: var(--bs-light, #f8f9fa); }

.cart-qty__count {
   min-width: 1.5rem;
   text-align: center;
}

/* Remove button */
.cart-table__remove {
   background: none;
   border: none;
   cursor: pointer;
   color: var(--bs-secondary, #6c757d);
   padding: 0;
   font-size: 0.75rem;
   line-height: 1;
}

.cart-table__remove:hover { color: var(--bs-danger, #dc3545); }



/* ===================================================================
 TICKET STUBS
 =================================================================== */

.ticket-wrap,
.ticket-stub,
.ticket-main {
     background-color: #ffffff;
 }
 
/* Cut line between tickets */

.ticket-cut-line {
   margin: 1rem 0;
   border-bottom: 1px dashed #bbb;
   position: relative;
   height: 0;
}

.ticket-cut-line__scissors {
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   background: white;
   padding: 0 0.25rem;
   font-size: 1rem;
   color: #bbb;
   line-height: 1;
}


/* Ticket wrapper — stub on left, main content on right */

.ticket-wrap {
   display: flex;
   gap: 0;
   min-height: 200px;
   overflow: hidden;
   page-break-inside: avoid;
   font-family: 'Oswald Regular', sans-serif;
}

.ticket-stub {
   flex: 0 0 160px;
   border-right: 1px dashed #bbb;
   padding: 1rem 0.75rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.75rem;
}

.ticket-stub__logo-img {
   width: 120px;
   height: auto;
}

.ticket-stub__qr-img {
   width: 110px;
   height: 110px;
}

.ticket-stub__ticket-num {
   font-size: 0.75rem;
   text-align: center;
   color: #555;
}

.ticket-main {
   flex: 1;
   padding: 0.75rem 1rem 0.75rem 1.25rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}


/* Ticket header row: class/price | date | venue+time */

.ticket-header {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   padding-bottom: 0.5rem;
   border-bottom: 6px solid #e3e3e3;
}

.ticket-header__class-block {
   margin-left: auto;
   text-align: right;
   flex-shrink: 0;
}

.ticket-header__admit {
   font-size: 0.8rem;
}

.ticket-header__class {
   font-size: 1.2rem;
   line-height: 1.2;
}

.ticket-header__date-block {
   display: flex;
   align-items: flex-end;
   flex-shrink: 0;
}

.ticket-header__day {
   font-size: 2.5rem;
   line-height: 1;
   padding-right: 0.25rem;
}

.ticket-header__weekday {
   font-size: 0.75rem;
   text-align: right;
}

.ticket-header__month {
   font-size: 1.2rem;
   line-height: 1.1;
   text-align: right;
}

.ticket-header__venue-block {
   flex: 1;
   min-width: 0;
}

.ticket-header__venue {
   font-size: 0.8rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.ticket-header__time {
   font-size: 1.2rem;
   line-height: 1.2;
}


/* Event title */

.ticket-title {
   font-weight: normal;
   font-size: 1.8rem;
   line-height: 1.15;
   margin: 0;
}

.ticket-subtitle {
   display: block;
   font-size: 1.1rem;
   line-height: 1.3;
}


/* Footer */

.ticket-footer {
   margin-top: auto;
   text-align: right;
}

.ticket-footer__purchaser {
   font-size: 1rem;
}


/* Collapse stub on small screens — stack vertically */

@media (max-width: 576px) {
   .ticket-wrap {
       flex-direction: column;
   }

   .ticket-stub {
       flex: none;
       border-right: none;
       border-bottom: 1px dashed #bbb;
       flex-direction: row;
       justify-content: flex-start;
       padding: 0.75rem;
   }

   .ticket-stub__logo-img { width: 80px; }
   .ticket-stub__qr-img   { width: 70px; height: 70px; }

   .ticket-title { font-size: 1.3rem; }
}


/* Print styles */

@media print {
    .ticket-cut-line { margin: 0.5rem 0; }
    .ticket-wrap     { page-break-inside: avoid; }

    header, footer, h1, .order-summary { display: none; }

    .container { padding-top: 0 !important; }
    h2, p.text-muted { display: none; }
}


/* ===================================================================
 CARDS
 =================================================================== */

.grow-on-hover {
    transition: transform 0.2s ease;
    z-index: 1;
}

.grow-on-hover:hover {
    transform: scale(1.04);
    z-index: 2;
}