/* ============================================================
   CONCRETE CREATIONS CANADA — Main Stylesheet
   ============================================================
   TABLE OF CONTENTS:
   1.  Google Fonts Import
   2.  CSS Variables (colours, etc.)
   3.  Reset & Base Styles
   4.  Navigation
   5.  Page Layout Wrappers (header, section)
   6.  Typography (h1, h2, h3, p)
   7.  Flex Layout (hero/about section)
   8.  Buttons
   9.  Services Grid
   10. Gallery Grid (homepage preview)
   11. Contact Card (question rows)
   12. Gallery Page (featured image + thumbnails)
   13. FAQ Page
   14. Footer
   15. Responsive / Media Queries
   ============================================================ */


/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');


/* ============================================================
   2. CSS VARIABLES
   Centralised colour palette — change a value here and it
   updates everywhere the variable is used on the site.
   ============================================================ */

:root {
    --base-color:       #929496;  /* mid-grey, used for borders/muted elements */
    --text-color:       #1B1E29;  /* near-black for body text */
    --primary-color:    #535959;  /* dark grey-green for buttons, accents */
    --secondary-color:  #F5C827;  /* yellow accent */
    --color-1:          #E6E7EB;  /* light grey — header/card backgrounds */
    --color-2:          #F5FAFA;  /* near-white — nav background */
    --color-3:          #E1E7EB;  /* slightly blue-grey — section backgrounds */
    --shadow:           rgba(27, 30, 41, 0.1); /* subtle drop shadow */
}


/* ============================================================
   3. RESET & BASE STYLES
   Removes default browser margin/padding and sets box-sizing
   so padding is included in element width calculations.
   ============================================================ */

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

html {
    font-family: 'Noto Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-color);
}

body {
    /* Full-page background image, fixed so it doesn't scroll */
    background-image: url('/images/backgroundimage.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}


/* ============================================================
   4. NAVIGATION
   Sticky nav bar. On desktop, links sit in a row on the right.
   On mobile (below 640px), links are hidden and a hamburger
   button appears. Clicking it slides the menu open below the bar.
   ============================================================ */

nav {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    padding: 0.5em 1.5em;
    background-color: var(--color-2);
    border-bottom: 3px solid var(--secondary-color);
    box-shadow: 0 2px 12px var(--shadow);
    display: flex;
    align-items: center;
    flex-wrap: wrap;            /* allows the menu to drop below on mobile */
}

/* Logo + site name on the left */
#nav-title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-right: auto;         /* pushes links to the right on desktop */
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.2;
    text-decoration: none;
    color: var(--text-color);
}

#nav-logo {
    width: 52px;
    height: 52px;
    border-radius: 0.75em;
    object-fit: cover;
    border: 2px solid var(--secondary-color);
}

/* Desktop link list */
.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 1.5em;
}

.nav-links li {
    font-size: 1.1em;
}

nav a {
    text-decoration: none;
    color: var(--text-color);
}

nav a:hover {
    text-decoration: underline;
    background-color: #FFF600;
}

/* ── HAMBURGER BUTTON — hidden on desktop ──── */
.hamburger {
    display: none;              /* only shown on mobile via media query */
    flex-direction: column;
    justify-content: space-between;
    width: 2em;
    height: 1.5em;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    gap: 5px;
    margin-left: auto;          /* pushes button to the far right */
}

/* The three lines */
.hamburger span {
    display: block;
    height: 3px;
    background: var(--text-color);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.2s;
}

/* Animate into an X when open */
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* ============================================================
   5. PAGE LAYOUT WRAPPERS
   <header> and <section> are the main content blocks.
   They are centred, max-width capped, and given rounded
   corners + a subtle shadow to lift them off the background.
   ============================================================ */

header, section {
    margin: 1em auto;
    width: min(95em, 100%);
    background-color: var(--color-1);
    padding: min(2em, 15%);
    border-radius: 1em;
    box-shadow: 0 2px 16px var(--shadow);
}

/* Sections get slightly more top/bottom padding than header */
section {
    padding: 3em min(2em, 15%);
    background-color: var(--color-3);
}

/* Gallery preview section on homepage uses the lighter colour */
section#gallery {
    background-color: var(--color-1);
}

/* Gallery viewer section — reduced side padding so the arrows
   and image aren't clipped by the section edges on any screen size */
section.gallery-hero {
    padding-left: 1em;
    padding-right: 1em;
}


/* ============================================================
   6. TYPOGRAPHY
   Headings use Noto Sans bold. h1 uses Staatliches (display
   font). Sizes scale with viewport using clamp().
   ============================================================ */

h1, h2, h3 {
    font-family: 'Noto Sans', 'Segoe UI', sans-serif;
    font-weight: 700;
}

