/* ==========================================================================
   Storyshine — Site header (header-base.css)
   Bootstrap-free rebuild of the site header. Every rule is scoped to the
   header's own `ss-hdr` / `ss-sidebar` classes so nothing here leaks into
   the page, and page styles (base.css etc.) cannot leak into the header.
   Load it AFTER base.css / page CSS. Behaviour lives in js/header.js.

   Contents
     1. Font (Poppins)
     2. Header shell + scroll state
     3. Scoped reset (typography, links, lists, images)
     4. Layout (container, row, column, bar)
     5. Logo, "Start for free" link, desktop/mobile visibility
     6. Buttons (Sign up / Log in / menu buttons / mobile hamburger)
     7. Avatar + verified icon
     8. Dropdown menus
     9. Sidebar (off-canvas) + backdrop
    10. Page offset for the fixed header + scroll lock
    11. Responsive (same breakpoints as the original header)

   Container fixes in this revision (search "FIX"):
     FIX 1  Gutter is now one variable (--ss-hdr-gutter) instead of a
            hard-coded padding override inside the 991px media query.
     FIX 2  Container respects notch / landscape safe-area insets.
     FIX 3  Tablet range (576-991px, where the mobile header is shown) is
            fluid instead of being capped at 540/720px, so the hamburger
            and logo sit at the viewport gutters.
     FIX 4  Container no longer jumps sideways when the sidebar opens and
            the page scrollbar disappears (fixed header is compensated).
     FIX 5  Header transition limited to background/shadow so the padding
            compensation in FIX 4 doesn't animate.
   ========================================================================== */

/* 1. Font =================================================================== */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/poppins-300.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/poppins-500.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/poppins-700.woff2") format("woff2");
}
/* 2. Header shell + scroll state ============================================ */
.ss-hdr {
 --ss-hdr-red: #dd3324;
 --ss-hdr-yellow: #fdd128;
 --ss-hdr-hover-bg: #f4f4f4;
 --ss-hdr-link: #333;
 --ss-hdr-text: #212529;
 --ss-hdr-gutter: 0.75rem; /* FIX 1: side gutter of the container (2rem on the mobile header) */
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1030;
	padding: 0.75rem 0;
	background-color: rgba(255, 255, 255, 0);
	box-shadow: none;
	transition: background-color 300ms, box-shadow 300ms; /* FIX 5 (was: 300ms / all) */
	color: var(--ss-hdr-text);
	font-size: 1rem;
	font-weight: 400;
	text-align: left;
	letter-spacing: normal;
	-webkit-font-smoothing: auto;
}
/* Added by header.js once the page is scrolled more than 30px */
.ss-hdr.is-scrolled {
	background-color: #f4f4f4;
	box-shadow: 0px 5px 18px -6px rgb(0 0 0 / 20%);
}
/* 3. Scoped reset ============================================================ */
.ss-hdr, .ss-hdr * {
	box-sizing: border-box;
	font-family: Poppins, Kanit, Inter, Manrope, "Segoe UI", Arial, sans-serif;
	line-height: 1.2em;
}
.ss-hdr a {
	color: var(--ss-hdr-link);
	text-decoration: none;
	cursor: pointer;
	transition: 300ms;
}
.ss-hdr a:hover {
	color: var(--ss-hdr-red);
}
.ss-hdr ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ss-hdr img {
	display: inline;
	max-width: none;
	height: auto;
	vertical-align: middle;
}
.ss-hdr small {
	font-size: 0.875em;
}
.ss-hdr button {
	margin: 0;
	font-size: inherit;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
/* Keyboard focus ring (mouse clicks stay ring-free, as before) */
.ss-hdr a:focus, .ss-hdr button:focus {
	outline: 0;
}
.ss-hdr a:focus-visible, .ss-hdr button:focus-visible {
 outline: 2px solid var(--ss-hdr-red);
 outline-offset: 2px;
}
/* 4. Layout ================================================================== */
.ss-hdr__container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	/* FIX 1 + 2: gutter from the variable, never smaller than the device safe-area */
	padding-right: max(var(--ss-hdr-gutter), env(safe-area-inset-right, 0px));
	padding-left: max(var(--ss-hdr-gutter), env(safe-area-inset-left, 0px));
}
.ss-hdr__row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -0.75rem;
	margin-left: -0.75rem;
}
.ss-hdr__col {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	padding-right: 0.75rem;
	padding-left: 0.75rem;
}
/* Logo + account area. Full-width row on desktop; floats left on mobile so
   the hamburger can sit on the right. */
