/* ---------- Theme tokens ----------
   Light (black on white) is the base. theme.js picks light or dark from
   the OS / browser setting (or the navbar switch) and sets data-theme on <html>. */
:root {
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F4F4F4;
    --text: #111111;
    --muted: #5C5C5C;
    --border: #111111;
    --border-soft: #DDDDDD;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    /* Images: shadow offset down and to the left */
    --img-shadow: -4px 6px 8px rgba(0, 0, 0, 0.3);
    --required: #C62828;
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #0E0E0E;
    --surface: #161616;
    --surface-2: #202020;
    --text: #F2F2F2;
    --muted: #A8A8A8;
    --border: #F2F2F2;
    --border-soft: #333333;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    --img-shadow: -4px 6px 10px rgba(0, 0, 0, 0.75);
    --required: #FF7B7B;
    color-scheme: dark;
}

/* Every image except the parallax banners gets the same shadow.
   drop-shadow follows the image's shape (rounded corners, transparent
   logos and badges) rather than drawing a rectangle behind it. */
img:not(.parallax-image) {
    filter: drop-shadow(var(--img-shadow));
}

html, body {
    min-height: 100vh;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Varela Round', ui-rounded;
}

main {
    flex: 1 0 auto;
}

a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a:hover,
a:focus {
    color: var(--muted);
}

/*navbar styles */
.navbar {
    background-color: var(--bg);
    border-bottom: 1px solid var(--border-soft);
}

.nav-link {
    color: var(--text);
}

.navbar-toggler {
    padding: 0.5% 0.5%;
    color: var(--text);
    border-width: 0px;
}

/* Three bars drawn in the current text color, so the icon follows the theme */
.navbar-toggler-icon {
    background-image: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect x='3' y='6' width='24' height='3' rx='1.5'/%3E%3Crect x='3' y='13.5' width='24' height='3' rx='1.5'/%3E%3Crect x='3' y='21' width='24' height='3' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect x='3' y='6' width='24' height='3' rx='1.5'/%3E%3Crect x='3' y='13.5' width='24' height='3' rx='1.5'/%3E%3Crect x='3' y='21' width='24' height='3' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Gallery drop-down */
.navbar .dropdown-menu {
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 0.4em;
}

.navbar .dropdown-item {
    color: var(--text);
    border-radius: 6px;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: var(--surface-2);
    color: var(--text);
}

/* Compact (collapsed) menu: the gallery list is always open, shown as an
   indented sub-list under the "gallery" label instead of a toggle. */
@media (max-width: 767.98px) {
    .navbar .dropdown-toggle {
        pointer-events: none;
    }

    .navbar .dropdown-toggle::after {
        display: none;
    }

    .navbar .dropdown-menu {
        display: block;
        background-color: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 1em;
        margin: 0;
    }
}

.nav-link:hover,
.nav-link:focus,
.nav-link.show {
    color: var(--text);
    text-decoration: underline;
}

/* Light / dark switch in the navbar */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.3em 0.8em;
    margin: 0.25em 0;
    background-color: transparent;
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    font: inherit;
    font-size: 0.9em;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--border);
}

