/* ============================================
Force FULL-WIDTH footer background in WordPress/Elementor
Keeps content constrained (1120px, expands to 1280px on large screens)
============================================ */
/* 1) Footer wrapper must span the viewport */
.tfs-footer,
.tfs-copyright {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* 2) Apply backgrounds */
.tfs-footer {
background: linear-gradient(135deg, #05060c 0%, #071a33 50%, #040414 100%);
color: #ffffff;
}
.tfs-copyright {
background: #03040a;
color: rgba(255, 255, 255, 0.85);
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
/* 3) Inner content stays constrained */
.tfs-footer__inner,
.tfs-copyright__inner {
max-width: 1120px;
margin: 0 auto;
padding-left: 1rem;
padding-right: 1rem;
}
/* Slightly wider on large screens (optional, keeps the layout from feeling cramped) */
@media (min-width: 1200px) {
.tfs-footer__inner,
.tfs-copyright__inner {
max-width: 1280px;
}
}
/* 4) Footer layout - MOBILE FIRST */
.tfs-footer__inner {
padding-top: 3rem;
padding-bottom: 3rem;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* 5) Logo */
.tfs-footer__logo img {
display: block;
max-width: 260px;
height: auto;
}
/* 6) Headings (h3) */
.tfs-footer h3.tfs-footer__title,
.tfs-footer h3.tfs-footer__subtitle {
color: #ffffff;
font-weight: 700;
font-size: 1.08rem;
line-height: 1.3;
letter-spacing: 0.25px;
}
.tfs-footer h3.tfs-footer__title {
margin: 0 0 0.75rem;
}
.tfs-footer h3.tfs-footer__subtitle {
margin: 1.25rem 0 0.75rem;
}
/* 7) Text */
.tfs-footer__tagline {
margin: 0.9rem 0 1rem;
color: rgba(255, 255, 255, 0.88);
line-height: 1.55;
max-width: 36ch;
}
/* 8) Lists */
.tfs-footer__list,
.tfs-footer__hours-list {
list-style: none;
margin: 0;
padding: 0;
}
.tfs-footer__list li {
margin: 0.45rem 0;
}
/* 9) OVERRIDE theme blue links inside footer */
.tfs-footer a,
.tfs-footer a:visited,
.tfs-footer a:active {
color: rgba(255, 255, 255, 0.92) !important;
text-decoration: none;
}
.tfs-footer a:hover,
.tfs-footer a:focus,
.tfs-footer a:focus-visible {
color: #ffffff !important;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255, 255, 255, 0.65);
}
/* 10) Social icons */
.tfs-footer__social {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1rem;
}
.tfs-social {
/* Was 40x40 — below the 44px WCAG 2.5.5 minimum touch target size */
width: 44px;
height: 44px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.tfs-social svg {
width: 20px;
height: 20px;
fill: #ffffff;
}
.tfs-social:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.22);
}
/* Was "outline: none" with no replacement — left keyboard users with no
   visible focus indicator at all (WCAG 2.4.7). Visible ring instead. */
.tfs-social:focus-visible {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.22);
outline: 3px solid #ffffff;
outline-offset: 2px;
}
/* 11) Business Hours - FIXED for better spacing */
.tfs-footer__hours {
margin-top: 1.25rem;
}
.tfs-footer__hours-list {
margin: 0.75rem 0 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.tfs-footer__hours-list li {
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.tfs-hours__day {
font-weight: 700;
white-space: nowrap;
min-width: 85px;
}
.tfs-hours__time {
color: rgba(255, 255, 255, 0.92);
white-space: nowrap;
}
.tfs-footer__note {
margin: 0.85rem 0 0;
color: rgba(255, 255, 255, 0.88);
font-style: italic;
}
/* 12) Copyright text */
.tfs-copyright__inner {
padding-top: 0.85rem;
padding-bottom: 0.85rem;
}
.tfs-copyright p {
margin: 0;
text-align: center;
}
/* ============================================
Responsive
============================================ */
/* Tablet: 2-column stacked */
@media (min-width: 561px) and (max-width: 1023px) {
.tfs-footer__inner {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
/* Mobile: stacked */
@media (max-width: 560px) {
.tfs-footer__hours-list li {
flex-direction: column;
gap: 0.15rem;
align-items: flex-start;
}
.tfs-footer h3.tfs-footer__title,
.tfs-footer h3.tfs-footer__subtitle {
font-size: 1.02rem;
}
}
/* ============================================
Desktop footer layout – 3 EQUAL COLUMNS
============================================ */
@media (min-width: 1024px) {
.tfs-footer__inner {
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
align-items: start;
}
/* Left column gets full space */
.tfs-footer__brand {
display: flex;
flex-direction: column;
}
.tfs-footer__logo {
margin-bottom: 1.25rem;
}
}