.ss-hdr__bar {
	display: flex;
	flex-wrap: wrap;
	float: none;
}
/* 5. Logo, CTA link, visibility ============================================= */
.ss-hdr__logo {
	display: flex;
	margin-bottom: 0;
	margin-right: auto;
}
.ss-hdr .ss-hdr__brand {
	width: 180px;
}
.ss-hdr__cta {
	margin-left: auto;
}
.ss-hdr .ss-hdr__cta a {
	position: relative;
	top: 8px;
	font-size: 16px;
	color: var(--ss-hdr-link);
	text-decoration: underline;
}
.ss-hdr .ss-hdr__cta a:hover {
	color: var(--ss-hdr-red);
}
.ss-hdr .ss-hdr--desktop {
	display: block;
}
.ss-hdr .ss-hdr--mobile {
	display: none;
}
/* 6. Buttons ================================================================= */
.ss-hdr .ss-hdr-btn {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 1px;
	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: 300ms;
}
.ss-hdr .ss-hdr-btn--red {
	color: #fff;
	background-color: var(--ss-hdr-red);
	border-color: var(--ss-hdr-red);
}
.ss-hdr .ss-hdr-btn--red:hover {
	color: #000;
	background-color: var(--ss-hdr-yellow);
	border-color: var(--ss-hdr-yellow);
}
.ss-hdr .ss-hdr-btn--yellow {
	color: #000;
	background-color: var(--ss-hdr-yellow);
	border-color: var(--ss-hdr-yellow);
}
.ss-hdr .ss-hdr-btn--yellow:hover {
	color: #fff;
	background-color: var(--ss-hdr-red);
	border-color: var(--ss-hdr-red);
}
/* Desktop "☰" menu button (logged out) */
.ss-hdr .ss-hdr__menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 6px 4px 8px;
	font-size: 1.5rem;
	line-height: 0.5;
	white-space: nowrap;
}
.ss-hdr .ss-hdr__menu-btn i {
	margin: 0;
	line-height: 0.5;
}
/* Mobile hamburger (opens the sidebar) */
.ss-hdr .ss-hdr__burger {
	position: relative;
	float: right;
	padding: 0.01rem 0.2rem;
	border: 1px solid var(--ss-hdr-red);
	border-radius: 0.25rem;
	color: #fff;
	background-color: var(--ss-hdr-red);
	font-size: 2rem;
	font-weight: 400;
	line-height: 0.5;
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	user-select: none;
	transition: 300ms;
}
.ss-hdr .ss-hdr__burger:hover {
	color: #000;
	background-color: var(--ss-hdr-yellow);
	border-color: var(--ss-hdr-yellow);
}
/* 7. Avatar + verified icon ================================================== */
.ss-hdr .ss-hdr-avatar {
	width: 35px;
	height: 35px;
	flex-shrink: 0;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	background: #fff;
	transition: 0.3s;
}
.ss-hdr span.ss-hdr-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #373737;
	font-family: Inter, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}
