@charset "UTF-8";

/*
    Site overrides for template05.

    Kept out of custom.css because that is the purchased theme's own file and
    the next update to it would take these with it. Everything here is either a
    legibility fix on the theme or support for a block driven from the admin.
*/

/*  ------------------------------------------------------------------
    Header
    ------------------------------------------------------------------ */

/*  The header floats over the page at top:20px and carried a full-width
    border-bottom, so every page had a stray hairline ruled across it a little
    below the menu, unattached to anything. It reads as a rendering fault.

    A divider earns its place once the bar is stuck to the top of the viewport
    and content is running underneath it. Until then there is nothing to
    divide. */
header.main-header .header-sticky { border-bottom: none; }
header.main-header .header-sticky.active { border-bottom: 1px solid rgba(255, 255, 255, .1); }

/*  ------------------------------------------------------------------
    Typography

    The theme sets sizes but leaves rhythm alone: paragraphs ran at a tight
    line-height with no space between them, list items had none at all, and a
    heading sat directly on the text beneath it. It reads as a wall.

    .fyn-prose is the wrapper around anything the owner writes in the admin, so
    HTML they paste in gets the same rhythm as the copy built into the design.
    ------------------------------------------------------------------ */

body { -webkit-font-smoothing: antialiased; }

p { line-height: 1.75; }

