/* ------------------------------------------------------------------
   Global navigation ported from the parent site (restaurantassociation.com)
   Values taken verbatim from the parent's app/globals.css + tailwind.config.ts.
   Plain-CSS / Bootstrap-compatible rewrite of the parent's React/Tailwind nav.
   Light mode only. Everything is scoped under .ra-nav to avoid clashing
   with the existing theme CSS (style.css / new-style.css / bootstrap).
   ------------------------------------------------------------------ */

/* ---- Satoshi (parent's primary font) ---- */
@font-face {
   font-family: "Satoshi";
   src: url("../webfonts/Satoshi-Variable.woff2") format("woff2");
   font-weight: 300 900;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: "Satoshi";
   src: url("../webfonts/Satoshi-VariableItalic.woff2") format("woff2");
   font-weight: 300 900;
   font-style: italic;
   font-display: swap;
}

/* ---- Parent CSS variables (light theme, from globals.css :root) ----
   Shared by the primary nav (.ra-nav), the secondary bar (.ra-subnav) and
   its mobile drawer (.ra-subnav-drawer) so both tiers read as one system. */
.ra-nav,
.ra-subnav,
.ra-subnav-drawer {
   --ra-nav-bg: #ffffff;        /* --nav-bg          0 0% 100% */
   --ra-nav-text: #0a0a0a;      /* --nav-text        0 0% 4%   */
   --ra-subnav-bg: #fff8f0;     /* --subnav-bg       33 100% 97% */
   --ra-subnav-text: #333333;   /* --subnav-text     0 0% 20%  */
   --ra-primary: #ef5c2a;       /* --custom-primary  15 86% 55% */
   --ra-searchbar-bg: #f4f4f4;  /* --searchbar-bg    0 0% 95.7% */
   --ra-searchbar-icon: #414141;/* --searchbar-icon  0 0% 25.5% */
   --ra-menu-icon: #faecec;     /* --menu-icon */
   --ra-brand-orange: #f15a29;  /* brand.orange */
   --ra-brand-black: #232526;   /* brand.black */
   --ra-mobile-panel: #f5f5fa;  /* mobile menu panels (parent bg-[#f5f5fa]) */
   --ra-mobile-subtext: #323239;/* parent text-[#323239] */
}

.ra-nav { font-family: "Satoshi", system-ui, sans-serif; }

/* ==================================================================
   HEADER STACK — primary + secondary pinned together as one unit.
   A single JS-sized spacer offsets the whole stack, so the secondary
   sits flush under the primary with no overlap and no gap on scroll.
   ================================================================== */
.ra-headerstack {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
   width: 100%;
}
.ra-headerstack-spacer { width: 100%; }

/* ==================================================================
   DESKTOP  (parent switches at lg = 1024px)
   ================================================================== */
.ra-nav__desktop { display: none; }

@media (min-width: 1024px) {
   .ra-nav__desktop { display: block; }
   .ra-nav__mobile { display: none !important; }
}

.ra-nav__bar {
   position: relative;
   z-index: 2;            /* above the secondary bar within the stack */
   width: 100%;
   background: var(--ra-nav-bg);
   box-shadow: 0 4px 8px 0px #1a1a1e1f; /* parent desktop shadow */
}

.ra-nav__bar-inner {
   display: flex;
   width: 100%;
   padding: 0.75rem 1rem; /* py-3 px-4 */
}

.ra-nav__row {
   display: flex;
   flex: 1 1 0%;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;           /* gap-2 */
   color: #0a0a0a;
}
@media (min-width: 1280px) {
   .ra-nav__row { gap: 1rem; } /* xl:gap-4 */
}

/* ---- Logo ---- */
.ra-nav__logo {
   position: relative;
   display: block;
   height: 50px;          /* h-[50px] */
   width: 160px;          /* w-[160px] */
   flex-shrink: 0;
}
.ra-nav__logo img {
   position: absolute;
   inset: 0;
   height: 100%;
   width: 100%;
   object-fit: contain;
}