.ss-hdr img.ss-hdr-avatar {
	object-fit: cover;
	object-position: center center;
}
.ss-hdr .ss-hdr-avatar:hover {
	transform: scale(1.15);
}
.ss-hdr .ss-hdr-verified {
	width: 15px;
}
/* 8. Dropdown menus ========================================================== */
.ss-hdr .ss-hdr-dd {
	position: relative;
	align-self: flex-start; /* menu hangs from the toggle, not the full bar height */
}
.ss-hdr .ss-hdr__user {
	margin-right: 1rem;
	margin-left: 1rem;
}
.ss-hdr .ss-hdr__actions {
	text-align: right;
}
/* Avatar toggle (logged in) */
.ss-hdr .ss-hdr-dd__toggle {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ss-hdr-link);
	font-size: 1rem;
	white-space: nowrap;
	transition: 300ms;
}
.ss-hdr .ss-hdr-dd__toggle:hover {
	color: var(--ss-hdr-red);
}
.ss-hdr .ss-hdr-dd__toggle--caret::after {
	content: "";
	display: inline-block;
	margin-left: 0.255em;
	vertical-align: 0.255em;
	border-top: 0.3em solid;
	border-right: 0.3em solid transparent;
	border-bottom: 0;
	border-left: 0.3em solid transparent;
}
.ss-hdr .ss-hdr-dd__menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 1000;
	display: none;
	min-width: 10rem;
	margin: 12px 0 0;
	padding: 0.5rem 0;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.25rem;
	background-color: #fff;
	background-clip: padding-box;
	color: var(--ss-hdr-text);
	font-size: 1rem;
	text-align: left;
	list-style: none;
}
.ss-hdr .ss-hdr-dd.is-open > .ss-hdr-dd__menu {
	display: block;
}
.ss-hdr .ss-hdr-dd__header {
	display: block;
	margin: 0;
	padding: 5px 18px;
	color: #6c757d;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}
.ss-hdr .ss-hdr-dd__item {
	display: block;
	width: 100%;
	clear: both;
	padding: 0.25rem 1rem;
	border: 0;
	background-color: transparent;
	color: var(--ss-hdr-link);
	font-weight: 400;
	text-align: inherit;
	white-space: nowrap;
}
.ss-hdr .ss-hdr-dd__item:hover, .ss-hdr .ss-hdr-dd__item:focus {
	color: var(--ss-hdr-red);
	background-color: var(--ss-hdr-hover-bg);
}
.ss-hdr .ss-hdr-dd__item:active, .ss-hdr .ss-hdr-dd__item.is-active {
	color: #fff;
	background-color: var(--ss-hdr-red);
}
.ss-hdr .ss-hdr-dd__divider, .ss-hdr .ss-sidebar__divider {
	width: 90%;
	height: 1px;
	margin: 0.5rem auto;
	overflow: hidden;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.3);
	background-color: #7f7f7f;
	color: inherit;
	opacity: 0.25;
}
/* 9. Sidebar (off-canvas) + backdrop ========================================= */
.ss-hdr .ss-sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: flex;
	flex-direction: column;
	width: 300px;
	max-width: 100%;
	border-right: 1px solid rgba(0, 0, 0, 0.2);
	background-color: #fff;
	background-clip: padding-box;
	outline: 0;
	visibility: hidden;
	transform: translateX(-100%);
	transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
}
.ss-hdr .ss-sidebar.is-open {
	visibility: visible;
	transform: none;
	transition: transform 0.3s ease-in-out, visibility 0s linear 0s;
}
.ss-hdr .ss-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	border-bottom: 1px solid #dee2e6;
}
.ss-hdr .ss-sidebar__logo {
	display: flex;
	margin-bottom: 0;
	margin-right: auto;
}
.ss-hdr .ss-sidebar__close {
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	margin: -1.5rem -0.5rem -0.5rem 0;
	padding: 0.5rem;
	border: 0;
	border-radius: 0.25rem;
	color: inherit;
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
	opacity: 0.5;
}
.ss-hdr .ss-sidebar__close:hover {
	opacity: 0.75;
}
.ss-hdr .ss-sidebar__close:focus-visible {
 outline: 0;
 box-shadow: 0 0 0 0.25rem rgba(221, 51, 36, 0.25);
 opacity: 1;
}
.ss-hdr .ss-sidebar__body {
	flex-grow: 1;
	padding: 1rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ss-hdr .ss-sidebar__inner {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}
/* Profile row (avatar + brand name) */
.ss-hdr .ss-sidebar__profile {
	width: 100%;
	margin: 0;
	padding: 0;
}
.ss-hdr .ss-sidebar__profile > li {
	display: inline-block;
	vertical-align: middle;
}
.ss-hdr .ss-sidebar__profile a {
	color: #000;
}
.ss-hdr .ss-sidebar__profile a:hover {
	color: var(--ss-hdr-red);
}
.ss-hdr .ss-sidebar__profile-pic {
	width: 15%;
	margin-right: 0.5rem;
}
.ss-hdr .ss-sidebar__profile-info {
	width: 75%;
	line-height: 0.9em;
}
.ss-hdr .ss-sidebar__profile-info a {
	line-height: 0.9em;
}
.ss-hdr .ss-sidebar__company {
	font-size: 14px;
	font-weight: 600;
}
/* Menu list */
.ss-hdr .ss-sidebar__group {
	padding: 0.5rem 0;
}
.ss-hdr .ss-sidebar__group--bordered {
	border-top: 1px solid #dee2e6;
}
.ss-hdr .ss-sidebar__menu {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
}
.ss-hdr .ss-sidebar__divider {
	width: 100%;
}
.ss-hdr .ss-sidebar__link {
	display: block;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: 0.25rem;
	background: none;
	color: var(--ss-hdr-link);
	text-decoration: none;
}
.ss-hdr .ss-sidebar__link:hover, .ss-hdr .ss-sidebar__link:focus {
	color: var(--ss-hdr-red);
	background-color: var(--ss-hdr-hover-bg);
}
.ss-hdr .ss-sidebar__link:active, .ss-hdr .ss-sidebar__link.is-active {
	color: #fff;
	background-color: var(--ss-hdr-red);
}
/* Dimmed page behind the open sidebar */
.ss-hdr .ss-sidebar-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1040;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s linear, visibility 0s linear 0.15s;
}
.ss-hdr .ss-sidebar-backdrop.is-open {
	opacity: 0.5;
	visibility: visible;
	transition: opacity 0.15s linear, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
.ss-hdr .ss-sidebar,  .ss-hdr .ss-sidebar.is-open,  .ss-hdr .ss-sidebar-backdrop,  .ss-hdr .ss-sidebar-backdrop.is-open {
	transition: none;
}
}
/* 10. Page offset + scroll lock ============================================== */
/* The header is fixed, so pages must leave room for it. Pick ONE body class:
   .ss-has-header          Original behaviour: body is pushed down by a fixed
                           offset (7rem / 6rem / 5rem) and the header floats
                           over plain page background.
   .ss-has-header-overlay  For the new layouts: the first section inside <main>
                           runs up behind the transparent header (so its
                           background has no seam) and gets a spacer equal to
                           the header's height. The first section must be a
                           normal block element (not grid/flex). */
