/* ================================================================================================= */ /* Starts the NediQR public header stylesheet section. */
/* NEDIQ R PUBLIC HEADER STYLES */ /* Names this file as the dedicated public header styling file. */
/* ================================================================================================= */ /* Ends the header stylesheet section heading. */

.nq-public-header { /* Starts public header wrapper styling. */
position: sticky; /* Keeps the header visible at the top while the page scrolls. */
top: 0; /* Pins the sticky header to the top edge of the viewport. */
z-index: 1000; /* Keeps the header above normal public page content. */
background: rgba(32, 39, 90, 0.98); /* Applies the deep navy header background. */
backdrop-filter: blur(14px); /* Adds a soft glass blur effect behind the header. */
border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* Adds a subtle bottom divider line. */
} /* Ends public header wrapper styling. */

.nq-public-header .nq-container { /* Starts public header container alignment styling. */
width: calc(100% - (var(--nq-page-edge) * 2)); /* Aligns header content with the approved page edge spacing. */
max-width: none; /* Allows the header to use the full available screen width. */
} /* Ends public header container alignment styling. */

.nq-header-inner { /* Starts header inner layout styling. */
min-height: var(--nq-header-height); /* Applies the shared public header height token. */
display: grid; /* Creates a three-part header layout. */
grid-template-columns: 1fr auto 1fr; /* Places logo left, navigation center, and actions right. */
align-items: center; /* Vertically centers all header items. */
gap: 28px; /* Adds spacing between logo, navigation, and actions. */
} /* Ends header inner layout styling. */

.nq-brand { /* Starts header brand link styling. */
display: inline-flex; /* Places brand content in a clean row. */
align-items: center; /* Vertically centers the logo inside the brand link. */
justify-self: start; /* Keeps the brand aligned to the left side. */
gap: 10px; /* Adds spacing if brand text or mark is used with logo. */
color: var(--nq-white); /* Uses white brand text when text exists. */
font-weight: 900; /* Makes brand text strong if used. */
letter-spacing: -0.02em; /* Tightens brand text slightly if used. */
} /* Ends header brand link styling. */

.nq-brand-logo { /* Starts header logo image styling. */
display: block; /* Removes inline image baseline spacing. */
width: auto; /* Preserves the original logo aspect ratio. */
height: 44px; /* Keeps the header logo strong and readable. */
max-width: 190px; /* Prevents the logo from becoming too wide. */
object-fit: contain; /* Keeps the logo clean without cropping or stretching. */
} /* Ends header logo image styling. */

.nq-public-nav { /* Starts desktop public navigation styling. */
display: flex; /* Places navigation links in a horizontal row. */
align-items: center; /* Vertically centers navigation links. */
justify-self: center; /* Keeps the navigation centered in the header. */
gap: 32px; /* Adds premium spacing between navigation links. */
} /* Ends desktop public navigation styling. */

.nq-nav-link { /* Starts public navigation link styling. */
position: relative; /* Allows the animated underline to sit inside the link. */
display: inline-flex; /* Makes each navigation link easy to align and hover. */
align-items: center; /* Vertically centers navigation text. */
justify-content: center; /* Horizontally centers navigation text. */
min-height: 40px; /* Gives each navigation item a comfortable clickable height. */
padding: 10px 12px; /* Adds spacing for hover and active pill effects. */
border-radius: 999px; /* Creates rounded pill styling for hover and active states. */
color: rgba(255, 255, 255, 0.9); /* Uses readable soft white navigation text. */
font-family: var(--nq-font-public); /* Uses the shared public font stack. */
font-size: 18px; /* Keeps navigation text visible and premium. */
font-weight: 800; /* Keeps navigation text strong. */
letter-spacing: 0.002em; /* Adds subtle polish to navigation text. */
line-height: 1; /* Keeps navigation text vertically clean. */
transition: color 0.2s ease, transform 0.2s ease, background 0.2s ease; /* Adds smooth hover animation. */
} /* Ends public navigation link styling. */

.nq-nav-link::after { /* Starts navigation underline styling. */
content: ""; /* Creates the underline element. */
position: absolute; /* Positions underline inside each navigation link. */
left: 12px; /* Aligns underline with the link padding. */
right: 12px; /* Aligns underline with the link padding. */
bottom: 6px; /* Places underline near the bottom of the pill. */
height: 2px; /* Sets underline thickness. */
border-radius: 999px; /* Rounds underline edges. */
background: var(--nq-alert); /* Uses approved alert red for hover underline. */
transform: scaleX(0); /* Hides underline by default. */
transform-origin: center; /* Animates underline from the center. */
transition: transform 0.22s ease, background 0.22s ease; /* Adds smooth underline animation. */
} /* Ends navigation underline styling. */

