/*
Theme Name: Tatted Baker
Theme URI: https://tattedbaker.co.uk
Author: Tatted Baker
Description: Custom lightweight WordPress block theme for The Tatted Baker.
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: tatted-baker
*/

/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #f5ecdc;
    color: #402c20;
}

a {
    transition: opacity .2s ease;
}

a:hover {
    opacity: .78;
}

.wp-site-blocks {
    overflow: hidden;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.tb-header {
    border-bottom: 1px solid rgba(64, 44, 32, .12);
}

.tb-brand a {
    text-decoration: none;
}

.tb-nav a {
    text-decoration: none;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.tb-hero {
    min-height: 68vh;
    display: flex;
    align-items: center;
}

.tb-eyebrow {
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .82rem;
}

.tb-hero h1 {
    max-width: 850px;
}

.tb-hero-copy {
    max-width: 650px;
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.wp-block-button__link {
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    opacity: 1;
    box-shadow: 0 8px 22px rgba(64, 44, 32, .15);
}

/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.tb-section {
    padding-top: clamp(60px, 8vw, 110px);
    padding-bottom: clamp(60px, 8vw, 110px);
}

.tb-card {
    border: 1px solid rgba(64, 44, 32, .12);
    border-radius: 4px;
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.tb-footer {
    margin-top: 0;
}

/* ---------------------------------------------------------
   SMALL SCREENS
   --------------------------------------------------------- */

@media (max-width: 700px) {
    .tb-hero {
        min-height: 58vh;
    }
}