:root {
 --ss-hdr-h: 65px; /* rendered header height; updated per breakpoint below */
}
.ss-has-header {
	padding-top: 7rem;
}
.ss-has-header-overlay main > :first-child::before {
	content: "";
	display: block;
	height: var(--ss-hdr-h);
}
/* Set by header.js while the sidebar is open */
.ss-hdr-lock {
	overflow: hidden;
	padding-right: var(--ss-hdr-scrollbar, 0px);
}
/* FIX 4: the fixed header spans the full viewport, so when the page scrollbar
   disappears it gets wider and the centred container jumps sideways. Give it
   the same right padding the body receives so the content stays put. */
.ss-hdr-lock .ss-hdr {
	padding-right: var(--ss-hdr-scrollbar, 0px);
}

/* 11. Responsive ============================================================= */
/* Desktop container widths (same steps as before) */
@media (min-width: 576px) {
.ss-hdr__container {
	max-width: 540px;
}
}
@media (min-width: 768px) {
.ss-hdr__container {
	max-width: 720px;
}
}
@media (min-width: 992px) {
.ss-hdr__container {
	max-width: 960px;
}
}
@media (min-width: 1200px) {
.ss-hdr__container {
	max-width: 1140px;
}
}
@media (min-width: 1400px) {
.ss-hdr__container {
	max-width: 1320px;
}
}

