/* =============================================================================
   style.css – FRAMEWORK STYLESHEET

   ┌─ Framework file ───────────────────────────────────────────────────────────┐
   │ Do not edit when forking. All project-specific values (colours, fonts …)   │
   │ live in theme.css, which must be loaded before this file.                  │
   └────────────────────────────────────────────────────────────────────────────┘

   Structure: reset → layout utilities → components → responsive → print
   ============================================================================= */

/* ─── Reset ──────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing:  border-box;
    margin:      0;
    padding:     0;
}

html {
    font-size:       16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size:   1rem;
    line-height: 1.65;
    color:       var(--color-dark);
    background:  var(--color-bg);
}

img,
svg {
    display:   block;
    max-width: 100%;
    height:    auto;
}

ul { list-style: none; }
address { font-style: normal; }

a {
    color:           var(--color-primary);
    text-decoration: none;
    transition:      color var(--ease);
}

a:hover {
    color:           var(--color-primary-dark);
    text-decoration: underline;
}

/* Visible focus ring for keyboard users – dark colour for 3:1+ contrast on any background */
:focus-visible {
    outline:        3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius:  var(--radius-sm);
}

/* ─── Skip link ──────────────────────────────────────────────────────────────── */
.skip-link {
    position:      absolute;
    top:           -100%;
    left:          var(--space-4);
    background:    var(--color-primary-light);
    color:         var(--color-white);
    padding:       var(--space-2) var(--space-4);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight:   var(--weight-semibold);
    z-index:       999;
}

.skip-link:focus { top: 0; }

/* ─── Layout utilities ───────────────────────────────────────────────────────── */
.container {
    max-width:      1140px;
    margin-inline:  auto;
    padding-inline: var(--space-6);
}

.section { padding-block: var(--space-20); }

.section__title {
    font-family:   var(--font-display);
    font-size:     clamp(1.6rem, 3vw, 1.875rem);
    font-weight:   var(--weight-bold);
    color:         var(--color-dark);
    margin-bottom: var(--space-4);
    line-height:   1.2;
}

.section__lead {
    font-size:     1.125rem;
    color:         var(--color-mid);
    max-width:     680px;
    margin-bottom: var(--space-12);
}

.u-mt { margin-top: var(--space-8); }

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         0.75rem 1.75rem;
    border-radius:   var(--radius-md);
    font-family:     var(--font-body);
    font-size:       1rem;
    font-weight:     var(--weight-semibold);
    border:          2px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    transition:      background var(--ease),
                     color var(--ease),
                     border-color var(--ease),
                     transform 0.1s;
}

.btn:hover  { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: none; }

.btn--primary {
    background:   var(--color-primary-light);
    color:        var(--color-white);
    border-color: var(--color-primary-light);
}
.btn--primary:hover {
    background:   var(--color-primary-light-dark);
    border-color: var(--color-primary-light-dark);
    color:        var(--color-white);
}

.btn--outline {
    background:   transparent;
    color:        var(--color-primary-light);
    border-color: var(--color-primary-light);
}
.btn--outline:hover {
    background: var(--color-primary-light);
    color:      var(--color-white);
}

.btn--white {
    background:   var(--color-white);
    color:        var(--color-primary-light);
    border-color: var(--color-white);
}
.btn--white:hover { background: var(--color-white-hover); }

.btn--outline-white {
    background:   transparent;
    color:        var(--color-white);
    border-color: var(--color-white);
}
.btn--outline-white:hover {
    background: var(--color-white);
    color:      var(--color-primary-light);
}

.btn--full {
    width:           100%;
    justify-content: center;
}

/* ─── Navigation ─────────────────────────────────────────────────────────────── */
.site-header {
    position:      sticky;
    top:           0;
    z-index:       100;
    background:    var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow:    var(--shadow-sm);
}

.nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          68px;
    position:        relative; /* needed for absolute menu on mobile */
}

.nav__logo {
    display:         flex;
    align-items:     center;
    gap:             var(--space-2);
    font-family:     var(--font-display);
    font-size:       1.2rem;
    font-weight:     var(--weight-bold);
    color:           var(--color-dark);
    text-decoration: none;
}
.nav__logo:hover        { color: var(--color-primary); text-decoration: none; }
.nav__logo i            { font-size: 1.3rem; }

.nav__menu {
    display: flex;
    gap:     var(--space-1);
}

.nav__link {
    display:       block;
    padding:       var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight:   var(--weight-medium);
    color:         var(--color-mid);
    transition:    color var(--ease), background var(--ease);
}
.nav__link:hover      { color: var(--color-primary); background: var(--color-primary-tint); text-decoration: none; }
.nav__link--active    { color: var(--color-primary); font-weight: var(--weight-semibold); }

