/* ============================================================
   Bitcoin Hands-On — site styles
   Faithful rebuild of the original Carrd design.
   Colors and fonts are variables below; edit them to retheme.
   ============================================================ */

:root {
    --teal: #1ABC9C;         /* buttons */
    --red: #F01616;          /* testimonial attributions */
    --green: #CCE6D9;        /* highlight boxes */
    --ink: #000000;          /* main text */
    --hero-text: rgba(252, 250, 250, 0.969);

    --font-serif: 'Roboto Slab', serif;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    --font-accent: 'Raleway', sans-serif;

    --column: 44rem;         /* main content width */
}

* { box-sizing: border-box; }

/* Base type scale matches the original: large on big screens,
   stepping down at the same breakpoints Carrd used. */
html { font-size: 18pt; }
@media (max-width: 1680px) { html { font-size: 13pt; } }
@media (max-width: 980px)  { html { font-size: 11pt; } }

body {
    margin: 0;
    color: var(--ink);
    background-color: #FFFFFF;
    background-image: url('../assets/images/bg-speckle.jpg');
    background-attachment: fixed;
    background-repeat: repeat;
    font-family: var(--font-sans);
    line-height: 1.25;
    word-wrap: break-word;
}

.page {
    max-width: 58rem;
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 1.75rem 3.85rem;
}

/* ------------------------------------------------------------
   Sections
   ------------------------------------------------------------ */

.section {
    padding: 0.4rem 0;
}

/* ------------------------------------------------------------
   Hero — full-width red bokeh banner
   ------------------------------------------------------------ */

.hero {
    background-image: url('../assets/images/hero-bokeh.jpg');
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 1.75rem 1.75rem;
}

.hero-title {
    color: var(--hero-text);
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 3.25em;
    line-height: 1.25;
    letter-spacing: -0.075rem;
    margin: 0 0 0.625rem;
}

.hero-title strong { font-weight: 700; }

.hero-subtitle {
    color: var(--hero-text);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.625em;
    line-height: 1.25;
    letter-spacing: 0.05rem;
    margin: 0;
}

/* ------------------------------------------------------------
   Buttons — teal pills
   ------------------------------------------------------------ */

.button-row {
    text-align: center;
    margin: 1.5rem 0 0.5rem;
}

.hero .button-row { margin: 2.5rem 0 0; }

.button {
    display: inline-block;
    background-color: var(--teal);
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.5625rem;
    text-decoration: none;
    padding: 0.9rem 2rem;
    border-radius: 1.75rem;
}

.button:hover { filter: brightness(1.08); }

/* ------------------------------------------------------------
   Typography roles (named after their job on the page)
   ------------------------------------------------------------ */

/* Big centered serif statement under the hero */
.lead {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 2.75em;
    line-height: 1.25;
    letter-spacing: 0.025rem;
    text-align: center;
    margin: 1.5rem 0;
}

/* Large centered serif section statements */
.statement {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 2.75em;
    line-height: 1.125;
    letter-spacing: 0.025rem;
    text-align: center;
    margin: 0 0 1.5rem;
}

/* Bold centered serif subhead */
.subhead-bold {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 2em;
    line-height: 1.375;
    letter-spacing: 0.025rem;
    text-align: center;
    margin: 0 0 1.5rem;
}

/* Centered serif section headings (FAQ, Resources) */
.section-heading {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 2.75em;
    line-height: 1.375;
    letter-spacing: 0.025rem;
    text-align: center;
    margin: 0 0 1.5rem;
}

.section-heading-bold { font-weight: 700; }

/* Standard body paragraphs */
.body-text {
    font-size: 1.25em;
    line-height: 1.25;
    letter-spacing: 0.025rem;
    margin: 0 0 0.625rem;
}

/* Slightly larger body variant */
.body-text-lg {
    font-size: 1.375em;
    line-height: 1.25;
    letter-spacing: 0.025rem;
    margin: 0 0 0.625rem;
}

/* ------------------------------------------------------------
   Dividers — thin black rules
   ------------------------------------------------------------ */

.divider {
    border: 0;
    height: 1px;
    background-color: var(--ink);
    margin: 1.5rem auto;
    width: 100%;
}

/* ------------------------------------------------------------
   Book cover
   ------------------------------------------------------------ */

.cover-section { text-align: center; }

.cover {
    max-width: 20rem;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------
   Bulleted lists
   ------------------------------------------------------------ */

.bullet-list {
    list-style: none;
    font-size: 1.25em;
    line-height: 1.75;
    letter-spacing: 0.025rem;
    margin: 0 0 0.75rem;
    padding-left: 0;
}

.bullet-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.4em;
}