.nq-nav-link:hover { /* Starts navigation hover styling. */
color: var(--nq-alert); /* Changes hovered navigation text to red. */
background: rgba(220, 20, 60, 0.1); /* Adds a soft red hover pill behind the link. */
transform: translateY(-1px); /* Adds a small lift on hover. */
} /* Ends navigation hover styling. */

.nq-nav-link:hover::after { /* Starts navigation hover underline styling. */
transform: scaleX(1); /* Shows the underline on hover. */
} /* Ends navigation hover underline styling. */

.nq-nav-link-active { /* Starts active navigation link styling. */
color: var(--nq-gold-hover); /* Uses yellow-gold for the active menu item. */
background: rgba(247, 173, 53, 0.15); /* Adds a soft yellow active pill background. */
} /* Ends active navigation link styling. */

.nq-nav-link-active::after { /* Starts active navigation underline styling. */
background: var(--nq-gold-hover); /* Uses yellow-gold underline for the active menu item. */
transform: scaleX(1); /* Keeps active underline visible. */
} /* Ends active navigation underline styling. */

.nq-nav-link-active:hover { /* Starts active navigation hover override styling. */
color: var(--nq-gold-hover); /* Keeps active menu item yellow on hover. */
background: rgba(247, 173, 53, 0.18); /* Keeps active hover background yellow instead of red. */
} /* Ends active navigation hover override styling. */

.nq-nav-link-active:hover::after { /* Starts active navigation hover underline override styling. */
background: var(--nq-gold-hover); /* Keeps active underline yellow on hover. */
} /* Ends active navigation hover underline override styling. */

.nq-header-actions { /* Starts header action button group styling. */
display: flex; /* Places Login and Sign Up buttons in a row. */
align-items: center; /* Vertically centers header action buttons. */
justify-self: end; /* Keeps action buttons aligned to the right side. */
gap: 12px; /* Adds space between Login and Sign Up buttons. */
} /* Ends header action button group styling. */

.nq-mobile-menu-button { /* Starts mobile menu button styling. */
display: none; /* Hides the mobile menu button on desktop. */
background: transparent; /* Removes default button background. */
border: 1px solid rgba(255, 255, 255, 0.24); /* Adds a soft white border. */
border-radius: 12px; /* Rounds the mobile menu button. */
padding: 9px; /* Adds comfortable tap area. */
cursor: pointer; /* Shows pointer cursor for the button. */
} /* Ends mobile menu button styling. */

.nq-mobile-menu-line { /* Starts mobile menu icon line styling. */
display: block; /* Makes each hamburger line visible. */
width: 22px; /* Sets the menu line width. */
height: 2px; /* Sets the menu line height. */
margin: 4px 0; /* Adds spacing between hamburger lines. */
border-radius: 999px; /* Rounds the line edges. */
background: var(--nq-white); /* Uses white lines on the navy header. */
} /* Ends mobile menu icon line styling. */

@media (max-width: 1200px) { /* Starts medium desktop header responsive rules. */
.nq-public-nav { /* Starts medium desktop navigation spacing styling. */
gap: 22px; /* Reduces navigation spacing on medium screens. */
} /* Ends medium desktop navigation spacing styling. */

.nq-nav-link { /* Starts medium desktop navigation link styling. */
font-size: 16px; /* Reduces navigation font size slightly on medium screens. */
padding: 9px 10px; /* Reduces navigation padding slightly on medium screens. */
} /* Ends medium desktop navigation link styling. */
} /* Ends medium desktop header responsive rules. */