/* Mobile header (hamburger + sidebar) */
@media (max-width: 991px) {
:root {
 --ss-hdr-h: 78px;
}
.ss-has-header {
	padding-top: 6rem;
}
.ss-hdr {
 --ss-hdr-gutter: 2rem; /* FIX 1 (replaces the old 2rem padding override) */
	padding-top: 1rem;
	padding-bottom: 0.25rem;
}
/* FIX 3: fluid container on the mobile header, so 576-991px isn't capped at 540/720px */
.ss-hdr .ss-hdr__container {
	max-width: none;
}
.ss-hdr .ss-hdr--desktop {
	display: none;
}
.ss-hdr .ss-hdr--mobile {
	display: block;
}
.ss-hdr .ss-hdr__bar {
	float: left;
	width: 90%;
}
.ss-hdr .ss-hdr__logo {
	margin-right: 0;
	margin-bottom: 0.5rem;
}
.ss-hdr .ss-sidebar__logo {
	margin-right: 0;
	margin-bottom: 1rem;
}
.ss-hdr .ss-hdr__brand {
	width: 220px;
}
.ss-hdr .ss-hdr__cta a {
	top: 10px;
	right: -15px;
	font-size: 16px;
}
}
@media (max-width: 767px) {
.ss-hdr .ss-hdr__cta a {
	right: 0;
}
}
@media (max-width: 600px) {
.ss-hdr .ss-sidebar__profile-pic {
	width: 12%;
}
.ss-hdr .ss-sidebar__profile-info {
	width: 78%;
}
}
@media (max-width: 575px) {
.ss-hdr .ss-hdr-btn {
	letter-spacing: 0;
}
}
@media (max-width: 480px) {
:root {
 --ss-hdr-h: 69px;
}
.ss-hdr .ss-hdr__bar {
	width: 85%;
}
.ss-hdr .ss-hdr__brand {
	width: 180px;
}
.ss-hdr .ss-hdr__cta a {
	right: -15px;
	font-size: 15px;
}
.ss-hdr .ss-hdr__burger {
	font-size: 1.8rem;
}
.ss-hdr .ss-sidebar {
	width: 350px;
}
.ss-hdr .ss-sidebar__profile-pic {
	width: 10%;
}
.ss-hdr .ss-sidebar__profile-info {
	width: 80%;
}
}
@media (max-width: 420px) {
:root {
 --ss-hdr-h: 62px;
}
.ss-hdr .ss-hdr__brand {
	width: 150px;
}
.ss-hdr .ss-hdr__cta a {
	right: -10px;
}
}
@media (max-width: 400px) {
.ss-hdr .ss-hdr__cta a {
	top: 5px;
	right: -8px;
	font-size: 14px;
}
.ss-hdr .ss-hdr__burger {
	font-size: 1.5rem;
}
}
@media (max-width: 360px) {
:root {
 --ss-hdr-h: 58px;
}
.ss-has-header {
	padding-top: 5rem;
}
.ss-hdr .ss-hdr__brand {
	width: 130px;
}
.ss-hdr .ss-hdr__cta a {
	right: -6px;
	font-size: 13px;
}
.ss-hdr .ss-sidebar {
	width: 280px;
}
.ss-hdr .ss-sidebar__profile-pic {
	width: 13%;
}
.ss-hdr .ss-sidebar__profile-info {
	width: 77%;
}
}
@media (max-width: 320px) {
:root {
 --ss-hdr-h: 88px;
}
.ss-hdr .ss-hdr__bar {
	width: 80%;
}
.ss-hdr .ss-hdr__brand {
	width: 180px;
}
.ss-hdr .ss-hdr__burger {
	font-size: 1.7rem;
}
}