/* ================================================================================================= */ /* Starts NediQR public footer stylesheet. */
/* NEDIQR PUBLIC FOOTER CSS */ /* Keeps footer styling separate from public.css. */
/* ================================================================================================= */ /* Ends stylesheet heading. */

.nq-public-footer { /* Starts the public footer wrapper styling. */
background: #11183d; /* Applies the deep navy footer background. */
color: rgba(255, 255, 255, 0.84); /* Applies readable soft white footer text. */
padding-top: 58px; /* Adds premium top spacing to the footer. */
} /* Ends the public footer wrapper styling. */

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

.nq-footer-grid { /* Starts footer grid styling. */
display: grid; /* Creates the footer column layout. */
grid-template-columns: 1.45fr 0.9fr 1fr 1.55fr; /* Gives the contact column more room. */
gap: 42px; /* Adds spacing between footer columns. */
align-items: start; /* Aligns all footer columns from the top. */
} /* Ends footer grid styling. */

.nq-footer-column { /* Starts common footer column styling. */
display: flex; /* Enables vertical footer column layout. */
flex-direction: column; /* Forces footer items one below the other. */
align-items: flex-start; /* Aligns footer links and text to the left. */
gap: 10px; /* Adds vertical spacing between footer items. */
min-width: 0; /* Prevents long text from breaking the grid. */
} /* Ends common footer column styling. */

.nq-footer-company { /* Starts footer company column styling. */
gap: 14px; /* Gives the logo and description comfortable spacing. */
} /* Ends footer company column styling. */

.nq-footer-brand { /* Starts footer brand link styling. */
display: inline-flex; /* Keeps the logo clean inside the link. */
align-items: center; /* Vertically centers the logo inside the brand link. */
width: fit-content; /* Keeps the brand link only as wide as the logo. */
margin-bottom: 6px; /* Adds a small gap below the logo. */
} /* Ends footer brand link styling. */

.nq-footer-brand-logo { /* Starts footer logo image styling. */
display: block; /* Removes inline image baseline spacing. */
width: auto; /* Preserves the logo aspect ratio. */
height: 56px; /* Keeps the footer logo stronger than the header logo. */
max-width: 250px; /* Prevents the footer logo from becoming too wide. */
object-fit: contain; /* Keeps the logo clean without stretching. */
} /* Ends footer logo image styling. */

.nq-footer-column p { /* Starts footer paragraph styling. */
margin: 0; /* Removes default paragraph margin. */
max-width: 380px; /* Controls paragraph width for readability. */
color: rgba(255, 255, 255, 0.82); /* Applies soft white paragraph color. */
font-size: 15px; /* Keeps footer paragraph readable. */
line-height: 1.65; /* Improves footer paragraph readability. */
} /* Ends footer paragraph styling. */

.nq-footer-title { /* Starts footer heading styling. */
margin: 0 0 8px; /* Adds space below each footer heading. */
color: var(--nq-white); /* Uses white footer heading text. */
font-size: 22px; /* Makes footer headings visible and premium. */
font-weight: 900; /* Makes footer headings bold. */
line-height: 1.2; /* Keeps footer headings compact. */
} /* Ends footer heading styling. */

.nq-footer-link-list { /* Starts footer link list wrapper styling. */
display: flex; /* Enables proper vertical link stacking. */
flex-direction: column; /* Places Product and Legal links one below the other. */
align-items: flex-start; /* Keeps footer links left aligned. */
gap: 9px; /* Adds clean spacing between footer links. */
} /* Ends footer link list wrapper styling. */

.nq-footer-link-list a { /* Starts footer link styling inside the new wrapper. */
display: inline-flex; /* Makes every footer link its own row. */
width: fit-content; /* Keeps each link only as wide as its text. */
color: rgba(255, 255, 255, 0.82); /* Uses readable soft white links. */
font-size: 15px; /* Keeps footer links readable. */
font-weight: 700; /* Gives footer links clean weight. */
line-height: 1.45; /* Improves link readability. */
text-decoration: underline; /* Keeps underline behavior available. */
text-decoration-color: transparent; /* Hides underline until hover. */
text-underline-offset: 5px; /* Gives underline premium spacing. */
transition: color 0.2s ease, text-decoration-color 0.2s ease, transform 0.2s ease; /* Adds smooth hover motion. */
} /* Ends footer link styling inside the new wrapper. */

