/* Landing-page layout and a few typographic corrections.

   The brand palette lives in assets/extra.css, which loads first and is the
   single source for --md-primary-*, --md-accent-* and the link colour. */

th {
    background-color: var(--md-default-fg-color--lightest);
}

/* Hero --------------------------------------------------------------------
   Rendered by overrides/home.html, which puts it outside the width-capped
   content column so the background reaches the window edges on its own. Moving
   it into the page content caps it at the column and needs a `calc(50% - 50vw)`
   full-bleed hack to escape again; keeping it in the template avoids that.

   Its <h1> is the page's visible title; .cc-page-title below is the hidden
   counterpart that keeps Material from injecting a second one. */
.hero {
    text-align: center;
    padding: 4rem 1rem;
    background: var(--md-primary-fg-color);
    color: var(--md-primary-bg-color);
}

/* Material renders a title into any page whose content has none, using the nav
   label — "Home" here, competing with the hero above it. The page carries this
   heading purely to suppress that. */
.md-typeset .cc-page-title {
    display: none;
}

/* With the title hidden, the "edit this page" pencil is left floating alone in
   the corner. A landing page is not one anybody edits. */
.md-content__inner:has(> .cc-page-title) .md-content__button {
    display: none;
}

/* Scales down rather than overflowing the viewport: at a flat 3rem the title
   was wider than a phone screen and clipped at both ends. */
.hero h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
    color: unset;
}

/* The permalink anchor every heading gets is noise on a hero title. */
.hero h1 .headerlink {
    display: none;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    width: min(96%, 34rem);
    margin-left: auto;
    margin-right: auto;
}

.hero .twemoji {
    --md-icon-size: 1.125em;

    display: inline-flex;
    height: var(--md-icon-size);
    vertical-align: text-top;
}

.hero .md-button {
    background: var(--cc-hero-button-bg);
    color: black;
    border: none;
    border-radius: unset;
    display: inline-block;
}

.hero .md-button:hover {
    /* Was --commit-check-logo-color-green, which is not defined anywhere: the
       hover simply did nothing. */
    background: var(--cc-brand-light);
    color: black;
    border: none;
}

.md-typeset .md-button:hover {
    color: black;
}

/* Community section -------------------------------------------------------- */
.community-section {
    background: var(--md-default-fg-color--lightest);
    padding: 3rem 2rem;
    margin: 3rem -1.5rem 0 -1.5rem;
    text-align: center;
    border-radius: 1rem 1rem 0 0;
}

.community-section h2 {
    color: var(--md-primary-fg-color);
    margin-bottom: 1rem;
}

/* Code block enhancements */
.md-typeset pre > code {
    border-radius: 0.5rem;
}

/* Button styling improvements */
.md-button {
    border-radius: 2rem;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.md-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Trusted-by section ------------------------------------------------------- */
.trusted-by {
    text-align: center;
    padding: 3rem 0;
    background: var(--md-default-fg-color--lightest);
    margin: 3rem -1.5rem;
    border-radius: 1rem;
}

.trusted-by p {
    font-size: 1.1rem;
    color: var(--md-default-fg-color--light);
    margin-bottom: 2rem;
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 0 2rem;
}

.logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    padding: 1rem;
    border-radius: 0.5rem;
}

.logo-item:hover {
    transform: translateY(-4px);
    background: var(--md-default-bg-color);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.logo-item img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 0.5rem;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.logo-item:hover img {
    filter: grayscale(0%);
}

.logo-item span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--md-default-fg-color--light);
}

@media screen and (max-width: 768px) {
    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0 1rem;
    }
}

/* Both tinted bands above bleed past the content column with a negative
   margin. Material sets the root font to 125%, so -1.5rem is 30px — but below
   its 76.25em breakpoint the column only has a 16px gutter to give back. The
   bands hung 14px off the right edge, which made the whole page scroll
   sideways on every phone and tablet. Match the gutter there instead.

   (76.25em is Material's own breakpoint. Media-query em units resolve against
   the initial 16px font size rather than the 125% root, so this is 1220px.) */
@media screen and (max-width: 76.25em) {
    .trusted-by,
    .community-section {
        margin-left: -0.8rem;
        margin-right: -0.8rem;
    }
}

/* Mobile navigation drawer -------------------------------------------------
   Material leaves this at its own default indigo, which clashes with the
   header right above it. */
@media screen and (max-width: 76.2344em) {
    .md-nav--primary .md-nav__title[for="__drawer"] {
        background-color: var(--md-primary-fg-color);
    }
}

/* "important" admonition, which Material ships without a colour of its own. */
.md-typeset .admonition.important,
.md-typeset details.important {
    border-color: #00b8d4;
}

.md-typeset .important > .admonition-title::before,
.md-typeset .important > summary::before {
    background-color: #00b8d4;
    -webkit-mask-image: var(--md-admonition-icon--info);
    mask-image: var(--md-admonition-icon--info);
}

.md-typeset .important > .admonition-title,
.md-typeset .important > summary {
    background-color: #00b8d41a;
}

/* Annotation markers are round, matching the numbered badges they pair with. */
a.md-annotation__index {
    border-radius: 2.2ch;
}