/* Hidden checkbox – holds open/closed state without JavaScript */
.nav__checkbox { display: none; }

/* Hamburger label – hidden on desktop */
.nav__toggle {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
    width:           36px;
    height:          36px;
    cursor:          pointer;
    padding:         4px;
    /* Reset label styles */
    border:          none;
    background:      none;
}

.nav__toggle span {
    display:       block;
    height:        2px;
    background:    var(--color-dark);
    border-radius: 2px;
    transition:    transform var(--ease), opacity var(--ease);
}

/* ─── Mobile navigation (CSS-only) ──────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Show hamburger label */
    .nav__toggle { display: flex; }

    /* Dropdown menu – hidden by default */
    .nav__menu {
        display:       none;
        position:      absolute;
        top:           68px;
        left:          0;
        right:         0;
        flex-direction: column;
        background:    var(--color-white);
        border-bottom: 1px solid var(--color-border);
        padding:       var(--space-4);
        box-shadow:    var(--shadow-md);
        z-index:       99;
    }

    /* Checked checkbox → show menu (siblings via ~ selector) */
    .nav__checkbox:checked ~ .nav__menu { display: flex; }

    /* Checked checkbox → animate hamburger to X */
    .nav__checkbox:checked ~ .nav__toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav__checkbox:checked ~ .nav__toggle span:nth-child(2) {
        opacity: 0;
    }
    .nav__checkbox:checked ~ .nav__toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* ─── Hero ───────────────────────────────────────────────────────────────────── */
.hero {
    position:    relative;
    overflow:    hidden;
    background:  linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-alt) 100%);
    color:       var(--color-white);
    padding-block: var(--space-20);
}

/* Subtle background pattern */
.hero::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='28' fill='none' stroke='%23ffffff08' stroke-width='1'/%3E%3C/svg%3E") repeat;
    pointer-events: none;
}

.hero__inner {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-12);
}

.hero__text   { max-width: 620px; }

.hero__eyebrow {
    display:        inline-block;
    font-size:      0.875rem;
    font-weight:    var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-primary-light-light);
    margin-bottom:  var(--space-4);
}

.hero__title {
    font-family:   var(--font-display);
    font-size:     clamp(2rem, 5vw, 3.5rem);
    font-weight:   var(--weight-bold);
    line-height:   1.1;
    margin-bottom: var(--space-6);
}

.hero__accent  { color: var(--color-primary-light-light); }

.hero__lead {
    font-size:     1.125rem;
    color:         rgba(255, 255, 255, 0.75);
    max-width:     520px;
    margin-bottom: var(--space-8);
}

.hero__actions {
    display:   flex;
    gap:       var(--space-4);
    flex-wrap: wrap;
}

.hero__badge {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           140px;
    height:          140px;
    flex-shrink:     0;
    border-radius:   50%;
    border:          3px solid var(--color-primary-light);
    background:      var(--color-primary-dark);;
    text-align:      center;
    font-size:       0.875rem;
    font-weight:     var(--weight-bold);
    color:           var(--color-white);
    gap:             var(--space-2);
}

.hero__badge-icon { font-size: 2.2rem; }

/* ─── Services grid ──────────────────────────────────────────────────────────── */
.services { background: var(--color-white); }

.services__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap:                   var(--space-6);
}

.service-card {
    padding:    var(--space-8);
    border:     1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    transition: box-shadow var(--ease), transform var(--ease);
}
.service-card:hover {
    box-shadow: var(--shadow-md);
    transform:  translateY(-3px);
}

.service-card__icon {
    font-size:     2rem;
    color:         var(--color-primary-light);
    margin-bottom: var(--space-4);
    display:       block;
    line-height:   1;
}

.service-card__title {
    font-family:   var(--font-display);
    font-size:     1.2rem;
    font-weight:   var(--weight-semibold);
    margin-bottom: var(--space-2);
}

/* ─── Why us ─────────────────────────────────────────────────────────────────── */
.why-us { background: var(--color-bg); }

.why-us__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:                   var(--space-6);
}

.why-card {
    display:       flex;
    flex-direction: column;
    gap:           var(--space-2);
    padding:       var(--space-8);
    background:    var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-sm);
}

.why-card__icon {
    font-size:   2rem;
    color:       var(--color-primary-light);
    display:     block;
    line-height: 1;
}

.why-card h3 {
    font-family: var(--font-display);
    font-size:   1.2rem;
    font-weight: var(--weight-semibold);
}