.fyn-prose { line-height: 1.8; color: #4a4a4a; }
.fyn-prose > *:first-child { margin-top: 0; }
.fyn-prose > *:last-child { margin-bottom: 0; }
.fyn-prose p { margin: 0 0 1.15em; }
.fyn-prose h2 { font-size: 30px; margin: 1.5em 0 .5em; }
.fyn-prose h3 { font-size: 22px; margin: 1.6em 0 .45em; }
.fyn-prose h4 { font-size: 18px; margin: 1.5em 0 .4em; }
.fyn-prose ul,
.fyn-prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.fyn-prose li { margin-bottom: .5em; line-height: 1.75; }
.fyn-prose li:last-child { margin-bottom: 0; }
/*  The brand orange is #ff5637, which is 3.2:1 on white - fine as a button
    background or on the dark sections, not fine as body-text link color. Links
    on a light background use a darker tint of the same hue at about 5:1. The
    orange itself is untouched everywhere it sits on dark or carries a fill. */
.fyn-prose a { color: #c93a18; text-decoration: underline; text-underline-offset: 2px; }
.fyn-prose a:hover { color: #a52f13; }
.fyn-prose strong { color: #1c1c1c; }
.fyn-prose blockquote { border-left: 3px solid #ff5637; margin: 1.4em 0; padding: .2em 0 .2em 1.2em;
                        color: #333; font-style: italic; }

/*  A measure. Past about 80 characters the eye loses the start of the next
    line, and these pages are full-width containers. */
.fyn-prose p,
.fyn-prose li { max-width: 68ch; }
.fyn-prose-lead { font-size: 18px; }
.fyn-prose-lead p, .fyn-prose-lead li { max-width: 74ch; }

.fyn-block-title { font-size: 22px; margin: 0 0 22px; }

/*  The current page's nav link was #000 on a black header - i.e. invisible.
    The theme was written for a light header; this design always uses a dark
    one. Accent instead, which is what "you are here" should look like. */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:hover,
.navbar-nav .nav-link.active:focus {
    color: #ff5637 !important;
}

/*  The hero video sits behind the copy. Without a scrim, white text over the
    bright frames of the loop is unreadable for the second or two they last. */
.hero.hero-video { position: relative; }
.hero.hero-video .hero-bg-video { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero.hero-video .hero-bg-video video {
    width: 100%; height: 100%; object-fit: cover;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.hero.hero-video .hero-bg-video::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.35) 100%);
}
.hero.hero-video > .container { position: relative; z-index: 1; }

/*  Class cards carry a photo now. Without a fixed ratio the row's cards are
    different heights whenever the photos are. */
.our-programs .program-item-image figure { margin: 0; }
.our-programs .program-item-image img {
    width: 100%; height: 220px; object-fit: cover; display: block;
}

/*  Gallery tiles are square regardless of what was uploaded. */
.our-programs .program-item.gallery-tile img { height: 260px; }

/*  Instructor photos, same reasoning. */
.our-team .team-item-image img { width: 100%; height: 340px; object-fit: cover; display: block; }

/*  Anything on a dark background.

    The theme only recolors .section-title inside .dark-section, so a heading
    anywhere else in one keeps its near-black default: the "step by step"
    headings were #050505 on a #050505 background, i.e. completely invisible,
    and the paragraphs under them sat at about 2.2:1.

    This is written against .dark-section rather than against the step markup
    on purpose. The blocks in these sections are added and edited by the owner
    from the admin, so a rule that only covered the markup that happens to be
    there today would let the next block they add come out unreadable. */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5 {
    color: #fff;
}

.dark-section p,
.dark-section li {
    color: rgba(255, 255, 255, .72);
}

/*  Buttons opt out, and so do the footer's service-area links: eight town
    names in accent orange shouted louder than the headings above them.

    Listed here rather than fought with a more specific selector elsewhere.
    Each :not() argument counts as a class, so this rule is already (0,3,1) and
    beating it means an arms race, which is how a stylesheet stops being
    readable. One place says which links are exceptions. */
.dark-section a:not(.btn-default):not(.readmore-btn):not(.fyn-area-link) {
    color: #ff5637;
}

/*  The step number reads as a label rather than part of the sentence. */
.dark-section .how-work-step-item h3 span {
    color: #ff5637;
    margin-right: 6px;
}

/*  Three decorative backgrounds the purchased theme asks for were never in the
    files that shipped with it, so every page load 404'd on hero-bg.jpg,
    footer-bg.jpg and dark-section-bg-shape.png. The hero plays a video and the
    other two sit on solid colors that already look right, so drop the requests
    rather than invent artwork to satisfy them. */
.hero { background-image: none; }
.dark-section { background-image: none; }
.main-footer { background-image: none; background-color: #050505; }

/*  The pricing cards have no feature list in this build - the package's own
    description carries the detail - so the body needs its own breathing room. */
.our-pricing .pricing-item { display: flex; flex-direction: column; height: 100%; }
.our-pricing .pricing-item-button { margin-top: auto; padding-top: 20px; }

/*  ------------------------------------------------------------------
    Footer social icons

    The theme styles a 36px circle with an icon font glyph inside it. The Font
    Awesome bundle these sites load has the brand glyphs trimmed out, so the
    markup printed the words "Facebook" and "Instagram" instead and they spilled
    out of their circles and overlapped. They are inline SVG now.
    ------------------------------------------------------------------ */
.footer-social-icons ul li a svg,
.fyn-contact-social a svg { display: block; }
.footer-social-icons ul li a { color: #ff5637; text-decoration: none; }
.footer-social-icons ul li a:hover { color: #fff; border-color: #fff; }

/*  ------------------------------------------------------------------
    About: the video reel

    The clips are phone footage, so they are portrait. 9:16 cards are the shape
    the footage actually is; widescreen frames would letterbox every one.
    ------------------------------------------------------------------ */
.fyn-reel-item { position: relative; border-radius: 14px; overflow: hidden; background: #111;
                 aspect-ratio: 9 / 16; margin-bottom: 24px; }
.fyn-reel-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #111; }
.fyn-reel-play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px;
                 border-radius: 50%; border: none; cursor: pointer; color: #fff;
                 background: rgba(255, 86, 55, .92); display: flex; align-items: center;
                 justify-content: center; padding-left: 4px;
                 transition: transform .16s ease, background-color .16s ease; }
.fyn-reel-play:hover { transform: scale(1.08); background: #ff5637; }
.fyn-reel-item.is-playing .fyn-reel-play,
.fyn-reel-item.is-playing .fyn-reel-caption { opacity: 0; pointer-events: none; }
.fyn-reel-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 14px;
                    color: #fff; font-size: 14px; font-weight: 600; transition: opacity .16s ease;
                    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); }

/*  ------------------------------------------------------------------
    Contact and booking
    ------------------------------------------------------------------ */
.fyn-contact-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.fyn-contact-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px;
                    border: 1px solid #e6e6e6; border-radius: 12px; background: #fff;
                    color: inherit; text-decoration: none;
                    transition: border-color .14s ease, box-shadow .14s ease; }
.fyn-contact-card:hover { border-color: #ff5637; box-shadow: 0 2px 12px rgba(0,0,0,.06); color: inherit; }
.fyn-contact-icon { flex: none; width: 42px; height: 42px; border-radius: 50%; color: #ff5637;
                    background: rgba(255, 86, 55, .1); display: flex; align-items: center;
                    justify-content: center; }
.fyn-contact-card small { display: block; font-size: 12px; text-transform: uppercase;
                          letter-spacing: .07em; color: #6f6f6f; font-weight: 700; }
.fyn-contact-card strong { display: block; font-size: 16px; color: #1c1c1c; word-break: break-word;
                           line-height: 1.4; }
.fyn-contact-social { display: flex; gap: 10px; padding-top: 4px; }
.fyn-contact-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e0e0e0;
                        display: flex; align-items: center; justify-content: center; color: #ff5637;
                        transition: all .14s ease; }
.fyn-contact-social a:hover { background: #ff5637; color: #fff; border-color: #ff5637; }

.fyn-form-card { border: 1px solid #e6e6e6; border-radius: 14px; background: #fff; padding: 32px; }
.fyn-form-card h3 { font-size: 22px; margin: 0 0 4px; }
.fyn-form-hint { color: #676767; font-size: 14px; margin: 0 0 22px; }
.fyn-form-card .form-control { margin-bottom: 16px; }
/*  Field labels only. The booking block's class and package cards are <label>
    elements too, and without the exclusion this set every class name and venue
    on the booking page in small uppercase. */
.fyn-form-card label:not(.cb-card) { display: block; font-size: 13px; font-weight: 700; color: #5f5f5f;
                       text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.fyn-form-card .btn-default { margin-top: 8px; border: none; }

/*  The booking block ships design-neutral and takes one hook. */
.fyn-form-card .cb-wrap { --cb-accent: #ff5637; --cb-accent-soft: #fff6f4; }

.fyn-aside { display: flex; flex-direction: column; gap: 16px; }
.fyn-aside-card { border: 1px solid #e6e6e6; border-radius: 14px; background: #fff; padding: 24px; }
.fyn-aside-card h4 { font-size: 16px; margin: 0 0 10px; }
.fyn-aside-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: #5c5c5c; }
.fyn-steps { margin: 0; padding-left: 1.2em; font-size: 14.5px; color: #5c5c5c; }
.fyn-steps li { margin-bottom: .6em; line-height: 1.65; }
.fyn-steps li:last-child { margin-bottom: 0; }
.fyn-aside-contact a { color: #c93a18; font-weight: 600; word-break: break-word; }

.fyn-venues { display: flex; flex-wrap: wrap; gap: 10px; }
.fyn-venues-stacked { flex-direction: column; }
.fyn-venue { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px;
             border: 1px solid #e6e6e6; border-radius: 999px; background: #fff; color: #333;
             font-size: 14.5px; text-decoration: none; transition: all .14s ease; }
.fyn-venue:hover { border-color: #ff5637; color: #c93a18; }
.fyn-venue svg { flex: none; color: #ff5637; }
.fyn-venues-stacked .fyn-venue { border-radius: 10px; }

@media (max-width: 991px) {
    .fyn-form-card { padding: 24px 20px; }
    .fyn-aside { margin-top: 24px; }
}

/*  About's "what you can expect" cards.

    The theme's .icon-box holds a small line icon, so it leaves the image
    unsized. These are photographs, which came out at whatever aspect the
    original had and lined up with nothing. A fixed circle makes three
    photographs read as one set. */
.fyn-expect .icon-box { margin-bottom: 16px; }
.fyn-expect .icon-box figure { margin: 0; }
.fyn-expect .icon-box img { width: 84px; height: 84px; border-radius: 50%;
                            object-fit: cover; display: block; }
.fyn-expect .why-choose-item-content h3 { font-size: 19px; margin: 0 0 8px; }
.fyn-expect .why-choose-item-content p { margin: 0; max-width: 34ch; }

/*  ------------------------------------------------------------------
    Two-level menu
    ------------------------------------------------------------------ */

/*  The theme draws the "has a submenu" caret with \f107 from the FontAwesome
    font. The bundle these sites load is a trimmed one and that glyph is not in
    it, so the caret came out as a blank box or nothing at all. Drawn in CSS
    instead, which cannot depend on what the next trim removes. */
.main-menu ul li.submenu > a:after {
    content: '';
    font-family: inherit;
    display: inline-block;
    width: 6px; height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 9px;
}
.main-menu ul li.submenu ul li.submenu > a:after { content: ''; float: right; }

/*  The dropdown is orange, so the accent used for "you are here" everywhere
    else would vanish into it. */
.main-menu ul ul li a.active { color: #050505 !important; font-weight: 700; }

/*  Breadcrumbs. A crumb has to be distinguishable from the page you are on or
    it is decoration. */
.fyn-crumbs a { color: #bbb; }
.fyn-crumbs a:hover { color: #ff5637; }
.fyn-crumbs .sep { color: #666; padding: 0 6px; }
.fyn-crumbs .here { color: #fff; }

/*  Four items at the theme's 6px padding sit almost on top of each other. */
.main-menu ul ul { padding: 8px 0 !important; }
.main-menu ul ul li a { line-height: 1.5; padding: 8px 20px !important; }

/*  ------------------------------------------------------------------
    Service-area pages
    ------------------------------------------------------------------ */
/*  The town's own photograph. Fixed aspect so a portrait upload and a landscape
    one leave the page the same shape, and so nothing below it moves once the
    image arrives. */
.fyn-area-photo { margin: 0 0 30px; }
.fyn-area-photo img { display: block; width: 100%; height: auto; aspect-ratio: 88 / 46;
                      object-fit: cover; border-radius: 14px; background: #f0f0f0; }
.fyn-area-photo figcaption { margin-top: 8px; font-size: 13px; color: #888; }
.fyn-area-photo figcaption a { color: #888; text-decoration: underline; }
.fyn-area-photo figcaption a:hover { color: #c93a18; }

.fyn-area-fact { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px;
                 padding: 16px 18px; border: 1px solid #e6e6e6; border-radius: 12px;
                 background: #fff; line-height: 1.65; }
.fyn-area-fact svg { flex: none; color: #ff5637; margin-top: 2px; }
.fyn-area-fact a { color: #c93a18; font-weight: 600; white-space: nowrap; }

.fyn-area-times { display: flex; flex-direction: column; gap: 8px; }
.fyn-area-time { display: grid; grid-template-columns: 110px 90px 1fr auto; gap: 12px;
                 align-items: baseline; padding: 13px 16px; border: 1px solid #e6e6e6;
                 border-radius: 10px; background: #fff; }
/*  The class at the venue nearest this town is the one a visitor from it is
    most likely to attend, so it is the one that should catch the eye. */
.fyn-area-time.is-near { border-color: #ff5637; background: #fff8f6; }
.fyn-area-day { font-weight: 700; }
.fyn-area-hour { color: #555; }
.fyn-area-what small { display: block; color: #777; font-size: 13px; margin-top: 2px; }
.fyn-area-price { font-weight: 700; }

.fyn-area-links { display: flex; flex-wrap: wrap; gap: 8px; }
.fyn-area-links a { font-size: 14px; padding: 6px 12px; border: 1px solid #e6e6e6;
                    border-radius: 999px; color: #444; }
.fyn-area-links a:hover { border-color: #ff5637; color: #c93a18; }

/*  Service areas, as the last item in the footer's links box.

    A full-width member of a flex row whose other children are 33.33% each, so
    it takes the whole line under them and starts exactly where Quick Links
    starts. The theme draws a vertical divider on the right of every
    .footer-links; this one is the full width, so the divider would be a rule
    hanging off the right edge of the footer. */
.footer-links.footer-areas { width: 100%; padding-top: 34px; margin-top: 6px;
                             border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-links.footer-areas::before { display: none; }
.footer-areas h3 { font-size: 17px; margin: 0 0 16px; }

/*  The towns run on one after another, wrapping when they run out of room.

    Separated by space rather than by a dot. A ::before separator belongs to the
    item it precedes and wraps with it, so every wrapped line began with a dot
    floating in from nowhere; ::after has the same problem at the other end. The
    gap is wide enough that "Westlake Village Newbury Park" cannot be misread as
    one place, which is all the dot was there for. */
.footer-areas-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.footer-areas-links a { color: rgba(255, 255, 255, .62); font-size: 14.5px; white-space: nowrap; }
.footer-areas-links a:hover { color: #ff5637; }

@media (max-width: 575px) {
    .fyn-area-time { grid-template-columns: 1fr auto; }
    .fyn-area-hour { text-align: right; }
    .fyn-area-what { grid-column: 1 / -1; }
}