/*
    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; }
.fyn-prose a { color: #ff5637; text-decoration: underline; text-underline-offset: 2px; }
.fyn-prose a:hover { color: #e03d1f; }
.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);
}

.dark-section a:not(.btn-default):not(.readmore-btn) {
    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: #9a9a9a; 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: #8a8a8a; font-size: 14px; margin: 0 0 22px; }
.fyn-form-card .form-control { margin-bottom: 16px; }
.fyn-form-card label { display: block; font-size: 13px; font-weight: 700; color: #6f6f6f;
                       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: #ff5637; 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: #ff5637; }
.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; }
}