/* ─── CTA strip ──────────────────────────────────────────────────────────────── */
.cta-strip {
    background:    var(--color-primary-light);
    color:         var(--color-white);
    padding-block: var(--space-16);
}

.cta-strip__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-8);
    flex-wrap:       wrap;
}

.cta-strip__title {
    font-family:   var(--font-display);
    font-size:     clamp(1.5rem, 3vw, 1.875rem);
    font-weight:   var(--weight-bold);
    margin-bottom: var(--space-2);
}

.cta-strip__actions {
    display:   flex;
    gap:       var(--space-4);
    flex-wrap: wrap;
}

/* ─── Page hero (inner pages) ────────────────────────────────────────────────── */
.page-hero {
    background:    linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-alt) 100%);
    color:         var(--color-white);
    padding-block: var(--space-16) var(--space-12);
}

.page-hero--center { text-align: center; }

.page-hero__eyebrow {
    font-size:      0.875rem;
    font-weight:    var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-primary-light-light);
    margin-bottom:  var(--space-2);
}

.page-hero__title {
    font-family:  var(--font-display);
    font-size:    clamp(2rem, 4vw, 2.5rem);
    font-weight:  var(--weight-bold);
    line-height:  1.15;
}

.page-hero__lead {
    margin-top: var(--space-4);
    color:      rgba(255, 255, 255, 0.75);
}

/* ─── Opening hours table ────────────────────────────────────────────────────── */
.hours-table { border-collapse: collapse; }

.hours-table td {
    padding-block:  0.25rem;
    padding-right:  var(--space-6);
    vertical-align: top;
}

.hours-table td:last-child {
    font-weight: var(--weight-semibold);
    color:       var(--color-primary);        /* dark – contrast on light backgrounds */
    padding-right: 0;
}
/* In the dark footer the light orange has better visual contrast */
.site-footer .hours-table td:last-child { color: var(--color-primary-light); }

/* ─── About layout ───────────────────────────────────────────────────────────── */
.about-layout {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-16);
    align-items:           start;
}

.about-address {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
    margin-top:     var(--space-4);
}

/* ─── Map ────────────────────────────────────────────────────────────────────── */
.map-canvas {
    width:         100%;
    height:        400px;
    border-radius: var(--radius-lg);
    border:        0;
    display:       block;
}

/* ─── Pricing ────────────────────────────────────────────────────────────────── */
.pricing-group { margin-bottom: var(--space-12); }

.pricing-group__title {
    font-family:   var(--font-display);
    font-size:     1.35rem;
    font-weight:   var(--weight-semibold);
    margin-bottom: var(--space-4);
    line-height:   1.3;
}

.pricing-group__note {
    font-size:   1rem;
    font-weight: var(--weight-regular);
    color:       var(--color-muted);
}

.pricing-table {
    width:         100%;
    border-collapse: collapse;
    background:    var(--color-white);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    box-shadow:    var(--shadow-sm);
}

.pricing-table th,
.pricing-table td {
    padding:       var(--space-4) var(--space-6);
    text-align:    left;
    border-bottom: 1px solid var(--color-border);
}

.pricing-table th {
    background:     var(--color-dark);
    color:          var(--color-white);
    font-size:      0.8rem;
    font-weight:    var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pricing-table tbody tr:last-child td { border-bottom: none; }
.pricing-table tbody tr:hover         { background: var(--color-table-hover); }

.pricing-table__price {
    text-align:  right;
    font-weight: var(--weight-semibold);
    color:       var(--color-primary-light);
}

.pricing-note {
    margin-top: var(--space-8);
    font-size:  0.875rem;
    color:      var(--color-mid);
}

/* ─── Gallery ────────────────────────────────────────────────────────────────── */
.gallery-section { background: var(--color-white); }

.gallery-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:                   var(--space-4);
    list-style:            none;
    margin-top:            var(--space-8);
}

.gallery-item {
    border-radius: var(--radius-lg);
    overflow:      hidden;
    aspect-ratio:  4 / 3;
    background:    var(--color-border);
}

.gallery-item img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  transform 0.4s ease;
}

.gallery-item:hover img { transform: scale(1.04); }

/* ─── Contact layout ─────────────────────────────────────────────────────────── */
.contact-layout {
    display:               grid;
    grid-template-columns: 1fr 1.4fr;
    gap:                   var(--space-16);
    align-items:           start;
}

.contact-info__list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
    margin-top:     var(--space-6);
}

.contact-info__item {
    display:     flex;
    gap:         var(--space-4);
    align-items: flex-start;
}