.theme-to-dark,
.theme-to-light {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.theme-toggle .material-icons {
    font-size: 1.2em;
}

/* Show only the option you can switch to */
:root[data-theme="dark"] .theme-to-dark,
:root:not([data-theme="dark"]) .theme-to-light {
    display: none;
}

/* Footer style */
footer {
    font-size: small;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    padding: 1.5em 1em 0.5em;
    text-align: center;
    background-color: var(--bg);
    color: var(--muted);
    border-top: 1px solid var(--border-soft);
}

.footer-heading {
    font-size: 1em;
    font-weight: bold;
    color: var(--text);
    margin-bottom: 0.4em;
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4em 1.5em;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-soon {
    color: var(--muted);
}

/* Content styles (thankyou.html card) */
.card {
    justify-content: space-around;
    background-color: var(--surface);
    color: var(--text);
    border: none;
    align-items: center;
    aspect-ratio: calc(2/3);
}

.outer-border {
    background-color: transparent;
    padding: 0;
    border: none;
    border-radius: 12px;
}

/* Body styles */

section {
    display: flow;
    margin: 10px;
}

section h1,
section h3,
section h4,
section h5,
article h2 {
    color: var(--text);
}

section h4 {
    font-weight: bolder;
}

/* Subtitle after an app name in a card heading, e.g. "Booty Hunt" */
.app-subtitle {
    font-family: 'Nunito', 'Varela Round', ui-rounded;
    font-size: 0.85em;
    font-weight: 300;
}

/* Cards are centered and just wider than the 760px text column used on the
   Focus Laser page: 760px + 2.5em padding each side + the 1px borders. */
article {
    max-width: calc(760px + 5em + 2px);
    margin-left: auto;
    margin-right: auto;
    background-color: var(--surface);
    padding: 1em;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    color: var(--text);
    display: flow-root;
}

/* Once the card has room, widen the side padding so the text stays 760px */
@media (min-width: 880px) {
    article {
        padding: 1em 2.5em;
    }
}

.article-image-lt {
    max-width: 140px;
    border-radius: 8px;
    float: left;
    margin-right: 2em;
}

/* App Store button minimum size per Apple guidelines */
.app-store-link {
    min-width: 120px;
    min-height: 40px;
}

.centered {
    text-align: center;
}

/* Page titles: plain text in the theme color */
.title-text {
    color: var(--text);
    text-shadow: none;
}

input {
    margin-bottom: 10px;
    margin-right: 1vw;
}

.send-button {
    width: 80px;
    height: 39px;
    color: var(--bg);
    background-color: var(--text);
    border-radius: 10px;
    border: 1px solid var(--text);
}

.send-button:hover,
.send-button:focus-visible {
    background-color: var(--muted);
    border-color: var(--muted);
}

/* Required-field asterisk */
label span {
    padding: 0px;
    text-decoration-line: none;
    color: var(--required);
    font-size: large;
}

/* Contact form message box: Bootstrap makes labels inline-block, which
   shrinks the textarea; a block label lets it span the card's text column */
.message-label {
    display: block;
}

.tms-email {
    padding: 10px;
    color: var(--text);
    font-size: large;
}

/* App feature pages (Focus Laser, Memory Pirates) */
/* Home page "coming soon" tag, sized and styled to match the App Store
   badge: 160px wide at the badge's 119.66:40 ratio, black with a grey rim. */
.store-badge {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 160px;
    max-width: 40%;
    aspect-ratio: 119.66 / 40;
    box-sizing: border-box;
    padding: 0 0.9em;
    margin-bottom: 0.5em;
    background-color: #000;
    color: #fff;
    border: 1px solid #a6a6a6;
    border-radius: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.05;
}

.store-badge-small {
    font-size: 11px;
    letter-spacing: 0.02em;
}

.store-badge-large {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

@media (max-width: 575px) {
    .store-badge {
        max-width: 60%;
    }
}

.lede {
    font-size: 1.15em;
}

.app-icon-lg {
    width: 160px;
    max-width: 40%;
    aspect-ratio: 1;
    object-fit: cover;
    /* border: 1px solid var(--border-soft); */
    border-radius: 22.5%;
    float: left;
    margin: 0 1.5em 1em 0;
    background-color: var(--surface-2);
}

/* App icon wrapped in a link, with a "learn more" caption underneath */
.app-icon-figure {
    float: left;
    width: 160px;
    max-width: 40%;
    margin: 0 1.5em 1em 0;
    text-align: center;
}

.app-icon-figure .app-icon-lg {
    display: block;
    width: 100%;
    max-width: 100%;
    float: none;
    margin: 0 0 0.5em;
}

.app-store-badge {
    display: block;
    width: 100%;
    border-radius: 8px;
}

/* Feature list with the app icon to its right */
.feature-row {
    display: flex;
    align-items: center;
    gap: 1.5em;
}

/* Feature lists sit beside a floated icon instead of running under it, so
   the bullets start right of the icon column rather than overlapping it. */
article aside {
    display: flow-root;
}

.feature-row aside {
    flex: 1;
}

/* Bullets start flush with the text column's left edge. Drawn with
   ::before because native list markers hang outside by an inexact amount. */
.feature-row ul {
    list-style: none;
    padding-left: 0;
}

.feature-row li {
    position: relative;
    padding-left: 1.25em;
}

.feature-row li::before {
    content: "\2022";
    position: absolute;
    left: 0;
}

.feature-row .app-icon-figure {
    float: none;
    width: 128px; /* 20% smaller than the 160px badges beside it */
    margin: 0;
    flex-shrink: 0;
    position: relative;
}

/* Caption hangs below the icon out of flow, so the figure is exactly the
   icon's height and align-items: center lines everything up with its middle */
.feature-row .app-icon-figure figcaption {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5em;
}

.feature-row .app-icon-figure .app-icon-lg {
    margin: 0;
}

.feature-row {
    padding-bottom: 2em; /* room for the hanging caption */
}

.feature-row > .store-badge,
.feature-row > .app-store-badge-link {
    flex: 0 0 auto;
    width: 160px;
    max-width: 40%;
    margin: 0;
}

.feature-row ul {
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .feature-row {
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 0;
    }

    /* Phones: bullets, then icon and caption, then badge, centred */
    .feature-row > .store-badge,
    .feature-row > .app-store-badge-link {
        order: 1;
        max-width: 60%;
        margin: 0 auto 1em;
    }

    .feature-row .app-icon-figure {
        margin: 0 auto;
    }

    .feature-row .app-icon-figure figcaption {
        position: static;
    }
}

.about-portrait {
    width: 260px;
    max-width: 45%;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    float: right;
    margin: 0 0 1em 1.5em;
    /* Crop the top 15% of the 520x564 image: show only the bottom 85% of its height */
    aspect-ratio: 520 / 479.4;
    object-fit: cover;
    object-position: 50% 100%;
}

@media (max-width: 575px) {
    .app-icon-lg,
    .app-icon-figure,
    .about-portrait {
        float: none;
        display: block;
        max-width: 60%;
        margin: 0 auto 1em;
    }
}

/* Phones: the About logo drops below the text instead of above it */
@media (max-width: 575px) {
    .about-card {
        display: flex;
        flex-direction: column;
    }

    .about-card .about-logo-link {
        order: 1;
    }
}

/* ACCESSABILITY REQUIRED */
.skip-to-main-content-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1em;
    background-color: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    opacity: 0;
}

.skip-to-main-content-link:focus {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
}
/* ---------- Case study layout (focus_laser.html) ----------
   One continuous article: readable text width, screenshots
   sized to their images so there is no empty space around them.
   All screenshots share one size (--shot-w). */
.case-study {
    --shot-w: 292px;
    padding: 2em 1.5em;
}

.case-study > * {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.case-study h4 {
    margin-top: 1.8em;
}

.case-study p,
.case-study li {
    font-size: 1.05em;
    line-height: 1.65;
}

.case-intro {
    display: flex;
    gap: 1.5em;
    align-items: center;
}

.case-icon {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    border-radius: 22.5%;
}

/* Space between the intro and a paragraph that follows it directly */
.case-intro + p {
    margin-top: 1.5em;
}

/* Small caption above the app name, e.g. "Free on iPhone" */
.case-eyebrow {
    margin-bottom: 0.15em;
    font-size: 0.85em !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Icon with the App Store button centred underneath */
.case-icon-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
    flex-shrink: 0;
}

.case-icon-store {
    display: block;
    width: 140px; /* same width as .case-icon */
}

/* "Free on iPhone": beside the name on wide screens, above the button on phones */
.case-eyebrow-phone {
    display: none;
}

.case-intro h2 {
    margin-bottom: 0.2em;
}

/* Subtitle on the app name's line, e.g. "Booty Hunt" (wraps under it if
   there is no room). Only Memory Pirates has one, so this targets the
   title only when a subtitle follows it. */
.case-intro h2:has(+ .case-subtitle) {
    display: inline-block;
    margin-right: 0.3em;
}

.case-subtitle {
    display: inline-block;
    font-family: 'Nunito', 'Varela Round', ui-rounded;
    font-size: 1.15em !important;
    font-weight: 300;
    line-height: 1.2 !important;
    margin-bottom: 0.5em;
}

.case-intro .lede {
    margin-bottom: 0.4em;
}

.case-meta {
    font-size: 0.9em !important;
    color: var(--muted);
    margin-bottom: 0;
}

.case-shots,
.case-shots-three {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    max-width: calc(3 * var(--shot-w) + 2em);
    margin: 1.2em auto 1.5em;
}

.case-shots figure {
    width: var(--shot-w);
    max-width: 100%;
}

/* Second row of shots shown only on phones (see the phone media query) */
.case-shots-phone-only {
    display: none;
}

.case-study figure {
    margin: 0;
}

.case-study figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.case-study figcaption {
    margin-top: 0.5em;
    font-size: 0.85em;
    text-align: center;
    color: var(--muted);
}

.case-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5em;
    align-items: start;
}

.case-split > div > p:first-child {
    margin-top: 0;
}

/* Themes shot: next to the landscape shot on phones, in the features row elsewhere */
.case-split-shots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.case-features {
    padding-left: 1.2em;
}

.case-features li {
    margin-bottom: 0.3em;
}

.shot-phone-only {
    display: none;
}

/* Wider screens: the row of three matches the text column width, and the
   landscape shot joins the top row, so the orientation section is text only. */
@media (min-width: 641px) {
    .case-shots-three {
        max-width: 760px;
        flex-wrap: nowrap;
    }

    .case-shots-three figure {
        width: calc((100% - 2em) / 3);
    }

    .case-split-shots {
        display: none;
    }

    .case-shots-four {
        max-width: 760px;
        flex-wrap: nowrap;
    }

    .case-shots-four figure {
        width: calc((100% - 3em) / 4);
    }
}

/* Phones: two images per row, everywhere */
@media (max-width: 640px) {
    .case-study {
        padding: 1.25em 1em;
    }

    .case-intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }

    .case-icon {
        width: 96px;
        height: 96px;
    }

    .case-icon-col {
        flex-direction: row; /* button beside the icon on phones */
        align-items: center;
        gap: 1em;
    }

    .case-icon-store {
        width: 120px; /* Apple's minimum badge width */
    }

    .case-eyebrow-phone {
        display: block;
        margin-bottom: 0.4em;
        font-size: 0.7em !important; /* fits within the 120px button */
        letter-spacing: 0.04em;
    }

    .case-eyebrow-wide {
        display: none;
    }

    .case-shots,
    .case-shots-three {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: none;
    }

    .case-shots figure {
        width: auto;
    }

    .case-shots-three figure:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 0.5em);
    }

    .shot-phone-only {
        display: block;
    }

    .shot-wide-only {
        display: none;
    }
}