/* ---- Menu ---- */
.ra-nav__menu {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
}
.ra-nav__menu-item {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.ra-nav__menu-link {
   padding: 0.25rem 1rem;  /* px-4 py-1 */
   font-size: 18px;        /* text-[18px] */
   line-height: 1.5;
   color: var(--ra-nav-text);
   text-decoration: none;
   transition: color 0.15s ease;
   white-space: nowrap;
}
.ra-nav__menu-item:hover .ra-nav__menu-link,
.ra-nav__menu-link.is-active {
   color: var(--ra-primary);
}
/* sliding underline indicator (parent: h-[3px] w-[80%] bottom-[-15px]) */
.ra-nav__menu-underline {
   position: absolute;
   bottom: -15px;
   left: 50%;
   transform: translateX(-50%);
   height: 3px;
   width: 80%;
   background: transparent;
   transition: all 0.15s ease;
}
.ra-nav__menu-item:hover .ra-nav__menu-underline,
.ra-nav__menu-underline.is-active {
   background: var(--ra-primary);
}

/* ---- Right actions (search + login + join) ---- */
.ra-nav__actions {
   position: relative;
   display: flex;
   min-width: 180px;       /* min-w-[180px] */
   flex-shrink: 0;
   align-items: center;
   justify-content: flex-end;
   gap: 0.5rem;            /* gap-2 */
}

/* Search is a LINK styled to look like a search box (parent SearchBar.tsx).
   Icon-only under 2xl (1536px); full pill with gradient border + text at 2xl. */
.ra-nav__search {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
   width: 46px;                 /* w-[46px] icon-only */
   height: 46px;
   border-radius: 12px;         /* rounded-xl */
   text-decoration: none;
}
.ra-nav__search-inner {
   display: flex;
   align-items: center;
   justify-content: center;     /* centred icon when no text */
   width: 100%;
   height: 100%;
   border-radius: 10px;         /* parent inner rounded-[10px] */
   background: var(--ra-searchbar-bg); /* #F4F4F4 */
}
.ra-nav__search-icon {
   width: 20px;                 /* h-5 w-5 */
   height: 20px;
   font-size: 18px;
   line-height: 20px;
   text-align: center;
   color: #6b5cf6;              /* parent sparkle-icon colour */
   flex-shrink: 0;
}
.ra-nav__search-text {
   display: none;               /* hidden below 2xl */
   font-size: 15px;
   font-weight: 400;
   color: #6b7280;              /* parent placeholder text colour */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
@media (min-width: 1536px) {
   .ra-nav__search {
      width: 185px;             /* w-[185px] */
      padding: .15rem;             /* p-[2px] — shows as the gradient border */
      background: linear-gradient(to right, #2d7cff, #7b61ff, #ff6a3d); /* from-[#2D7CFF] via-[#7B61FF] to-[#FF6A3D] */
   }
   .ra-nav__search-inner {
      justify-content: flex-start;
      gap: 12px;                /* gap-3 */
      padding: 0 12px;          /* px-[12px] */
   }
   .ra-nav__search-text { display: inline; }
}

/* login / person button (parent: h-10 w-10 rounded-lg bg-custom-primary) */
.ra-nav__login {
   display: flex;
   height: 40px;
   width: 40px;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   background: var(--ra-primary);
   color: var(--ra-menu-icon);  /* #faecec icon */
   text-decoration: none;
   font-size: 18px;
}
.ra-nav__login:hover { color: var(--ra-menu-icon); opacity: 0.95; }

/* "Join Free" outline button (parent buttonVariants outline, size lg) */
.ra-nav__join {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 43px;
   padding: 0 .75rem;
   border: 1px solid var(--ra-brand-orange);
   border-radius: 6px;
   background: transparent;
   color: var(--ra-brand-orange);
   font-size: 16px;
   font-weight: 500;
   white-space: nowrap;
   text-decoration: none;
   transition: background-color 0.15s ease;
}
.ra-nav__join:hover {
   background: rgba(241, 90, 41, 0.1); /* brand-orange/10 */
   color: var(--ra-brand-orange);
}

/* ==================================================================
   MOBILE  (< 1024px)
   ================================================================== */
.ra-nav__mobile { display: block; }
@media (min-width: 1024px) {
   .ra-nav__mobile { display: none; }
}

.ra-nav__mbar {
   position: relative;
   z-index: 2;                   /* above the secondary bar within the stack */
   width: 100%;
   height: 98px;                 /* parent h-[98px] */
   background: var(--ra-nav-bg);
   padding: 1.5rem 1rem;         /* py-6 px-4 */
   box-shadow: 0 0 8px 0 #78788c33; /* parent mobile shadow */
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.ra-nav__mlogo { display: block; }
.ra-nav__mlogo img { height: 48px; width: auto; }

.ra-nav__mactions {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 0.375rem; /* gap-1.5 */
}
.ra-nav__msearch-btn {
   height: 36px;
   width: 36px;
   border: 0;
   background: transparent;
   color: #6b5cf6;   /* parent sparkle-icon colour */
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   cursor: pointer;
}
.ra-nav__mlogin {
   height: 32px;
   width: 32px;
   border-radius: 6px;
   background: var(--ra-primary);
   color: var(--ra-menu-icon);
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   font-size: 15px;
}

/* hamburger */
.ra-nav__burger {
   width: 28px;
   height: 28px;
   border: 0;
   background: transparent;
   padding: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 5px;
   cursor: pointer;
}
.ra-nav__burger span {
   display: block;
   width: 22px;
   height: 2px;
   background: #000;
   border-radius: 2px;
   transition: transform 0.3s ease, opacity 0.2s ease;
}

/* full-screen overlay menu */
.ra-nav__overlay {
   position: fixed;
   inset: 0;
   z-index: 200;
   background: #fff;
   display: none;
   flex-direction: column;
}
.ra-nav__overlay.is-open { display: flex; }
body.ra-nav-open { overflow: hidden; }

.ra-nav__overlay-top {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   height: 55px;                /* parent h-[55px] */
   background: var(--ra-mobile-panel);
   padding: 0.75rem 1.5rem 0.75rem 1rem; /* py-3 pr-6 */
}
/* reuse burger as the close control, rendered as an X */
.ra-nav__overlay-top .ra-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ra-nav__overlay-top .ra-nav__burger span:nth-child(2) { opacity: 0; }
.ra-nav__overlay-top .ra-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ra-nav__overlay-body {
   display: flex;
   flex-direction: column;
   height: calc(100vh - 55px);   /* parent h-[calc(100vh-55px)] */
   overflow-y: auto;
}
.ra-nav__mlist {
   list-style: none;
   margin: 0;
   padding: 0;
   width: 100%;
   display: flex;
   flex-direction: column;
}
.ra-nav__mlist > li { border-bottom: 2px solid #e9e9ef; } /* divide-y-2 */

/* simple link rows */
.ra-nav__mlink {
   display: block;
   padding: 0.875rem 1.5rem;    /* py-[.875rem] px-6 */
   font-size: 16px;
   font-weight: 500;
   line-height: 1.5;
   letter-spacing: 0.4px;       /* tracking-[.4px] */
   color: var(--ra-nav-text);
   text-decoration: none;
}

/* accordion button row */
.ra-nav__macc-btn {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-between;
   padding: 0.875rem 1.5rem;
   border: 0;
   background: transparent;
   font-family: inherit;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 0.4px;
   color: var(--ra-nav-text);
   cursor: pointer;
}
.ra-nav__macc-btn .ra-nav__chevron {
   transition: transform 0.3s ease-in-out;
   font-size: 18px;
   color: #000;
}
.ra-nav__macc.is-open .ra-nav__chevron { transform: rotate(180deg); }

.ra-nav__macc-panel { display: none; }
.ra-nav__macc.is-open .ra-nav__macc-panel { display: block; }
.ra-nav__sublist {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   background: var(--ra-mobile-panel);
}
.ra-nav__sublist > li { border-top: 1px solid #dddee6; } /* divide-y */
.ra-nav__sublink {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   padding-left: 2rem;          /* pl-8 */
   text-decoration: none;
}
.ra-nav__sublink i {
   width: 1.5rem;               /* h-6 w-6 */
   color: #4b5563;              /* text-gray-600 */
   text-align: center;
}
.ra-nav__sublink span {
   padding: 0.875rem 1.5rem;
   font-size: 16px;
   font-weight: 500;
   line-height: 1.5;
   letter-spacing: 0.4px;
   text-transform: capitalize;
   color: var(--ra-mobile-subtext);
}

/* ==================================================================
   SECONDARY NAV
   Reuses the existing header_lg_device (.ra-subnav, wrapped in .menubar)
   and header_sm_device (.ra-subnav-drawer). Only typography is changed,
   to the parent's secondaryNavbar values; layout/markup stay as-is.
   ================================================================== */
.ra-subnav.menubar {
   position: relative;
   z-index: 1;                       /* below the primary bar in the stack */
   margin: 0;
   padding: 0;                       /* sits flush under the primary header */
   background: var(--ra-subnav-bg);  /* #FFF8F0 — same cream as the parent sub-nav */
}

/* ==================================================================
   TRIMMED SECONDARY BAR — Home / Courses / Cart
   Styled to match the parent's secondaryNavbar.tsx values (the News row it
   replaces): centered cream bar, Satoshi 16/27/500, #333 text, #EF5C2A
   hover/active, 2.5px x 80% underline. Courses keeps its hover dropdown and
   Cart keeps its hover panel.
   ================================================================== */
@media (min-width: 1024px) {
   .ra-coursenav { min-height: 3.5rem; }            /* min-h-[3.5rem] */
   .ra-coursenav .container { display: flex; align-items: center; }
   .ra-coursenav .navbar-collapse { justify-content: center; }
}
.ra-coursenav__list {
   gap: 1rem;                                        /* gap-4 */
   justify-content: center;                          /* centered row */
   width: 100%;
}
/* each item is a column: link/icon on top, underline below */
.ra-coursenav__list > .nav-item {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.ra-coursenav__list > .nav-item > .nav-link {
   padding: 0.5rem 1rem !important;                  /* py-2 px-4 */
}
/* sliding underline (parent secondaryNavbar: h-[2.5px] w-[80%]) */
.ra-coursenav__list > .nav-item::after {
   content: "";
   display: block;
   height: 2.5px;
   width: 80%;
   margin: 0 auto;
   background: transparent;
   transition: all 0.15s ease;
}
.ra-coursenav__list > .nav-item:hover::after {
   background: var(--ra-primary);                    /* #EF5C2A */
}
/* anchor the Courses dropdown flush under its item (bar is shorter now,
   so the original top:58px would leave a hover gap) */
.ra-coursenav .main-nav-wrap li .navbarHover { top: 100%; }
/* Cart: keep the icon + count badge + hover panel, recoloured to match */
.ra-coursenav .menu_pro_cart_tgl {
   position: relative;
   display: inline-flex;
   align-items: center;
   padding: 0.5rem 1rem;                             /* align with the text items */
   color: var(--ra-subnav-text);                     /* #333333 */
   text-decoration: none;
   cursor: pointer;
}
.ra-coursenav .menu_pro_cart_tgl i {
   font-size: 20px;
   color: inherit;
   transition: color 0.15s ease;
}
.ra-coursenav__list > .nav-item:hover .menu_pro_cart_tgl,
.ra-coursenav__list > .nav-item:hover .menu_pro_cart_tgl i {
   color: var(--ra-primary);                         /* #EF5C2A on hover */
}
.ra-coursenav .menu_pro_cart_tgl .menu_number {
   position: absolute;
   top: -1px;
   right: 0;
   margin: 0;
   height: 15px;
   width: 15px;
   line-height: 15px;
   text-align: center;
   font-size: 9px;
   color: #fff;
   background-color: #f25c88;
   border-radius: 50%;
}

/* ---- Parent sub-menu typography (verbatim from secondaryNavbar.tsx) ----
   text-[16px]/[27px] font-medium, color --subnav-text, hover/active
   --custom-primary. Satoshi inherited from the parent's default font-sans. */
.ra-subnav,
.ra-subnav a,
.ra-subnav .nav-link,
.ra-subnav .header-dropdown,
.ra-subnav-drawer,
.ra-subnav-drawer a {
   font-family: "Satoshi", system-ui, sans-serif;
}

/* main menu links (desktop bar) — the parent sub-menu item equivalents */
.ra-subnav .menubar li .header-dropdown,
.ra-subnav .header-dropdown,
.ra-subnav .main-nav-wrap .nav-link {
   font-size: 16px !important;        /* text-[16px] */
   line-height: 27px !important;      /* /[27px]    */
   font-weight: 500 !important;       /* font-medium */
   letter-spacing: normal !important;
   color: var(--ra-subnav-text) !important;  /* #333333 */
   transition: color 0.15s ease;
}
.ra-subnav .header-dropdown:hover,
.ra-subnav .main-nav-wrap .nav-link:hover,
.ra-subnav .main-nav-wrap .nav-item:hover .nav-link,
.ra-subnav .main-nav-wrap .nav-item.active .nav-link,
.ra-subnav .nav-item.active .header-dropdown {
   color: var(--ra-primary) !important;       /* #EF5C2A */
}

/* mobile drawer (header_sm_device) menu links — same typography */
.ra-subnav-drawer .offcanvas-body .btn-toggle,
.ra-subnav-drawer .offcanvas-body .btn-toggle-list,
.ra-subnav-drawer .offcanvas-body a {
   font-size: 16px !important;
   line-height: 27px !important;
   font-weight: 500 !important;
   letter-spacing: normal !important;
   color: var(--ra-subnav-text) !important;
   transition: color 0.15s ease;
}
.ra-subnav-drawer .offcanvas-body a:hover,
.ra-subnav-drawer .offcanvas-body .btn-toggle:hover,
.ra-subnav-drawer .offcanvas-body .btn-toggle-list:hover {
   color: var(--ra-primary) !important;
}

/* avoid a redundant second logo on mobile — the primary bar already shows it */
@media (max-width: 1023.98px) {
   .ra-subnav .navbar-brand.logo { display: none; }
}

/* ---- Breakpoint shift: collapse the secondary at 1024px (matching the
   primary), not the project's native 992px. Force the mobile layout across
   the 992–1023px gap, where the project would otherwise show desktop. ---- */
@media (min-width: 992px) and (max-width: 1023.98px) {
   .ra-subnav .navbar-collapse { display: none !important; }
   .ra-subnav .menu-offcanves { display: inline-flex !important; align-items: center; }
   .ra-subnav .inline-form { display: none !important; }       /* hidden until toggled */
   .ra-subnav .inline-form.active { display: block !important; }
   .ra-subnav-drawer .mobile-view-offcanves { display: block !important; } /* allow drawer to open */
}