/* Shared by every public page (include/header.php), loaded after the page's own styles. */

/* ---------- Desktop: "Brothers" is a lock icon and Login at the end of the menu ---------- */
.main_nav li.nav_login a.nav_login_btn,
.main_nav li.nav_login a.nav_login_btn:hover,
.main_nav li.nav_login.active a.nav_login_btn { display: inline-flex; align-items: center; gap: 7px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: #660066; }
.main_nav li.nav_login a.nav_login_btn .fa { font-size: 15px; color: #660066; }

/* Phone/tablet controls are hidden on desktop. */
.site_menu_btn, .site_drawer, .site_drawer_backdrop { display: none; }

/* ---------- Phones and tablets ---------- */
@media only screen and (max-width: 991px)
{
	/* Purple bar, larger logo, white name */
	.header_container { background: #660066; box-shadow: 0 4px 18px rgba(42, 6, 48, .25); }
	.header .header_content, .header.scrolled .header_content { height: 76px; }
	.header .logo, .header.scrolled .logo { width: 56px; height: 56px; }
	.header .logo_text, .header.scrolled .logo_text { color: #ffffff; font-size: 24px; margin-left: 10px; }
	.hamburger { display: none !important; }

	/* Menu button on the right: three gold bars, no background */
	.site_menu_btn {
		display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 44px; height: 44px; margin-left: auto; padding: 0 11px;
		border: 0; border-radius: 12px; background: none; cursor: pointer;
	}
	.site_menu_btn span { display: block; height: 3px; border-radius: 2px; background: #c29c3a; transition: transform .25s ease, opacity .2s ease; }
	.site_menu_btn:hover span { background: #e9cf7a; }
	.site_menu_btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

	/* Slide-in menu */
	.site_drawer_backdrop {
		display: block; position: fixed; inset: 0; z-index: 200;
		background: rgba(20, 4, 24, .55); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
	}
	.site_drawer {
		display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
		width: min(86vw, 360px); background: linear-gradient(180deg, #4a0d4f 0%, #2a0630 100%); color: #ffffff;
		box-shadow: -12px 0 40px rgba(0, 0, 0, .35); transform: translateX(100%); transition: transform .3s ease; outline: none;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
	}
	body.site_drawer_open { overflow: hidden; }
	body.site_drawer_open .site_drawer { transform: none; }
	body.site_drawer_open .site_drawer_backdrop { opacity: 1; visibility: visible; }

	.site_drawer_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
	.site_drawer_brand { display: flex; align-items: center; gap: 12px; color: #ffffff; text-decoration: none; }
	.site_drawer_brand img { width: 52px; height: 52px; }
	.site_drawer_brand span { font-size: 20px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
	.site_drawer_brand small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #e9cf7a; text-transform: none; }
	.site_drawer_close { width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #9a7aa0; font-size: 24px; cursor: pointer; }
	.site_drawer_close:hover { color: #e9cf7a; }

	.site_drawer_nav { display: flex; flex-direction: column; padding: 12px; }
	.site_drawer_nav a {
		display: flex; align-items: center; gap: 14px; padding: 14px 14px; border-radius: 12px;
		color: #f1e6f3; font-size: 17px; font-weight: 700; text-decoration: none;
	}
	.site_drawer_nav a .fa:first-child { width: 22px; text-align: center; color: #e9cf7a; font-size: 18px; }
	.site_drawer_nav a .site_drawer_arrow { margin-left: auto; color: rgba(255, 255, 255, .35); }
	.site_drawer_nav a:hover, .site_drawer_nav a:focus { background: rgba(255, 255, 255, .08); color: #ffffff; }
	.site_drawer_nav a.is-active { background: rgba(194, 156, 58, .2); color: #ffffff; box-shadow: inset 3px 0 0 #c29c3a; }

	.site_drawer_foot { margin-top: auto; padding: 16px 18px 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
	.site_drawer_login {
		display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 12px;
		background: #c29c3a; color: #2a0630; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
	}
	.site_drawer_login:hover, .site_drawer_login:focus { background: #e9cf7a; color: #2a0630; }
	.site_drawer_social { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
	.site_drawer_social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #ffffff; font-size: 18px; }
	.site_drawer_social a:hover { background: #c29c3a; color: #2a0630; }
}

@media only screen and (max-width: 400px)
{
	.header .logo_text, .header.scrolled .logo_text { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce)
{
	.site_drawer, .site_drawer_backdrop, .site_menu_btn span { transition: none; }
}