/* Shared stylesheet for thefastestway.net.
   Linked by / (English) and /nl/ (Dutch) so a style change lands on
   both pages at once. Extracted from the inline <style> block that
   index.html carried until the Dutch page was added. */

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    min-height: 100vh;
    color: #333;
}

/* Header Navigation */
header {
    background: linear-gradient(135deg, #006400 0%, #1F851F 100%);
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    margin-right: 40px;
}

.logo-text {
    font-size: 1.4rem;
    font-weight: bold;
    color: white;
    border: 2px solid white;
    padding: 8px 16px;
    border-radius: 25px;
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 10px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    padding: 10px 18px;
    font-size: 1rem;
    transition: background-color 0.3s;
    border-radius: 3px;
}

.nav-links a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Language switcher. Each page links only to the other one - showing both
   languages with the current one greyed out says the same thing with twice
   the furniture. The rule is dropped when the nav wraps on small screens,
   where a divider hanging at the start of a row reads as a mistake. */
.nav-links .nav-lang {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}

/* Main Content */
main {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    background: white;
    min-height: calc(100vh - 70px);
}

h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

h2 {
    font-size: 1.5rem;
    color: #222;
    margin-bottom: 15px;
    margin-top: 30px;
}

h3 {
    font-size: 1.2rem;
    color: #006400;
    margin-bottom: 10px;
    margin-top: 20px;
}

p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #444;
}

a.link {
    color: #0066cc;
    text-decoration: none;
}

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

.highlight {
    color: #006400;
    font-weight: 600;
}

.quote-box {
    background: #f0f7f0;
    border-left: 4px solid #1F851F;
    padding: 20px 25px;
    margin: 25px 0;
    font-style: italic;
}

.quote-box p {
    margin-bottom: 0;
    color: #333;
}

/* Three Tools Section */
.tools-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.framework-image {
    text-align: center;
    margin: 30px 0;
}

.framework-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.image-caption {
    font-size: 0.95rem;
    color: #666;
    font-style: italic;
    margin-top: 10px;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 25px;
}

.tool-card {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    border-left: 4px solid #1F851F;
}

.tool-card h3 {
    color: #006400;
    margin-bottom: 10px;
    margin-top: 0;
    font-size: 1.2rem;
}

.tool-card p {
    font-size: 1rem;
    margin-bottom: 0;
}

.tool-card ul {
    margin-top: 10px;
    padding-left: 20px;
    font-size: 0.95rem;
    color: #555;
}

.tool-card li {
    margin-bottom: 5px;
}

/* Tool detail diagrams */
.diagram {
    margin: 25px 0 35px;
    text-align: center;
}

.diagram img {
    max-width: 100%;
    height: auto;
    border: 1px solid #eee;
    border-radius: 6px;
}

.diagram .image-caption {
    margin-top: 8px;
}

.axis-note {
    background: #fafafa;
    border-left: 3px solid #ccc;
    padding: 12px 18px;
    margin: 20px 0;
    font-size: 1rem;
}

.axis-note p {
    font-size: 1rem;
    margin-bottom: 0;
}

/* Above-the-fold buy box - visitors who land here to buy should not
   have to scroll to the book section to find the store links. */
.hero-buy {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    background: #f0f7f0;
    border: 1px solid #d4e6d4;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 30px;
}