/* Big display heading — Staatliches for impact */
h1 {
    font-family: 'Staatliches', sans-serif;
    text-align: center;
    font-size: clamp(2.5rem, 5vw, 7rem);
    letter-spacing: 0.03em;
}

/* Decorative rule that follows an h1 */
h1 + hr {
    border: none;
    border-top: 3px solid var(--primary-color);
    width: 100%;
    margin: 0.5em auto 2em auto;
    border-radius: 2px;
}

/* Small label above the h1 — "Niagara Region — Est. 20+ Years" */
.hero-eyebrow {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.4em;
}

/* Decorative lines flanking the eyebrow text */
.hero-eyebrow::before,
.hero-eyebrow::after {
    content: '';
    display: block;
    width: 3rem;
    height: 2px;
    background: var(--secondary-color);
    border-radius: 2px;
}

/* Section subheadings with a yellow left border */
h2 {
    font-weight: 600;
    font-size: 1.75em;
    border-left: 4px solid var(--secondary-color);
    padding-left: 0.5em;
    margin-bottom: 0.5em;
}

/* Body text — indented by default for a traditional feel */
p {
    font-weight: 400;
    text-indent: 2em;
    line-height: 1.75;
}

/* Remove indent when .no-indent is on the parent container */
.text-container.no-indent p {
    text-indent: 0;
}


/* ============================================================
   7. FLEX LAYOUT (Hero / About section)
   The about section uses flexbox to place the image and text
   side by side. They wrap on smaller screens.
   ============================================================ */

.flex-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
}

/* Hero image (logo/photo in about section) */
header img {
    max-width: 35%;
    border-radius: 1.5em;
    object-fit: cover;
    object-position: bottom;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    flex-shrink: 0;
}

/* Text block next to the hero image */
.text-container {
    flex: 0 1 30em;
    font-size: 1.15rem;
    padding-left: 1.5em;
}


/* ============================================================
   8. BUTTONS
   Two styles: primary (dark grey) and secondary (yellow).
   Both lift slightly on hover.
   ============================================================ */

.button-group {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 1.25em;
}

.cta-button {
    display: inline-block;
    text-decoration: none;
    color: white;
    background-color: var(--primary-color);
    padding: 0.75em 1.5em;
    border: 1px solid #1B1E29;
    border-radius: 1em;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.cta-button:hover {
    opacity: 0.85;
    color: var(--text-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
    text-decoration: none;
}

/* Yellow variant */
.cta-button.secondary {
    color: var(--text-color);
    background-color: var(--secondary-color);
}

.cta-button.secondary:hover {
    opacity: 0.85;
    transform: translateY(-2px);
    text-decoration: none;
}


/* ============================================================
   9. SERVICES SECTION
   Two-column layout: service grid on the left, areas on the right.
   The grid is fixed at exactly 2 columns x 5 rows.
   Cards lift and get a yellow border on hover.
   ============================================================ */

/* Outer layout: services grid left, service areas right */
.services-layout {
    display: flex;
    gap: 3em;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Left column — takes up as much space as it needs */
.services-left {
    flex: 0 0 auto;
    margin-left: 2em;
}

/* Right column — fills remaining space */
.services-right {
    flex: 1 1 18em;
}

.services-right p {
    text-indent: 0;
    line-height: 1.75;
}

.services-right a {
    color: var(--primary-color);
    font-weight: 600;
}

.services-right a:hover {
    color: var(--text-color);
}

/* Exactly 2 columns, 5 rows */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6em;
    margin-top: 0.75em;
}

.service-item {
    background: white;
    border: 1px solid var(--base-color);
    border-radius: 0.75em;
    padding: 0.75em 1em;
    display: flex;
    align-items: center;
    gap: 0.6em;
    transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
    cursor: default;
    min-width: 180px;
}

.service-item:hover {
    box-shadow: 0 4px 14px var(--shadow);
    transform: translateY(-2px);
    border-color: var(--secondary-color);
}

.service-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.service-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
}

/* Bulleted list of service area towns */
.areas-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4em 1em;
    margin-top: 0.25em;
}

.areas-list li {
    font-size: 0.95rem;
    color: var(--text-color);
    font-weight: 500;
}


/* ============================================================
   10. GALLERY GRID (homepage preview)
   5-image mosaic layout: first image spans 2 cols × 2 rows,
   the other four fill the remaining cells.
   Images zoom slightly and get a dark overlay on hover.
   ============================================================ */

.grid-container {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 200px 200px;
    grid-template-areas:
        "img-1 img-1 img-2 img-3"
        "img-1 img-1 img-4 img-5";
    gap: 1em;
}

/* Wrapper div for each image — needed for the overlay effect */
.grid-container .g-img {
    overflow: hidden;
    border-radius: 0.5em;
    position: relative;
}