.nq-footer-link-list a:hover { /* Starts footer link hover styling. */
color: var(--nq-alert); /* Changes footer link text to red on hover. */
text-decoration-color: var(--nq-alert); /* Shows red underline on hover. */
transform: translateX(3px); /* Adds subtle right movement on hover. */
} /* Ends footer link hover styling. */

.nq-footer-link-list a:focus-visible { /* Starts keyboard focus styling for footer links. */
outline: 2px solid var(--nq-gold); /* Adds accessible gold focus outline. */
outline-offset: 4px; /* Keeps focus outline away from text. */
border-radius: 4px; /* Softens the focus outline shape. */
} /* Ends keyboard focus styling for footer links. */

.nq-footer-grid > .nq-footer-links-column:nth-child(2) .nq-footer-link-list a:nth-child(1) { /* Starts Product Home visual order styling. */
order: 1; /* Keeps Home first. */
} /* Ends Product Home visual order styling. */

.nq-footer-grid > .nq-footer-links-column:nth-child(2) .nq-footer-link-list a:nth-child(2) { /* Starts Product Features visual order styling. */
order: 2; /* Keeps Features second. */
} /* Ends Product Features visual order styling. */

.nq-footer-grid > .nq-footer-links-column:nth-child(2) .nq-footer-link-list a:nth-child(3) { /* Starts Product Pricing visual order styling. */
order: 3; /* Keeps Pricing third. */
} /* Ends Product Pricing visual order styling. */

.nq-footer-grid > .nq-footer-links-column:nth-child(2) .nq-footer-link-list a:nth-child(4) { /* Starts Product Contact visual order correction. */
order: 5; /* Moves Contact visually after Blog. */
} /* Ends Product Contact visual order correction. */

.nq-footer-grid > .nq-footer-links-column:nth-child(2) .nq-footer-link-list a:nth-child(5) { /* Starts Product Blog visual order correction. */
order: 4; /* Moves Blog visually before Contact. */
} /* Ends Product Blog visual order correction. */

.nq-footer-contact-list { /* Starts footer contact list styling. */
display: grid; /* Stacks contact cards vertically. */
gap: 10px; /* Adds space between contact cards. */
width: 100%; /* Lets contact cards fill the contact column. */
max-width: 430px; /* Controls contact card width. */
} /* Ends footer contact list styling. */

.nq-footer-contact-line { /* Starts footer contact row styling. */
display: grid; /* Creates label and email layout. */
grid-template-columns: 76px minmax(0, 1fr); /* Keeps labels aligned and emails flexible. */
align-items: center; /* Vertically aligns contact row content. */
gap: 12px; /* Adds gap between label and email. */
margin: 0; /* Removes default paragraph margin. */
padding: 11px 13px; /* Adds comfortable contact card spacing. */
border: 1px solid rgba(255, 255, 255, 0.09); /* Adds soft contact card border. */
border-radius: 14px; /* Rounds contact card corners. */
background: rgba(255, 255, 255, 0.04); /* Adds subtle contact card background. */
transition: border-color 0.2s ease, background 0.2s ease; /* Adds smooth contact hover transition. */
} /* Ends footer contact row styling. */

.nq-footer-contact-line:hover { /* Starts footer contact row hover styling. */
border-color: rgba(220, 20, 60, 0.28); /* Adds red border hint on hover. */
background: rgba(220, 20, 60, 0.055); /* Adds soft red hover background. */
} /* Ends footer contact row hover styling. */

.nq-footer-contact-line strong { /* Starts footer contact label styling. */
color: var(--nq-gold); /* Uses gold for contact labels. */
font-size: 14px; /* Keeps contact labels readable. */
font-weight: 900; /* Makes contact labels bold. */
line-height: 1.35; /* Keeps label line height clean. */
} /* Ends footer contact label styling. */

