/*
Theme Name: DesignBank
Description: Custom theme for The Print Bank design agency
Version: 1.0
*/

/* =====================
   Smooth scroll
   Makes all anchor link navigation animate instead of jumping.
   ===================== */
html {
    scroll-behavior: smooth;
}

/* =====================
   Design tokens
   Centralised here so any colour or font change is one edit.
   ===================== */
:root {
    --dark:  #1c1c1c; /* near-black: nav, footer, text, buttons */
    --light: #ffffff; /* white: page background */
    --grey:  #e1e1e1; /* light grey: borders and input outlines */
    --font:  'DM Sans', sans-serif;
}

/* =====================
   Global reset
   Removes browser default margin/padding and enforces
   border-box sizing so padding does not expand elements.
   ===================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    color: var(--dark);
    background: var(--light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* crisper text on Mac/iOS */
}

img {
    display: block;  /* removes the inline gap below images */
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

/* =====================
   Site header / navigation
   ===================== */
.site-header {
    background: var(--dark);
    padding: 1.25rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* anchor for the absolute-positioned mobile menu */
}

.site-logo img {
    height: 36px;
    width: auto;
}

/* WordPress wp_nav_menu() wraps the list in a <nav> container.
   We target the <ul> inside that <nav>. */
.site-header nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.site-header nav a {
    color: var(--light);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-header nav a:hover {
    opacity: 0.6;
}

/* WordPress automatically adds 'current-menu-item' to the active page link.
   A bottom border makes it clear which page the user is on. */
.site-header nav .current-menu-item > a {
    border-bottom: 1px solid var(--light);
    padding-bottom: 2px;
}

/* Hamburger button — hidden on desktop, shown on mobile via media query */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

/* Each bar of the hamburger icon */
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--light);
}

/* =====================
   Hero image
   Full-width portfolio photograph below the nav.
   ===================== */
.hero {
    width: 100%;
    overflow: hidden;
    line-height: 0; /* collapse the tiny gap below inline images */
}

.hero img {
    width: 100%;
    height: 580px;
    object-fit: cover;     /* fill the box without distorting the image */
    object-position: center;
}

/* =====================
   Intro text section
   Centred tagline and short agency description.
   ===================== */
.intro {
    padding: 5rem 2rem;
    max-width: 820px;
    margin: 0 auto;  /* centre the block horizontally */
    text-align: center;
}

.intro h1 {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.intro p {
    font-size: 1.05rem;
    color: #555555;
    line-height: 1.85;
}

/* Call-to-action button in the intro section */
.btn {
    display: inline-block;
    background: var(--dark);
    color: var(--light);
    padding: 0.875rem 2.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 2rem;
    transition: opacity 0.2s ease; /* smooth fade on hover */
}

.btn:hover {
    opacity: 0.7;
}

/* =====================
   Work / Portfolio grid
   Three equal columns of portfolio images.
   ===================== */
.work-section {
    padding: 3rem 2.5rem 5rem;
}

.work-section h2 {
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 2rem;
    color: #999999;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* three equal columns */
    gap: 1.25rem;
}

/* overflow hidden clips the image when it scales up on hover */
.work-item {
    overflow: hidden;
}

.work-grid img {
    width: 100%;
    aspect-ratio: 3 / 4; /* portrait crop — keeps all images the same shape */
    object-fit: cover;
    transition: transform 0.4s ease; /* smooth scale animation */
}

/* Slight zoom on hover — shows the images are interactive */
.work-item:hover img {
    transform: scale(1.04);
}

/* =====================
   Site footer
   Dark background mirroring the header.
   ===================== */
.site-footer {
    background: var(--dark);
    color: var(--light);
    padding: 2.5rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-logo img {
    height: 28px;
    width: auto;
}

.footer-copy {
    font-size: 0.8rem;
    opacity: 0.5;
    letter-spacing: 0.03em;
}

/* =====================
   Contact page
   ===================== */
.contact-page {
    padding: 4rem 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-page > h1 {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 3rem;
}

/* Two-column grid: map on left, form on right */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Google Maps iframe — no border, full width of its column */
.contact-map iframe {
    width: 100%;
    height: 420px;
    border: none;
    display: block;
}

/* Address / contact details block below the map */
.contact-details {
    margin-top: 2rem;
    font-size: 0.95rem;
    line-height: 2;
    color: #555555;
}

/* Small uppercase label above each detail (Address, Email, Phone) */
.contact-details strong {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dark);
    margin-top: 1.5rem;
    margin-bottom: 0.2rem;
}

/* Remove top margin on the very first label */
.contact-details strong:first-child {
    margin-top: 0;
}

/* Form column heading */
.contact-form h2 {
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    color: #999999;
}

/* =====================
   Contact Form 7 overrides
   CF7 uses generic HTML — we style it to match the design.
   ===================== */

/* Remove the default paragraph spacing CF7 adds */
.wpcf7-form p {
    margin-bottom: 1.25rem;
}

/* Field labels */
.wpcf7-form label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    color: var(--dark);
}

/* Text inputs and textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--grey);
    border-radius: 0; /* remove any browser rounding */
    font-family: var(--font);
    font-size: 0.95rem;
    background: var(--light);
    color: var(--dark);
    outline: none;
    -webkit-appearance: none; /* remove iOS default input styling */
    appearance: none;
}

/* Highlight the active field */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
    border-color: var(--dark);
}

.wpcf7-form textarea {
    height: 160px;
    resize: vertical; /* allow vertical resize only */
}

/* Submit button */
.wpcf7-form input[type="submit"] {
    background: var(--dark);
    color: var(--light);
    border: none;
    padding: 0.875rem 2rem;
    font-family: var(--font);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    display: block;
    margin-top: 0.5rem;
}

.wpcf7-form input[type="submit"]:hover {
    opacity: 0.75;
}

/* CF7 response message (success / error) */
.wpcf7-response-output {
    font-size: 0.85rem;
    margin-top: 1rem;
    padding: 0.5rem 0;
    border: none;
}

/* =====================
   Responsive — mobile (max 768px)
   ===================== */
@media (max-width: 768px) {

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

    /* Hide the nav links by default on mobile.
       Position absolute so it overlays content below the header. */
    .site-header nav {
        display: none;
        position: absolute;
        top: 100%; /* sit directly below the header bar */
        left: 0;
        right: 0;
        background: var(--dark);
        padding: 1.5rem 2.5rem;
        z-index: 99;
    }

    /* nav.js adds this class when the toggle is clicked */
    .site-header nav.is-open {
        display: block;
    }

    /* Stack links vertically in the mobile menu */
    .site-header nav ul {
        flex-direction: column;
        gap: 1.25rem;
    }

    /* Use portrait mobile image at full viewport height */
    .hero img {
        height: 70vh;
    }

    /* Scale down the heading on small screens */
    .intro h1 {
        font-size: 1.75rem;
    }

    /* Single column portfolio grid on mobile */
    .work-grid {
        grid-template-columns: 1fr;
    }

    /* Stack map and form vertically on mobile */
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .contact-page {
        padding: 3rem 1.5rem;
    }

    /* Stack footer items and centre them */
    .site-footer {
        flex-direction: column;
        gap: 1.25rem;
        text-align: center;
    }
}