/* =====================================================================
   TOUCAN COMPONENTS
   Client snippet for Toucan Glass.

   Fluent Snippet:  Toucan Components   Type: CSS, front end   Priority: 9
   Loads after the kit files (BP 00 Tokens, BP 01 Spacing, BP 20 Components,
   BP 30 Rails, BP 05 Megabar).

   No colour, font or spacing is set here. Colours and fonts are Elementor
   globals, spacing is the section-* and gap-* classes. What is here is the
   few things Elementor has no control for.

     tg-hero        One hero for every width. The photograph (tg-hero-media)
                    sits behind the copy on desktop and above it from tablet
                    down. Before this there were two heroes on every page,
                    one hidden, and two H1s.
     tg-slot        A card fed by optional fields (the product boxes). Leave
                    the card's title field empty and the card is left out.
     Gravity Forms  Buttons and focus colour follow the brand global.
     Header         Toucan's values for the kit megabar (BP 05): bar height,
                    square corners, and menu titles in the case they are typed.
===================================================================== */

/* ---- tokens the kit reads. Toucan's corners are 3px ---- */
body { --brand-radius: 3px; --brand-radius-card: 3px; }

/* ---- hero ---- */
.e-con.tg-hero { isolation: isolate; }
@media (min-width: 1025px) {
    .e-con.tg-hero .e-con.tg-hero-media { position: absolute; inset: 0; width: auto; max-width: none; z-index: -1; }
}
@media (max-width: 1024px) {
    .e-con.tg-hero .e-con.tg-hero-media { order: -1; }
}

/* ---- optional cards: no title, no card ---- */
.e-con.tg-slot:not(:has(.tg-slot-title .elementor-heading-title)) { display: none; }

/* ---- Gravity Forms: colour and button type from the globals ----
   Gravity Forms prints its own colours per form with an id selector, so
   these need !important to be heard. Every value is an Elementor global. */
.gform_wrapper.gform-theme--framework {
    --gf-color-primary: var(--e-global-color-accent) !important;
    --gf-color-primary-darker: var(--e-global-color-bphover) !important;
    --gf-color-primary-lighter: var(--e-global-color-accent) !important;
    --gf-color-primary-contrast: var(--e-global-color-bponaccent) !important;
    --gf-ctrl-border-color-focus: var(--e-global-color-accent) !important;
    --gf-ctrl-outline-color-focus: color-mix(in srgb, var(--e-global-color-accent) 55%, transparent) !important;
    --gf-ctrl-btn-font-size: var(--e-global-typography-95f01fd-font-size) !important;
    --gf-ctrl-btn-font-weight: var(--e-global-typography-95f01fd-font-weight) !important;
    --gf-ctrl-btn-text-transform: var(--e-global-typography-95f01fd-text-transform) !important;
    --gf-ctrl-btn-padding-y: 12px !important;
    --gf-form-gap-y: 14px;
}
@media (max-width: 767px) {
    .gform_wrapper.gform-theme--framework .gform_footer .gform_button { width: 100%; }
}

/* ---- header: Toucan's values for the kit megabar ---- */
body { --bp-megabar-height: 104px; --bp-megabar-height-mobile: 72px; }
.bp-megabar-nav .e-n-menu-title-text,
.bp-megabar-heading { text-transform: none; letter-spacing: normal; }
.bp-megabar-panel { border-radius: var(--brand-radius-card); }
.bp-megabar-panel .elementor-image-box-wrapper { padding: 8px 10px; border-radius: var(--brand-radius); transition: background .2s ease; }
.bp-megabar-panel .elementor-image-box-wrapper:hover { background: var(--brand-surface); }