/* Dark gradient overlay that fades in on hover */
.grid-container .g-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(27,30,41,0.4), transparent 55%);
    opacity: 0;
    transition: opacity 0.25s;
    border-radius: 0.5em;
}

.grid-container .g-img:hover::after { opacity: 1; }

.grid-container .g-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 0.5em;
    transition: transform 0.3s ease;
    display: block;
}

/* Subtle zoom on hover */
.grid-container .g-img:hover img {
    transform: scale(1.06);
}


/* ============================================================
   11. CONTACT CARD (question rows)
   Used on both the homepage footer section and contact.html.
   Each row shows a bold label on the left, value on the right,
   separated by a thin bottom border.
   ============================================================ */

.question {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.6em 0;
    border-bottom: 1px solid var(--base-color);
    gap: 1em;
    font-size: 0.95rem;
}

.question:last-child {
    border-bottom: none;
}

/* Lights up the row on hover, like the original */
.question:hover {
    background-color: #FFF600;
    border-radius: 0.25em;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.question strong {
    min-width: 11em;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.question a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
}

.question a:hover {
    text-decoration: underline;
}


/* ============================================================
   12. GALLERY PAGE (gallery.html)
   Full gallery with a large featured image, prev/next arrows,
   and a scrollable strip of thumbnails below.

   KEY MOBILE DECISIONS:
   - .featured-wrapper has a fixed height so the prev/next
     buttons never move regardless of portrait vs landscape images
   - Featured image uses object-fit:cover to fill that fixed area
   - Thumbnails switch from fixed 300px to fluid 1fr on mobile
   ============================================================ */

/* ============================================================
   12. GALLERY PAGE (gallery.html)
   Full gallery with a large featured image, prev/next arrows,
   and a scrollable strip of thumbnails below.

   Buttons are overlaid ON TOP of the image using absolute
   positioning so they can never overflow the section edges.
   ============================================================ */

/* Wrapper is position:relative so the buttons can be
   positioned absolutely inside it */
.featured-wrapper {
    position: relative;
    width: 100%;
}

/* The large displayed image — shows the whole image, no cropping */
.featured-image {
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    object-position: center;
    border-radius: 1em;
    display: block;
    box-shadow: 0 4px 20px var(--shadow);
}

/* All arrow buttons base style */
.arrow-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    font-size: 1.5em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    line-height: 1;
}

.arrow-btn:hover {
    background: var(--secondary-color);
    color: var(--text-color);
}

/* Prev/next buttons float over the image, pinned to the sides */
.arrow-btn.prev {
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.arrow-btn.next {
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* Thumbnail strip prev/next — tall rectangles */
.arrow-btn.thumb-prev,
.arrow-btn.thumb-next {
    position: static;           /* these stay in normal flow */
    border-radius: 0.4em;
    width: 2em;
    height: 5em;
    font-size: 1.25em;
    flex-shrink: 0;
}

/* Thumbnail strip row: [prev] [grid of 4] [next] */
.thumbnail-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.75em;
}

/* Grid fills available space between the two thumb buttons */
.thumbnail-strip {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* fluid columns, not fixed px */
    gap: 0.4em;
}

/* Individual thumbnail images */
.thumbnail {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.6em;
    cursor: pointer;
    opacity: 0.35;
    border: 4px solid transparent;
    transition: opacity 0.2s ease, transform 0.15s ease;
    display: none;              /* JS shows only the current page of 4 */
}

.thumbnail:hover {
    opacity: 1;
    transform: scale(1.04);
}

/* Active thumbnail — full opacity + yellow border */
.thumbnail.active {
    border: 4px solid var(--secondary-color);
    opacity: 1;
}


/* ============================================================
   13. FAQ PAGE
   Individual FAQ items separated by a border. Each has an h2
   question heading and paragraph/list answers below it.
   The "Why Choose Us" section uses a two-column card list.
   ============================================================ */

/* Spacing between each Q&A block */
.faq-item {
    padding: 1.5em 0;
    border-bottom: 1px solid var(--base-color);
}

.faq-item:last-child {
    border-bottom: none;
}

/* Question heading — slightly smaller than normal h2 */
.faq-item h2 {
    font-size: 1.2em;
    margin-bottom: 0.6em;
    border-left: 4px solid var(--secondary-color);
    padding-left: 0.5em;
}

/* Paragraphs inside FAQ items — no indent */
.faq-item p {
    text-indent: 0;
    margin-bottom: 0.5em;
    line-height: 1.75;
}

.faq-item p:last-child {
    margin-bottom: 0;
}

/* Bulleted lists inside FAQ answers */
.faq-list {
    list-style: none;
    margin: 0.75em 0;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.faq-list li {
    padding: 0.45em 0.75em;
    background: white;
    border-left: 3px solid var(--secondary-color);
    border-radius: 0 0.4em 0.4em 0;
    font-size: 0.95rem;
}

/* "Why Choose Us" — 2-column grid of cards */
.why-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1em;
    margin-top: 1em;
}

.why-list li {
    background: white;
    border: 1px solid var(--base-color);
    border-radius: 0.75em;
    padding: 1em 1.25em;
    display: flex;
    align-items: flex-start;
    gap: 0.85em;
    transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
}

.why-list li:hover {
    box-shadow: 0 4px 14px var(--shadow);
    transform: translateY(-2px);
    border-color: var(--secondary-color);
}

.why-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.1em;
}