/* Keep in-page jumps (e.g. about.html#connect) clear of the fixed navbar */
[id] {
    scroll-margin-top: 80px;
}

/* ---------- Parallax banner (index.html, focus_laser.html, focus_laser_support.html) ----------
   parallax.js moves the whole banner, edges included, at half the
   scroll speed. Only the content card scrolls at full speed, so it
   slides over both the banner and the page background around it. */
.parallax-hero {
    position: relative;
    z-index: 0;
    height: clamp(200px, 37.5vw, 70vh);
    overflow: hidden;
    background-color: #0B0B10; /* matches the banner's black, both themes */
    will-change: transform;
}

.parallax-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%; /* keep the laser line and title in view */
}

/* Content slides up over the bottom of the banner */
.parallax-content {
    position: relative;
    z-index: 1;
    margin-top: -2em;
}

/* Wide desktop views: overlap the banner further. Small and medium widths
   keep -2em, where the shorter banner would be mostly covered. */
@media (min-width: 1200px) {
    .parallax-content {
        margin-top: -10em;
    }
}

.parallax-content article {
    box-shadow: var(--shadow);
}

/* Memory Pirates banner (DemilitarizeEarth.png) is a portrait poster: show
   all of it, centred on a matching yellow, rather than cropping a slice */
.parallax-hero-poster {
    background-color: #ffe785;
}

.parallax-image-poster {
    object-fit: contain;
    object-position: 50% 50%;
}

/* About banner (jellyfish1.png) */
.parallax-image-about {
    object-position: 50% 45%;
}

/* Memory Pirates support banner (memory_pirates_privacy_banner.png): keep
   the chest and title centred when the wide banner crops top and bottom */
.parallax-image-mp-support {
    object-position: 50% 50%;
}

/* Home banner (Jellyfish2.png): keep the jellyfish's body in view */
.parallax-image-home {
    object-position: 50% 55%;
}

.support-page h1 {
    font-size: 2em;
    margin-bottom: 0.4em;
}

.support-page h2 {
    font-size: 1.5em;
    margin-top: 1.8em;
}

.support-page h3 {
    font-size: 1.15em;
    margin-top: 1.2em;
}