/*  Built-in look for every generated site.

    Every visual decision reads from a CSS variable that ThemeCss writes per site, so one
    stylesheet carries all 72 templates - and a licensed design pack can override the same
    class names from wwwroot/packs/{code}/pack.css without touching this file.              */

.sb-site {
    font-family: var(--sb-body-font);
    color: #2b3440;
    background: #fff;
    line-height: 1.65;
}

.sb-site h1, .sb-site h2, .sb-site h3, .sb-site h4 {
    font-family: var(--sb-heading-font);
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -.01em;
}

/*  The design pack's own .header default is a dark navy bar with white nav text
    (--background-color:#3d4d6a). That's fine when it renders, but if the dark
    background fails to apply for any reason the white text becomes invisible against
    the page - white-on-white, menu effectively gone. Force a plain white header with
    dark text instead, so there's no failure mode where the nav can disappear. */
.sb-packed .header {
    --background-color: #ffffff;
    --nav-color: #1f2937;
    --heading-color: #1f2937;
}

/*  The logo image already spells out "REYESCO" - the separate text label next to it
    (the template's fallback for sites with no logo image) just repeats it redundantly. */
.sb-packed .logo .sitename {
    display: none;
}

.sb-container { max-width: var(--sb-container); }

.sb-h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); font-weight: 800; margin-bottom: 1rem; }
.sb-h2 { font-size: clamp(1.6rem, 2.6vw, 2.35rem); font-weight: 700; margin-bottom: .75rem; }
.sb-h3 { font-size: 1.2rem; font-weight: 650; margin-bottom: .5rem; }
.sb-h3-sm { font-size: 1.02rem; }
.sb-lead { font-size: clamp(1.02rem, 1.4vw, 1.2rem); opacity: .92; margin-bottom: 1.75rem; }
.sb-body { color: #4b5563; margin-bottom: .9rem; }
.sb-sub { color: #6b7280; max-width: 62ch; margin: 0 auto; }
.sb-note { color: #6b7280; font-size: .875rem; }

.sb-eyebrow {
    display: inline-block;
    font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sb-primary); margin-bottom: .6rem;
}

.sb-heading { text-align: center; margin-bottom: 2.75rem; }

/* ---------------------------------------------------------------- corners */
.sb-corners-square .sb-card,
.sb-corners-square .sb-tile,
.sb-corners-square .btn,
.sb-corners-square .form-control,
.sb-corners-square .sb-round { border-radius: 0 !important; }

.sb-round { border-radius: var(--sb-radius); }
.sb-shadow { box-shadow: 0 24px 60px rgba(15, 23, 42, .16); }

/* ------------------------------------------------------------------- nav */
.sb-nav {
    position: sticky; top: 0; z-index: 30;
    background: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.sb-nav > .container { display: flex; align-items: center; gap: 1rem; min-height: 72px; }

.sb-nav-dark .sb-nav { background: var(--sb-dark); border-bottom-color: rgba(255, 255, 255, .1); }
.sb-nav-dark .sb-nav a { color: rgba(255, 255, 255, .82); }
.sb-nav-dark .sb-brand-name { color: #fff; }

.sb-nav-transparent .sb-nav {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom-color: rgba(15, 23, 42, .06);
}

.sb-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.sb-brand-mark {
    width: 38px; height: 38px; border-radius: var(--sb-radius);
    background: var(--sb-primary); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-family: var(--sb-heading-font);
}
.sb-brand-name { font-family: var(--sb-heading-font); font-weight: 700; color: #0f172a; font-size: 1.05rem; }
.sb-logo { height: 38px; width: auto; }

.sb-nav-links { display: flex; align-items: center; gap: 1.4rem; }
.sb-nav-links a {
    color: #475569; text-decoration: none; font-weight: 500; font-size: .95rem;
    padding: .35rem 0; border-bottom: 2px solid transparent;
}
.sb-nav-links a:hover, .sb-nav-links a.active { color: var(--sb-primary); border-bottom-color: var(--sb-primary); }
.sb-nav-cta {
    background: var(--sb-primary); color: #fff !important; border-radius: var(--sb-radius);
    padding: .5rem .95rem !important; border-bottom: 0 !important;
}
.sb-nav-cta:hover { background: var(--sb-primary-dark); }

.sb-nav-toggle { display: none; }

/*  This site's checkbox+label toggle (.sb-nav-toggle/.sb-nav-burger) and the design pack's
    own mobile nav CSS (.navmenu, on main.css) were never actually wired to each other - the
    pack expects a JS-driven .mobile-nav-active class that nothing here ever adds, so below its
    1199px breakpoint the menu had no way to open at all, in any browser, not just Firefox.
    Bridge them with pure CSS: reveal .navmenu ul when the checkbox is checked, at the same
    breakpoint the pack itself uses to hide the desktop nav. */
@media (max-width: 1199px) {
    .sb-nav-burger { display: flex; font-size: 1.6rem; cursor: pointer; color: #334155; align-items: center; }
    .sb-nav-toggle:checked ~ .navmenu ul { display: block; }
}

/* ------------------------------------------------------------------ hero */
.sb-hero {
    position: relative;
    padding: clamp(4rem, 9vw, 8rem) 0;
    background-size: cover; background-position: center;
    color: #fff;
}
.sb-hero .sb-h1, .sb-hero .sb-lead { color: #fff; }
.sb-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 14, 26, .62), rgba(9, 14, 26, .74)); }
.sb-hero-gradient .sb-hero-veil { background: rgba(0, 0, 0, .12); }

.sb-hero-split, .sb-hero-minimal { background: #f8fafc; color: inherit; }
.sb-hero-split .sb-h1, .sb-hero-minimal .sb-h1 { color: #0f172a; }
.sb-hero-split .sb-lead, .sb-hero-minimal .sb-lead { color: #4b5563; }
.sb-hero-split .sb-hero-veil, .sb-hero-minimal .sb-hero-veil { display: none; }
.sb-hero-split .sb-eyebrow-hero, .sb-hero-minimal .sb-eyebrow-hero { color: var(--sb-primary); }

.sb-eyebrow-hero { color: rgba(255, 255, 255, .82); }
.sb-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: inherit; }
.sb-hero.text-center .sb-hero-actions { justify-content: center; }

/* -------------------------------------------------------------- sections */
.sb-section { padding: clamp(3.25rem, 6vw, 5.5rem) 0; }
.sb-section-tint { background: #f8fafc; }
.sb-section-accent { background: var(--sb-primary-light); }

.section-title, .page-title { text-align: center; }

.sb-pagehead { padding: clamp(3rem, 6vw, 5rem) 0; background-size: cover; background-position: center; color: #fff; }
.sb-pagehead-title { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; margin: 0; }
.sb-pagehead-sub { color: rgba(255, 255, 255, .85); margin: .5rem 0 0; max-width: 70ch; }

/* --------------------------------------------------------------- buttons */
.sb-site .btn { font-weight: 600; border-radius: var(--sb-radius); padding: .65rem 1.4rem; }
.sb-btn-primary { background: var(--sb-primary); border: 1px solid var(--sb-primary); color: #fff; }
.sb-btn-primary:hover { background: var(--sb-primary-dark); border-color: var(--sb-primary-dark); color: #fff; }
.sb-btn-outline { background: transparent; border: 1px solid var(--sb-primary); color: var(--sb-primary); }
.sb-btn-outline:hover { background: var(--sb-primary); color: #fff; }
.sb-btn-ghost { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .5); color: #fff; }
.sb-btn-ghost:hover { background: #fff; color: #0f172a; }
.sb-hero-split .sb-btn-ghost, .sb-hero-minimal .sb-btn-ghost { border-color: #cbd5e1; color: #334155; background: #fff; }
.sb-btn-invert { background: #fff; color: var(--sb-primary); border: 1px solid #fff; }
.sb-btn-invert:hover { background: rgba(255, 255, 255, .88); color: var(--sb-primary-dark); }

.sb-link { color: var(--sb-primary); font-weight: 600; text-decoration: none; }
.sb-link:hover { color: var(--sb-primary-dark); }

/* ----------------------------------------------------------------- cards */
.sb-card {
    background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: var(--sb-radius);
    padding: 1.6rem; display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}
.sb-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15, 23, 42, .1); }
.sb-card-body { padding: 1.35rem; }
.sb-card-post, .sb-card-listing, .sb-card-product { padding: 0; overflow: hidden; }
.sb-card-post img, .sb-card-listing img, .sb-card-product img { width: 100%; object-fit: cover; }
.sb-card-media { position: relative; }
.sb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; }

.sb-icon {
    width: 52px; height: 52px; border-radius: var(--sb-radius);
    display: grid; place-items: center; font-size: 1.45rem;
    background: var(--sb-primary-light); color: var(--sb-primary); margin-bottom: 1rem;
}
.sb-icon-solid { background: var(--sb-primary); color: #fff; }

.sb-checklist { list-style: none; padding: 0; margin: 1rem 0 0; }
.sb-checklist li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .55rem; color: #374151; }
.sb-checklist i { color: var(--sb-primary); margin-top: .25rem; }

.sb-chip {
    display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: .28rem .6rem; border-radius: 999px;
    background: var(--sb-primary-light); color: var(--sb-primary-dark); margin-bottom: .5rem;
}
.sb-chip-solid { background: var(--sb-primary); color: #fff; }
.sb-chip-float { position: absolute; top: .75rem; left: .75rem; margin: 0; }

.sb-meta { color: #6b7280; font-size: .875rem; display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .4rem; }

/* ----------------------------------------------------------------- stats */
.sb-stat-value { font-family: var(--sb-heading-font); font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; color: var(--sb-primary-dark); }
.sb-stat-label { color: #4b5563; font-size: .95rem; }

/* --------------------------------------------------------------- gallery */
.sb-gallery-item { margin: 0; overflow: hidden; border-radius: var(--sb-radius); position: relative; }
.sb-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s ease; }
.sb-gallery-item:hover img { transform: scale(1.06); }
.sb-gallery-item figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem .9rem;
    background: linear-gradient(transparent, rgba(9, 14, 26, .78)); color: #fff; font-size: .875rem;
}

.sb-tile { display: block; text-decoration: none; border-radius: var(--sb-radius); overflow: hidden; background: #fff; border: 1px solid rgba(15, 23, 42, .08); }
.sb-tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .4s ease; }
.sb-tile:hover img { transform: scale(1.05); }
.sb-tile-body { padding: 1.1rem 1.25rem 1.35rem; }

/* ------------------------------------------------------------ people etc */
.sb-avatar { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; display: block; }
.sb-avatar-sm { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sb-role { color: var(--sb-primary); font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }

.sb-quote {
    background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: var(--sb-radius);
    padding: 1.75rem; margin: 0; display: flex; flex-direction: column;
}
.sb-quote blockquote { font-size: 1.02rem; color: #374151; margin: 0 0 1.25rem; }
.sb-quote blockquote::before { content: "\201C"; font-size: 2.5rem; line-height: 0; color: var(--sb-primary); vertical-align: -.35em; margin-right: .15rem; }
.sb-quote figcaption { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.sb-quote figcaption span { display: block; color: #6b7280; font-size: .85rem; }
.sb-stars { color: #f59f00; margin-bottom: .75rem; }

/* --------------------------------------------------------------- pricing */
.sb-plan { text-align: center; position: relative; }
.sb-plan-featured { border-color: var(--sb-primary); box-shadow: 0 20px 50px rgba(15, 23, 42, .12); }
.sb-plan .sb-checklist li { justify-content: flex-start; text-align: left; }
.sb-price { margin: .5rem 0 1rem; }
.sb-price-value { font-family: var(--sb-heading-font); font-size: 2rem; font-weight: 800; color: #0f172a; }
.sb-price-period { color: #6b7280; font-size: .9rem; margin-left: .3rem; }
.sb-price-old { color: #9ca3af; margin-left: .4rem; font-size: .9rem; }

/* ------------------------------------------------------------- accordion */
.sb-accordion .accordion-item { border: 1px solid rgba(15, 23, 42, .1); border-radius: var(--sb-radius) !important; margin-bottom: .75rem; overflow: hidden; }
.sb-accordion .accordion-button { font-weight: 600; font-family: var(--sb-heading-font); }
.sb-accordion .accordion-button:not(.collapsed) { background: var(--sb-primary-light); color: var(--sb-primary-dark); box-shadow: none; }
.sb-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }

/* --------------------------------------------------------------- cta band */
.sb-cta { position: relative; padding: clamp(3rem, 5vw, 4.5rem) 0; background: var(--sb-primary); color: #fff; background-size: cover; background-position: center; }
.sb-cta .sb-h2, .sb-cta .sb-body { color: #fff; }
.sb-cta-veil { display: none; }
.sb-cta-image .sb-cta-veil { display: block; position: absolute; inset: 0; background: rgba(9, 14, 26, .68); }
.sb-cta-outline { background: #fff; color: inherit; border-top: 1px solid rgba(15, 23, 42, .08); border-bottom: 1px solid rgba(15, 23, 42, .08); }
.sb-cta-outline .sb-h2 { color: #0f172a; }
.sb-cta-outline .sb-body { color: #4b5563; }
.sb-cta-outline .sb-btn-invert { background: var(--sb-primary); color: #fff; border-color: var(--sb-primary); }

/* --------------------------------------------------------------- contact */
.sb-contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.sb-contact-list li { display: flex; gap: .9rem; margin-bottom: 1.1rem; }
.sb-contact-list i { font-size: 1.15rem; color: var(--sb-primary); width: 2.4rem; height: 2.4rem; display: grid; place-items: center; background: var(--sb-primary-light); border-radius: var(--sb-radius); flex: none; }
.sb-contact-list strong { display: block; font-size: .95rem; }
.sb-contact-list span, .sb-contact-list a { color: #6b7280; text-decoration: none; font-size: .95rem; }

.sb-form .form-control { border-radius: var(--sb-radius); border-color: #d7dee7; padding: .7rem .9rem; }
.sb-form .form-control:focus { border-color: var(--sb-primary); box-shadow: 0 0 0 .2rem var(--sb-primary-light); }
.sb-form .form-label { font-weight: 600; font-size: .9rem; color: #374151; }

.sb-signup { display: flex; gap: .6rem; flex-wrap: wrap; }
.sb-signup .form-control { max-width: 320px; border-radius: var(--sb-radius); }

.sb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sb-alert-success {
    display: flex; gap: .75rem; align-items: flex-start;
    background: #e7f8ef; border: 1px solid #b7e4cd; color: #11683f;
    border-radius: var(--sb-radius); padding: 1.1rem 1.25rem;
}

.sb-map { width: 100%; height: 240px; border: 0; border-radius: var(--sb-radius); }
.sb-map-wide { height: 380px; }

/* ------------------------------------------------------------------ misc */
.sb-logos img { max-height: 56px; width: auto; filter: grayscale(1); opacity: .65; transition: all .2s ease; }
.sb-logos img:hover { filter: none; opacity: 1; }

.sb-timeline { list-style: none; padding: 0 0 0 1.75rem; margin: 0; border-left: 2px solid var(--sb-primary-light); }
.sb-timeline li { position: relative; padding-bottom: 2rem; }
.sb-timeline li::before {
    content: ""; position: absolute; left: -2.3rem; top: .35rem;
    width: 14px; height: 14px; border-radius: 50%; background: var(--sb-primary); border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--sb-primary-light);
}
.sb-timeline-period { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-primary); }

.sb-menu-course { margin-bottom: 2.5rem; }
.sb-menu-course-title { font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-primary); margin-bottom: 1rem; }
.sb-menu-list { list-style: none; padding: 0; margin: 0; }
.sb-menu-list li { margin-bottom: 1.1rem; }
.sb-menu-line { display: flex; align-items: baseline; gap: .5rem; }
.sb-menu-name { font-family: var(--sb-heading-font); font-weight: 650; color: #0f172a; }
.sb-menu-dots { flex: 1; border-bottom: 1px dotted #cbd5e1; }
.sb-menu-price { font-weight: 700; color: var(--sb-primary-dark); }
.sb-menu-desc { color: #6b7280; font-size: .93rem; margin: .2rem 0 0; }

.sb-events { list-style: none; padding: 0; margin: 0; }
.sb-events li { display: flex; gap: 1.25rem; background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: var(--sb-radius); padding: 1.25rem 1.4rem; margin-bottom: .9rem; }
.sb-event-when { text-align: center; min-width: 92px; border-right: 1px solid rgba(15, 23, 42, .08); padding-right: 1rem; }
.sb-event-date { display: block; font-family: var(--sb-heading-font); font-weight: 800; color: var(--sb-primary); }
.sb-event-time { color: #6b7280; font-size: .875rem; }

.sb-countdown { position: relative; padding: clamp(4rem, 9vw, 7rem) 0; background-size: cover; background-position: center; color: #fff; }
.sb-countdown .sb-h1, .sb-countdown .sb-lead { color: #fff; }
.sb-clock { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0; }
.sb-clock > div {
    min-width: 104px; padding: 1rem .75rem; border-radius: var(--sb-radius);
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
}
.sb-clock span { display: block; font-family: var(--sb-heading-font); font-size: 2.1rem; font-weight: 800; line-height: 1; }
.sb-clock small { text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; opacity: .85; }
.sb-countdown .sb-signup { justify-content: center; }

.sb-panel { background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: var(--sb-radius); overflow: hidden; }
.sb-table thead th { background: #f8fafc; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }

.sb-placeholder-note { border: 1px dashed #cbd5e1; border-radius: var(--sb-radius); padding: 2rem; text-align: center; color: #64748b; }

/* ---------------------------------------------------------------- footer */
.sb-footer { padding: 3.5rem 0 1.5rem; background: #f8fafc; border-top: 1px solid rgba(15, 23, 42, .08); }
.sb-footer h4 { font-size: .95rem; margin-bottom: .9rem; }
.sb-footer-links { list-style: none; padding: 0; margin: 0; }
.sb-footer-links li { margin-bottom: .45rem; color: #6b7280; font-size: .93rem; }
.sb-footer-links a { color: #6b7280; text-decoration: none; }
.sb-footer-links a:hover { color: var(--sb-primary); }
.sb-socials { display: flex; gap: .5rem; margin-top: 1rem; }
.sb-socials a {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(15, 23, 42, .06); color: #475569; text-decoration: none;
}
.sb-socials a:hover { background: var(--sb-primary); color: #fff; }
.sb-footer-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(15, 23, 42, .08); color: #6b7280; font-size: .875rem; }

.sb-footer-dark { background: var(--sb-dark); border-top-color: rgba(255, 255, 255, .08); }
.sb-footer-dark h4, .sb-footer-dark .sb-brand-name { color: #fff; }
.sb-footer-dark .sb-body, .sb-footer-dark .sb-footer-links li, .sb-footer-dark .sb-footer-links a { color: rgba(255, 255, 255, .68); }
.sb-footer-dark .sb-footer-links a:hover { color: #fff; }
.sb-footer-dark .sb-socials a { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); }
.sb-footer-dark .sb-footer-bottom { border-top-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); }
.sb-brand-footer { margin-bottom: .9rem; }

/* ------------------------------------------------------- packed mode */
/*  When an installed design pack is styling the page, the renderer stops emitting our
    decorative classes - but these few base rules match on .sb-site itself and would still
    outrank the pack's body-level styling. Handing the values back to the pack's own
    variables is what lets a downloaded template look like itself.                        */
.sb-site.sb-packed {
    color: var(--default-color, #2b3440);
    background: var(--background-color, #fff);
    font-family: var(--default-font, var(--sb-body-font));
}
.sb-site.sb-packed h1,
.sb-site.sb-packed h2,
.sb-site.sb-packed h3,
.sb-site.sb-packed h4 {
    color: var(--heading-color, #0f172a);
    font-family: var(--heading-font, var(--sb-heading-font));
}
/* Let the pack's own container rules decide the measure. */
.sb-site.sb-packed .sb-container { max-width: none; }