.why-list strong {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25em;
    font-size: 0.95rem;
}

.why-list p {
    text-indent: 0;
    font-size: 0.88rem;
    color: var(--primary-color);
    line-height: 1.5;
    margin: 0;
}


/* ============================================================
   14. FOOTER
   Dark footer with yellow top border. Sits below all content.
   body uses min-height + flex column so the footer is always
   pushed to the bottom even on short pages (e.g. contact).
   ============================================================ */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The footer's direct wrapper — grows to fill leftover space */
footer {
    margin-top: auto;
}

.site-footer {
    background-color: var(--primary-color);
    color: rgba(255, 255, 255, 0.7);
    padding: 2em 1.5em;
    border-top: 3px solid var(--secondary-color);
    text-align: center;
    font-size: 0.9rem;
    margin-top: 1em;
}

/* Large Staatliches brand name at top of footer */
.footer-brand {
    font-family: 'Staatliches', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    color: white;
    margin-bottom: 0.5em;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    margin-inline: 0.6em;
    transition: color 0.15s;
}

.site-footer a:hover {
    color: var(--secondary-color);
    text-decoration: none;
}

.footer-links {
    margin-bottom: 0.75em;
}

.footer-copy {
    font-size: 0.8rem;
    margin-top: 0.75em;
    opacity: 0.5;
}


/* ============================================================
   15. RESPONSIVE / MEDIA QUERIES
   ============================================================ */

/* ── TABLET (below 1000px) ───────────────────── */
@media (max-width: 1000px) {
    header .text-container {
        padding-top: 0;
    }

    /* Services: stack vertically on tablet */
    .services-layout {
        flex-direction: column;
        gap: 1.5em;
    }
}

/* ── MOBILE LANDSCAPE / SMALL TABLET (below 768px) ── */
@media (max-width: 768px) {

    /* Hero image goes full width */
    header img {
        max-width: 100%;
    }

    /* Homepage gallery grid: 2 columns, first image full width */
    .grid-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: none;
        height: auto;
    }

    .grid-container .g-img {
        height: 160px;          /* consistent height on mobile */
    }

    .grid-container .g-img:first-child {
        grid-column: 1 / -1;   /* big image spans both columns */
        height: 220px;
    }

    /* Thumbnail strip: 2 visible at a time on small screens */
    .thumbnail-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Services: single column on mobile */
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }

    .areas-list {
        grid-template-columns: 1fr 1fr;
    }

    /* Contact rows: stack label above value */
    .question {
        flex-direction: column;
        gap: 0.2em;
    }

    .question strong {
        min-width: unset;
    }
}

/* ── MOBILE PORTRAIT (below 480px) ────────────── */
@media (max-width: 480px) {

    /* Header padding tighter on small phones */
    header, section {
        padding: 1.25em 1em;
        border-radius: 0.75em;
    }

    /* Thumbnail strip prev/next on small phones */
    .arrow-btn.thumb-prev,
    .arrow-btn.thumb-next {
        width: 1.75em;
        height: 4em;
        font-size: 1.2em;
    }

    /* Thumbnails: 2 columns on small phones too */
    .thumbnail-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Services: single column on very small screens */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .areas-list {
        grid-template-columns: 1fr;
    }

    /* Why list: single column */
    .why-list {
        grid-template-columns: 1fr;
    }

    /* Eyebrow lines too wide on tiny screens — hide them */
    .hero-eyebrow::before,
    .hero-eyebrow::after {
        display: none;
    }
}

/* ── NAV HAMBURGER (below 640px) ───────────────── */
@media (max-width: 640px) {

    /* Show the hamburger button */
    .hamburger {
        display: flex;
    }

    /* Hide the link list by default — slides down when .open is added */
    .nav-links {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;                /* full width below the nav bar */
        padding: 0.5em 0 0.75em;
        gap: 0;
        border-top: 1px solid var(--border);
    }

    /* Slide open smoothly when JS adds .open */
    .nav-links.open {
        display: flex;
    }

    .nav-links li {
        width: 100%;
        font-size: 1.1em;
    }

    .nav-links a {
        display: block;
        padding: 0.6em 0.25em;
        width: 100%;
        border-bottom: 1px solid var(--color-3);
    }

    .nav-links a:hover {
        background-color: #FFF600;
        text-decoration: none;
    }
}