@media (max-width: 820px) { /* Starts tablet and mobile header responsive rules. */
.nq-public-header .nq-container { /* Starts mobile header container styling. */
width: calc(100% - (var(--nq-page-edge) * 2)); /* Keeps header content away from mobile screen edges. */
} /* Ends mobile header container styling. */

.nq-header-inner { /* Starts mobile header inner layout styling. */
display: flex; /* Switches header from grid to flexible mobile layout. */
justify-content: space-between; /* Spreads logo, actions, and menu cleanly. */
gap: 12px; /* Reduces header spacing on smaller screens. */
} /* Ends mobile header inner layout styling. */

.nq-brand { /* Starts mobile brand styling. */
min-width: 0; /* Allows the logo area to shrink safely on mobile. */
} /* Ends mobile brand styling. */

.nq-brand-logo { /* Starts mobile header logo styling. */
height: 38px; /* Keeps the logo readable without crowding mobile actions. */
max-width: 160px; /* Prevents the logo from pushing buttons outside the screen. */
} /* Ends mobile header logo styling. */

.nq-header-actions { /* Starts mobile header actions styling. */
order: 2; /* Places action buttons before the mobile menu icon. */
margin-left: auto; /* Pushes action buttons toward the right side. */
gap: 8px; /* Reduces spacing between header buttons on mobile. */
} /* Ends mobile header actions styling. */

.nq-header-actions .nq-btn { /* Starts mobile header button styling. */
padding: 10px 12px; /* Reduces button padding on mobile. */
font-size: 13px; /* Reduces button text size on mobile. */
min-height: 40px; /* Keeps mobile header buttons tap friendly. */
} /* Ends mobile header button styling. */

.nq-mobile-menu-button { /* Starts visible mobile menu button styling. */
display: inline-flex; /* Shows the mobile menu button. */
flex-direction: column; /* Stacks the hamburger lines vertically. */
order: 3; /* Places the mobile menu button after action buttons. */
} /* Ends visible mobile menu button styling. */

.nq-public-nav { /* Starts mobile navigation panel styling. */
position: absolute; /* Positions the mobile menu panel below the header. */
left: 16px; /* Adds left spacing for the mobile menu panel. */
right: 16px; /* Adds right spacing for the mobile menu panel. */
top: 72px; /* Places the mobile menu panel below the header. */
display: none; /* Hides the mobile navigation panel by default. */
flex-direction: column; /* Stacks navigation links vertically. */
align-items: stretch; /* Makes mobile navigation links full width. */
gap: 6px; /* Adds space between mobile navigation links. */
padding: 14px; /* Adds inner spacing inside the mobile navigation panel. */
background: var(--nq-primary); /* Uses navy background for the mobile menu panel. */
border: 1px solid rgba(255, 255, 255, 0.12); /* Adds a soft border around the mobile menu panel. */
border-radius: var(--nq-radius-md); /* Rounds the mobile menu panel corners. */
box-shadow: var(--nq-shadow-card); /* Adds floating shadow to the mobile menu panel. */
} /* Ends mobile navigation panel styling. */

.nq-public-nav.nq-public-nav-open { /* Starts open mobile navigation panel styling. */
display: flex; /* Shows the mobile navigation panel when opened. */
} /* Ends open mobile navigation panel styling. */

.nq-nav-link { /* Starts mobile navigation link styling. */
justify-content: flex-start; /* Aligns mobile navigation labels to the left. */
padding: 12px 14px; /* Adds comfortable mobile tap spacing. */
border-radius: 12px; /* Rounds mobile navigation link hover area. */
font-size: 16px; /* Keeps mobile menu text readable. */
} /* Ends mobile navigation link styling. */

.nq-nav-link::after { /* Starts mobile navigation underline adjustment. */
left: 14px; /* Aligns underline with mobile link padding. */
right: auto; /* Prevents underline from stretching across full row. */
width: 34px; /* Keeps mobile underline compact. */
bottom: 6px; /* Places mobile underline under the label. */
} /* Ends mobile navigation underline adjustment. */
} /* Ends tablet and mobile header responsive rules. */

@media (max-width: 640px) { /* Starts small mobile header responsive rules. */
.nq-header-actions .nq-btn-ghost { /* Starts small mobile Login button styling. */
display: none; /* Hides Login button on very small screens to prevent header crowding. */
} /* Ends small mobile Login button styling. */

.nq-brand-logo { /* Starts small mobile logo styling. */
height: 34px; /* Keeps the logo compact on very small screens. */
max-width: 145px; /* Prevents the logo from causing horizontal overflow. */
} /* Ends small mobile logo styling. */

.nq-mobile-menu-button { /* Starts small mobile menu button styling. */
padding: 8px; /* Slightly reduces mobile menu button padding. */
} /* Ends small mobile menu button styling. */
} /* Ends small mobile header responsive rules. */