.contact-info__icon {
    font-size:   1.25rem;
    color:       var(--color-primary-light);
    flex-shrink: 0;
    margin-top:  3px;
    width:       1.5rem;
    text-align:  center;
}

.contact-info__item strong {
    display:       block;
    font-weight:   var(--weight-semibold);
    margin-bottom: var(--space-1);
}

/* ─── Contact form ───────────────────────────────────────────────────────────── */
.contact-form-wrap { }

.contact-form {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
    margin-top:     var(--space-6);
}

.form-group {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.form-label {
    font-weight: var(--weight-semibold);
    font-size:   0.875rem;
}

.form-required { color: var(--color-primary); }

.form-input {
    width:       100%;
    padding:     0.75rem 1rem;
    border:      1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size:   1rem;
    background:  var(--color-white);
    color:       var(--color-dark);
    transition:  border-color var(--ease), box-shadow var(--ease);
}

.form-input:focus {
    outline:      none;
    border-color: var(--color-primary-light);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--color-primary-light) 25%, transparent);
}

.form-input--error { border-color: var(--color-error); }

.form-textarea {
    resize:     vertical;
    min-height: 130px;
}

.form-error {
    font-size:   0.875rem;
    font-weight: var(--weight-medium);
    color:       var(--color-error);
}

.alert {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    padding:       var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    font-weight:   var(--weight-medium);
    margin-bottom: var(--space-4);
}

.alert--success {
    background: var(--color-success-bg);
    border:     1px solid var(--color-success-border);
    color:      var(--color-success);
}

.alert--error {
    background: var(--color-error-bg);
    border:     1px solid var(--color-error-border);
    color:      var(--color-error);
}

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer {
    background:  var(--color-dark);
    color:       rgba(255, 255, 255, 0.7);
    padding-top: var(--space-16);
}

.footer__inner {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   var(--space-8);
    padding-bottom:        var(--space-12);
}

.footer__brand {
    font-family:   var(--font-display);
    font-size:     1.2rem;
    font-weight:   var(--weight-bold);
    color:         var(--color-white);
    margin-bottom: var(--space-2);
}

.footer__heading {
    font-family:    var(--font-display);
    font-size:      0.8rem;
    font-weight:    var(--weight-bold);
    color:          var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  var(--space-4);
}

.site-footer a        { color: rgba(255, 255, 255, 0.7); }
.site-footer a:hover  { color: var(--color-white); }

.site-footer .hours-table td { font-size: 0.9rem; }

.footer__social {
    display:    flex;
    gap:        var(--space-3);
    margin-top: var(--space-4);
    flex-wrap:  wrap;
}

.footer__social-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   50%;
    border:          1px solid rgba(255, 255, 255, 0.25);
    color:           rgba(255, 255, 255, 0.7);
    transition:      border-color var(--ease), color var(--ease), background var(--ease);
}
.footer__social-link:hover {
    border-color:    var(--color-primary-light);
    color:           var(--color-white);
    background:      var(--color-primary-light);
    text-decoration: none;
}

.footer__bottom {
    border-top:    1px solid rgba(255, 255, 255, 0.1);
    padding-block: var(--space-4);
    font-size:     0.875rem;
    color:         rgba(255, 255, 255, 0.4);
}

/* ─── Scroll-reveal (CSS only, progressive enhancement) ─────────────────────── */
@keyframes reveal-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
    .service-card,
    .why-card,
    .pricing-group {
        animation:          reveal-up 0.5s ease both;
        animation-timeline: view();
        animation-range:    entry 0% entry 30%;
    }
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .about-layout,
    .contact-layout     { grid-template-columns: 1fr; }
    .hero__badge        { display: none; }
    .cta-strip__inner   { flex-direction: column; text-align: center; }
    .cta-strip__actions { justify-content: center; }
}

@media (max-width: 768px) {
    .hero               { padding-block: var(--space-16); }
    .hero__text         { max-width: 100%; }
    .footer__inner      { grid-template-columns: 1fr 1fr; }
    .page-hero          { padding-block: var(--space-12) var(--space-8); }
}

@media (max-width: 640px) {
    .hero__actions      { flex-direction: column; }
    .hero__actions .btn { width: 100%; justify-content: center; }
    .section            { padding-block: var(--space-12); }
    .footer__inner      { grid-template-columns: 1fr; }
}

/* ─── Accessibility – reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration:  0.01ms !important;
        animation-delay:     0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ─── Print ──────────────────────────────────────────────────────────────────── */
@media print {
    .site-header,
    .site-footer,
    .btn,
    .cta-strip  { display: none !important; }
    body        { color: #000; font-size: 11pt; }
}