.nq-footer-contact-line a { /* Starts footer contact email styling. */
color: rgba(255, 255, 255, 0.92); /* Makes contact email text readable. */
font-size: 14px; /* Keeps long emails controlled. */
font-weight: 800; /* Gives contact emails stronger weight. */
line-height: 1.35; /* Keeps email line height clean. */
word-break: break-word; /* Prevents long email addresses from overflowing. */
text-decoration: underline; /* Keeps underline behavior available. */
text-decoration-color: transparent; /* Hides underline until hover. */
text-underline-offset: 4px; /* Adds premium underline spacing. */
transition: color 0.2s ease, text-decoration-color 0.2s ease; /* Adds smooth hover transition. */
} /* Ends footer contact email styling. */

.nq-footer-contact-line a:hover { /* Starts footer contact email hover styling. */
color: var(--nq-alert); /* Turns contact email red on hover. */
text-decoration-color: var(--nq-alert); /* Shows red underline on hover. */
} /* Ends footer contact email hover styling. */

.nq-footer-bottom { /* Starts footer bottom strip styling. */
margin-top: 48px; /* Adds space above the copyright strip. */
border-top: 1px solid rgba(255, 255, 255, 0.12); /* Adds the separator line above copyright. */
padding: 18px 0; /* Adds copyright strip spacing. */
} /* Ends footer bottom strip styling. */

.nq-footer-bottom-inner { /* Starts footer bottom inner layout styling. */
display: flex; /* Enables copyright centering. */
align-items: center; /* Vertically centers copyright text. */
justify-content: center; /* Horizontally centers copyright text. */
width: 100%; /* Uses full available width. */
text-align: center; /* Keeps copyright centered when wrapping. */
} /* Ends footer bottom inner layout styling. */

.nq-footer-copyright { /* Starts copyright text styling. */
margin: 0; /* Removes default paragraph margin. */
width: 100%; /* Allows full-width centering. */
color: rgba(255, 255, 255, 0.82); /* Uses soft white copyright text. */
font-size: 14px; /* Keeps copyright readable. */
font-weight: 500; /* Keeps copyright calm and clean. */
text-align: center; /* Centers copyright text. */
} /* Ends copyright text styling. */

@media (max-width: 1024px) { /* Starts tablet footer responsive styling. */
.nq-footer-grid { /* Starts tablet footer grid styling. */
grid-template-columns: repeat(2, minmax(0, 1fr)); /* Shows two footer columns on tablet. */
gap: 34px; /* Reduces footer column gap on tablet. */
} /* Ends tablet footer grid styling. */
} /* Ends tablet footer responsive styling. */

@media (max-width: 640px) { /* Starts mobile footer responsive styling. */
.nq-public-footer { /* Starts mobile footer wrapper styling. */
padding-top: 46px; /* Reduces top footer spacing on mobile. */
} /* Ends mobile footer wrapper styling. */

.nq-public-footer .nq-container { /* Starts mobile footer container styling. */
width: calc(100% - (var(--nq-page-edge) * 2)); /* Keeps footer away from mobile edges. */
} /* Ends mobile footer container styling. */

.nq-footer-grid { /* Starts mobile footer grid styling. */
grid-template-columns: 1fr; /* Stacks all footer columns on mobile. */
gap: 32px; /* Adds spacing between stacked footer columns. */
} /* Ends mobile footer grid styling. */

.nq-footer-brand-logo { /* Starts mobile footer logo styling. */
height: 50px; /* Keeps footer logo strong but compact on mobile. */
max-width: 220px; /* Prevents logo overflow on mobile. */
} /* Ends mobile footer logo styling. */

.nq-footer-title { /* Starts mobile footer title styling. */
font-size: 20px; /* Keeps footer headings readable on mobile. */
} /* Ends mobile footer title styling. */

.nq-footer-contact-line { /* Starts mobile contact row styling. */
grid-template-columns: 1fr; /* Stacks contact label and email on mobile. */
gap: 4px; /* Reduces gap between label and email. */
padding: 11px 12px; /* Keeps contact cards touch-friendly. */
} /* Ends mobile contact row styling. */

.nq-footer-bottom { /* Starts mobile footer bottom styling. */
margin-top: 36px; /* Reduces space above copyright on mobile. */
} /* Ends mobile footer bottom styling. */
} /* Ends mobile footer responsive styling. */