.hero-buy-cover {
    flex: 0 0 80px;
    width: 80px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.hero-buy-body {
    flex: 1 1 260px;
}

.hero-buy-title {
    font-size: 1.15rem;
    font-weight: bold;
    color: #006400;
    margin-bottom: 4px;
}

.hero-buy-text {
    font-size: 1rem;
    color: #555;
    margin-bottom: 14px;
}

.hero-buy-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Book Section */
.book-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.book-cover {
    flex: 0 0 200px;
}

.book-cover img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.book-body {
    flex: 1 1 320px;
}

/* Marketplace picker - Amazon shows a country interstitial if you
   land in the wrong store, so link each marketplace directly. */
.store-picker {
    margin-top: 25px;
}

.store-picker h4 {
    font-size: 1rem;
    color: #333;
    margin-bottom: 16px;
}

/* Two editions live in the picker: the English book (ISBN ...6-5) and
   the Dutch translation (ISBN ...7-2). They are separate books, not
   two links to the same one, so each gets its own labelled group. */
.store-edition + .store-edition {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e6efe6;
}

.store-edition-name {
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.store-edition-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.85rem;
    font-weight: normal;
    color: #666;
}

/* Regional-indicator pairs render as flags on macOS, iOS and Android.
   Windows has no flag glyphs and falls back to the two ISO letters,
   which still reads correctly next to the store name. */
.flag {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-style: normal;
    margin-right: 7px;
}

.store-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.store-list a {
    display: inline-block;
    padding: 8px 16px;
    background: white;
    border: 1px solid #cbdccb;
    border-radius: 4px;
    color: #006400;
    text-decoration: none;
    font-size: 0.95rem;
    transition: border-color 0.2s, background-color 0.2s;
}

.store-list a:hover {
    background: #006400;
    border-color: #006400;
    color: white;
}

/* Direct buy link. The Dutch edition sells through a single marketplace, so
   it gets a plain link where the English book needs the store picker. Styled
   to match .store-toggle, but without the popover feature gate - this one is
   always visible. */
.buy-link {
    display: inline-block;
    padding: 10px 20px;
    background: white;
    border: 1px solid #006400;
    border-radius: 4px;
    color: #006400;
    text-decoration: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}

.buy-link:hover {
    background: #006400;
    color: white;
}

.store-note {
    font-size: 0.9rem;
    color: #666;
    margin-top: 12px;
    margin-bottom: 0;
}

.store-close {
    display: none;
}

/* Progressive enhancement. Without Popover API support the [popover]
   element is an ordinary div, so the store list simply renders inline
   and the toggle button stays hidden. No JavaScript in either path.
   The rule below states that fallback explicitly rather than relying
   on the attribute being ignored. */
.store-toggle {
    display: none;
}

@supports not selector(:popover-open) {
    #store-popover {
        display: block;
    }
}

@supports selector(:popover-open) {
    .store-toggle {
        display: inline-block;
        padding: 10px 20px;
        background: white;
        border: 1px solid #006400;
        border-radius: 4px;
        color: #006400;
        font-family: inherit;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s, color 0.2s;
    }

    .store-toggle:hover {
        background: #006400;
        color: white;
    }

    .store-toggle::after {
        content: " \25BE";
    }

    #store-popover {
        width: min(440px, calc(100vw - 32px));
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        padding: 22px 24px;
        border: 1px solid #d4e6d4;
        border-radius: 8px;
        background: white;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
    }

    #store-popover::backdrop {
        background: rgba(0, 0, 0, 0.35);
    }

    .store-close {
        display: block;
        position: absolute;
        top: 10px;
        right: 12px;
        background: none;
        border: none;
        font-size: 1.5rem;
        line-height: 1;
        color: #888;
        cursor: pointer;
        padding: 4px 8px;
    }

    .store-close:hover {
        color: #333;
    }
}

/* The popover keeps the centred UA default position: two buttons open
   it (the buy box at the top and the one in the book section), so it
   cannot be anchored to either one in particular. */

.book-section {
    background: #f0f7f0;
    border: 1px solid #d4e6d4;
    border-radius: 8px;
    padding: 30px;
    margin: 40px 0;
}

.book-section h2 {
    margin-top: 0;
}

.book-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #006400;
    margin-bottom: 5px;
}

.book-byline {
    color: #666;
    font-size: 1rem;
    margin-bottom: 20px;
}

.book-meta {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
    font-size: 0.95rem;
    color: #555;
}

.book-meta li strong {
    color: #333;
}

/* The Dutch translation is its own book with its own ISBN, so it is
   announced in Dutch - the readers it is meant for read Dutch. */
.book-alt-edition {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    background: white;
    border: 1px solid #d4e6d4;
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 20px;
    margin-bottom: 0;
}

/* Paradox Section */
.paradox-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 30px;
    border-radius: 8px;
    margin: 30px 0;
}

.paradox-section h3 {
    margin-top: 0;
}

/* Who Is This For */
.audience-list {
    list-style: none;
    padding: 0;
}

.audience-list li {
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
    border-bottom: 1px solid #eee;
}

.audience-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #1F851F;
    font-weight: bold;
}

.audience-list li:last-child {
    border-bottom: none;
}

/* Constraints, not benefits - neutral marker rather than a checkmark */
.limits-list {
    list-style: none;
    padding: 0;
}

.limits-list li {
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
    border-bottom: 1px solid #eee;
}

.limits-list li:before {
    content: "—";
    position: absolute;
    left: 0;
    color: #999;
    font-weight: bold;
}