.bullet-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0.85em;
    height: 1.75em;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M39.4%2C11.2c0%2C.4-.2%2C.7-.5%2C1l-22.8%2C22.8c-.2%2C.2-.6%2C.6-1.1%2C.6h0c-.5%2C0-.8-.2-.9-.4h-.1c0-.1-12.8-12.9-12.8-12.9-.6-.6-.5-1.6.1-2.4h0c0-.1%2C2.4-2.5%2C2.4-2.5.5-.5%2C1.1-.7%2C1.6-.7.4%2C0%2C.7.2%2C1%2C.5l8.8%2C8.7L33.8%2C7c.6-.6%2C1.6-.5%2C2.4%2C0h.1c0%2C.1%2C2.5%2C2.5%2C2.5%2C2.5.3.3.5.6.5%2C1Z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: left 60%;
    background-size: contain;
}

.faq-list li { margin-bottom: 1.1em; }

/* ------------------------------------------------------------
   Green highlight boxes
   ------------------------------------------------------------ */

.green-box {
    background-color: var(--green);
    padding: 1.75rem;
    margin: 1rem 0;
}

/* ------------------------------------------------------------
   Gradient highlight box ("These exercises...")
   ------------------------------------------------------------ */

.gradient-box {
    background-image: linear-gradient(45deg, #8ED674 0%, #918AC2 60%);
    padding: 2.75rem 3.85rem;
    margin: 1rem -3.85rem;   /* full-bleed across the white column */
}

@media (max-width: 736px) {
    .gradient-box { padding: 2rem 1.75rem; margin: 1rem -1.75rem; }
}

/* ------------------------------------------------------------
   Testimonials — bordered cards flanked by big quote marks
   ------------------------------------------------------------ */

.testimonial-card {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    border: 12px solid rgba(227, 225, 225, 0.961);
    background-color: #FFFFFF;
    padding: 3rem 3rem;
    margin: 1.625rem 0;
}

.testimonial-body {
    flex: 1;
    max-width: 27rem;
    margin: 0 auto;
}

.quote-mark {
    display: block;
    width: 3rem;
    height: auto;
    flex-shrink: 0;
}

@media (max-width: 736px) {
    .testimonial-card { flex-direction: column; align-items: center; }
}

.quote-text {
    font-size: 1.375em;
    line-height: 1.5;
    letter-spacing: 0.025rem;
    margin: 0 0 0.8em;
}

.attribution {
    color: var(--red);
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: 1.25em;
    line-height: 2.125;
    letter-spacing: 0.025rem;
    margin: 0;
}

/* ------------------------------------------------------------
   Resources
   ------------------------------------------------------------ */

.resource-head {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 2.25em;
    line-height: 1.375;
    letter-spacing: 0.025rem;
    margin: 1.5rem 0 1rem;
}

.resource-entry {
    font-family: var(--font-serif);
    font-size: 1em;
    line-height: 1.375;
    letter-spacing: 0.025rem;
    margin: 0 0 1.4em;
}

/* ------------------------------------------------------------
   Links
   ------------------------------------------------------------ */

a { color: inherit; }

/* ------------------------------------------------------------
   Hero content width (matches the main column)
   ------------------------------------------------------------ */

.hero-inner {
    max-width: 51.1rem;   /* matches original: subtitle wraps after "Using" */
    margin: 0 auto;
}

/* ------------------------------------------------------------
   Two-column: problem text beside the book cover
   ------------------------------------------------------------ */

.two-col {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.two-col-text { flex: 1.4; }

.two-col-cover {
    flex: 1;
    display: block;
}

@media (max-width: 736px) {
    .two-col { flex-direction: column; align-items: center; }
    .two-col-cover { max-width: 20rem; }
}

/* ------------------------------------------------------------
   Site navigation bar — deep wine, sampled from the hero image
   ------------------------------------------------------------ */

.site-nav {
    background-color: #6E2833;
}

.site-nav-inner {
    max-width: 58rem;
    margin: 0 auto;
    padding: 0.55rem 1.75rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.site-nav-links {
    font-size: 0.9em;
    letter-spacing: 0.02em;
}

.site-nav-links a {
    text-decoration: none;
    margin-left: 1.6em;
    color: rgba(252, 250, 250, 0.92);
}

.site-nav-links a:hover { color: #FFFFFF; }

.site-nav-links a.nav-buy {
    color: #4FE3C1;   /* brighter teal for contrast on the dark bar */
    font-weight: 700;
}

.site-nav-links a.nav-buy:hover { color: #7FF0D6; }