.limits-list li:last-child {
    border-bottom: none;
}

/* CTA Button */
.cta-section {
    margin-top: 40px;
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, #006400 0%, #1F851F 100%);
    border-radius: 8px;
}

.cta-section p {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.btn {
    display: inline-block;
    padding: 14px 35px;
    background: white;
    color: #006400;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.1rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.btn-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    color: #006400;
}

/* Footer */
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        gap: 15px;
    }

    .logo {
        margin-right: 0;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-links .nav-lang {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    h1 {
        font-size: 2rem;
    }
}

/* Cookie consent banner - hidden until js/consent-banner.js decides
   the visitor has no current stored choice. */
.consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    padding: 18px 25px;
    background: white;
    border-top: 3px solid #1F851F;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.15);
}

.consent-banner[hidden] {
    display: none;
}

.consent-banner p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 620px;
}

.consent-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.consent-actions button {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 10px 22px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.consent-accept {
    background: #006400;
    color: white;
    border: 1px solid #006400;
}

.consent-accept:hover {
    background: #1F851F;
}

.consent-decline {
    background: white;
    color: #006400;
    border: 1px solid #006400;
}

.consent-decline:hover {
    background: #f0f7f0;
}

/* Reopens the banner so a choice can be withdrawn as easily as given. */
.consent-reopen {
    background: none;
    border: none;
    padding: 0;
    margin-left: 8px;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 600px) {
    .consent-banner {
        gap: 15px;
    }

    .consent-actions {
        width: 100%;
    }

    .consent-actions button {
        flex: 1;
    }
}

/* Template download pages (/templates and /nl/sjablonen). The two cards are
   the point of the page, so they sit above the fold on a phone as well: the
   grid drops to one column rather than shrinking the cards. */
.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.download-card {
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    background: #fafafa;
}

.download-card h3 {
    margin-top: 0;
    font-size: 1.4rem;
}

.download-meta {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

/* Green on white, unlike .btn, which is white on the green CTA panel. */
.btn-download {
    display: inline-block;
    padding: 12px 30px;
    background: #006400;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
}

.btn-download:hover {
    background: #1F851F;
    transform: scale(1.03);
}

.download-alt {
    font-size: 1rem;
    color: #555;
}

.template-index ul {
    margin: 0 0 20px 20px;
}

.template-index li {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 8px;
}

/* Free-pack call to action.

   The templates page is the top of the funnel, but until now the only route
   to it from the homepage was the nav menu, which on a phone sits behind the
   hamburger. In the 19 to 26 August 2026 window 843 homepage visits produced
   2 template views. Same visual language as .quote-box so it reads as part of
   the page rather than as an advertisement. */
.free-pack {
    background: #f0f7f0;
    border-left: 4px solid #1F851F;
    padding: 28px 30px;
    margin: 35px 0;
}

.free-pack h2 {
    margin-top: 0;
}

.free-pack p {
    margin-bottom: 20px;
}

/* Sign-up for the follow-up sequence.

   Sits after the downloads, never in front of them: both template pages
   promise "no sign-up", and that promise is worth more than a higher capture
   rate. To gate the download instead, move this section above .download-grid
   and make the PDF links conditional - but read the promise first. */
.subscribe {
    background: #f0f7f0;
    border-left: 4px solid #1F851F;
    padding: 28px 30px;
    margin: 35px 0;
}

.subscribe h2 {
    margin-top: 0;
}

.subscribe-label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}

.subscribe-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.subscribe-row input[type="email"] {
    flex: 1 1 260px;
    padding: 12px 16px;
    border: 1px solid #cfd8cf;
    border-radius: 50px;
    font-size: 1rem;
    font-family: inherit;
}

.subscribe-row input[type="email"]:focus {
    outline: 2px solid #1F851F;
    outline-offset: 1px;
}

.subscribe-row button {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
}

.subscribe-consent {
    margin: 14px 0 0;
    font-size: 0.95rem;
    color: #444;
}

.subscribe-consent input {
    margin-right: 8px;
}

.subscribe-status {
    margin: 12px 0 0;
    font-size: 0.95rem;
    min-height: 1.2em;
}

.subscribe-status.is-ok {
    color: #006400;
    font-weight: bold;
}

.subscribe-status.is-error {
    color: #a11;
    font-weight: bold;
}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   fields that are not rendered at all. */
.subscribe-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}