/*
    Cwellt website styles.

    How this file is organised:
    1. Fonts
    2. Design variables (:root): colors, text, spacing, sizes. Change a value here and it changes everywhere.
    3. Base and shared text styles (what many parts of the page have in common)
    4. One block per part of the page, in the order they appear.

    The lighthouse scene (tower, light beam, caption) is in lighthouse.css. The build joins both files into one,
    so the browser still downloads a single stylesheet.

    Naming: variables are --category-detail (--color-text, --text-size-large, --space-small).
    Classes say what the thing is (.language-switcher, .product-row), never how it looks.
    Units: rem for sizes and spacing (1rem = 16px). px only for borders, rings and drawn effects.
    Formatting: 4 spaces, one declaration per line.
*/

/* 1. Fonts ------------------------------------------------------------ */

@font-face {
    font-family: "Schibsted Grotesk";
    font-weight: 400 900;
    font-display: swap;
    src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Spline Sans Mono";
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/spline-sans-mono-latin.woff2") format("woff2");
}

/* 2. Design variables ------------------------------------------------- */

:root {
    color-scheme: light dark;

    /* Colors. light-dark(a, b) picks a in light mode and b in dark mode. */
    --color-background: light-dark(#F9F8F4, #1E1E1D);
    --color-surface: light-dark(#E4E1D8, #323230);
    --color-text: light-dark(#111111, #F0EFEA);
    --color-text-muted: light-dark(#5C5B57, #AAA9A2);
    --color-accent: light-dark(#FFB703, #E9AA2F);
    --color-accent-soft: light-dark(rgba(255, 183, 3, .28), rgba(233, 170, 47, .24));
    --color-lighthouse-beam: light-dark(rgba(255, 183, 3, .68), rgba(233, 170, 47, .42));
    --color-text-on-accent: #111111;

    /* Fonts. "monospace" is the typewriter-style font used for small technical labels. */
    --font-text: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-monospace: "Spline Sans Mono", ui-monospace, Menlo, monospace;

    /*
        Text sizes. Running text is 16px, the browser default, so it is only set where it differs from that.
        Fixed sizes: 12 and 18 px (16 px is named too, for the few places that need it). Headings and display text
        grow with the page width (cqi = 1% of the page width).
    */
    --text-size-small: .75rem;
    --text-size-medium: 1rem;
    --text-size-large: 1.125rem;
    --text-size-intro: clamp(1.125rem, 1.5cqi, 1.375rem);
    --text-size-heading-small: clamp(1.375rem, 2.1cqi, 1.875rem);
    --text-size-heading-medium: clamp(1.375rem, 2.2cqi, 2rem);
    --text-size-heading-large: clamp(2rem, 4.4cqi, 4rem);
    --text-size-hero: clamp(2.25rem, 9cqi, 8.125rem);
    --text-size-signature: clamp(5rem, 21cqi, 18.75rem);

    /* Normal text is weight 400 (the browser default), so there is no variable for it. */
    --font-weight-medium: 500;
    --font-weight-extra-bold: 850;

    /* Big bold text is tightened a little; small uppercase labels are opened up so they stay readable. */
    --letter-spacing-tight: -.05em;
    --letter-spacing-uppercase: .08em;

    /* Big bold text is tight; everything else is normal (set once on the body). */
    --line-height-tight: .95;
    --line-height-normal: 1.5;

    /* Spacing. Fixed steps: 4, 8, 12, 16, 24 and 40 px. */
    --space-tiny: .25rem;
    --space-small: .5rem;
    --space-medium: .75rem;
    --space-large: 1rem;
    --space-extra-large: 1.5rem;
    --space-huge: 2.5rem;

    /* Layout spacing that grows with the page width. --section-spacing is used above and below every section. */
    --page-side-padding: clamp(1.125rem, 4.4cqi, 4.5rem);
    --section-spacing: clamp(2.5rem, 5cqi, 4.5rem);
    --card-padding: clamp(1.5rem, 2.4cqi, 2.25rem);

    --touch-target-size: 2.75rem;

    /* Maximum line lengths, in characters. */
    --line-length-short: 44ch;
    --line-length: 58ch;
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

/* 3. Base and shared text styles -------------------------------------- */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-text);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
}

/* Browser default margins are removed; each part adds only the space it needs. */
h1,
h2,
h3,
p,
dl,
dd,
ul {
    margin: 0;
}

p,
dd,
li {
    text-wrap: pretty;
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
}

/* All headings are big bold text: tight letter spacing and line height. */
h1,
h2,
h3 {
    font-weight: var(--font-weight-extra-bold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

/*
    Text styles. Add these classes in the HTML to any element that should look this way,
    next to its own class (for example: class="product-domain text-label").
*/

/* Small technical label: typewriter font at the smallest size. */
.text-label {
    font-family: var(--font-monospace);
    font-size: var(--text-size-small);
}

/* Big bold text that is not a heading: the logo, product names, the invitation to get in touch and the signature. */
.text-display {
    font-weight: var(--font-weight-extra-bold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

/* Secondary text in grey. */
.text-muted {
    color: var(--color-text-muted);
}

/* .page lets sizes depend on the page width (the cqi unit). .page-content is the centered column. */
.page {
    container-type: inline-size;
}

.page-content {
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 var(--page-side-padding);
}

/* 4. Parts of the page ------------------------------------------------ */

/* Small highlighted title above each section ("Quiénes somos", "Qué hacemos"...) */
.section-label {
    display: inline-block;
    margin-bottom: var(--space-extra-large);
    padding: .375rem var(--space-medium);
    background: var(--color-accent-soft);
    letter-spacing: var(--letter-spacing-uppercase);
    text-transform: uppercase;
}

/* Site header: logo, language switcher and light/dark button */
.site-header {
    /* Stays at the top while scrolling, over the page content (z-index), which shows blurred through it. */
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--color-background) 85%, transparent);
    backdrop-filter: blur(.75rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-large);
    /* It spans the side padding too, like the hero scene, so the scene does not show beside it. */
    margin: 0 calc(var(--page-side-padding) * -1);
    padding: var(--space-extra-large) var(--page-side-padding);
    border-bottom: 1px solid var(--color-surface);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-medium);
    font-size: var(--text-size-intro);
    text-decoration: none;
}

.logo::before {
    content: "";
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 5px var(--color-accent-soft);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: var(--space-small);
}

.language-switcher {
    display: flex;
    gap: var(--space-tiny);
}

.language-switcher a {
    display: grid;
    place-items: center;
    min-width: var(--touch-target-size);
    height: var(--touch-target-size);
    padding: 0 var(--space-small);
    color: var(--color-text-muted);
    text-decoration: none;
}

.language-switcher a[aria-current] {
    color: var(--color-text);
    box-shadow: inset 0 -3px 0 var(--color-accent);
}

/* Light/dark button. Shows a moon in light mode (go dark) and a sun in dark mode (go light). */
.theme-toggle {
    display: grid;
    place-items: center;
    width: var(--touch-target-size);
    height: var(--touch-target-size);
    border: 1px solid var(--color-surface);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}

.theme-toggle:hover {
    border-color: var(--color-text);
}

.theme-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle .icon-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

/* Hero: big title with the lighthouse scene behind it (the scene is in lighthouse.css) ----- */

.hero {
    position: relative;
    padding: var(--section-spacing) 0 calc(var(--section-spacing) + var(--space-huge));
    /* Tall enough for the whole tower (it is about 2.64 times as tall as it is wide). --tower-width is in lighthouse.css. */
    min-height: calc(var(--tower-width) * 2.64 + 4.5rem);
}

.hero-text {
    position: relative;
}

h1 {
    max-width: min(100%, 76cqi, 68.75rem);
    font-size: var(--text-size-hero);
    text-wrap: balance;
}

/* Second half of the title (", versión tras versión.") in grey */
.hero-title-secondary {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.hero-intro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-extra-large) var(--space-huge);
    margin-top: var(--space-huge);
}

/* On narrow pages the text gets narrower to leave room for the tower, instead of the tower dropping below it. */
.hero-intro > div {
    flex: 0 1 var(--line-length);
    min-width: 0;
    max-width: calc(100cqi - 2 * var(--page-side-padding) - var(--tower-width) * .84 - var(--space-extra-large));
}

.hero-tagline {
    display: flex;
    align-items: center;
    gap: var(--space-medium);
}

.hero-tagline::before {
    content: "";
    flex: none;
    width: .5rem;
    height: .5rem;
    margin: 0 var(--space-tiny);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.hero-description {
    margin-top: var(--space-large);
    font-size: var(--text-size-intro);
}

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

.section {
    padding: var(--section-spacing) 0;
    border-top: 1px solid var(--color-surface);
}

/* The hero scene already ends with its own horizon line. */
.hero + .section {
    border-top: 0;
}

/* About us: facts on the left, big statement on the right */
.about-section {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-extra-large) var(--space-huge);
}

.about-facts {
    flex: 1 1 15rem;
}

.about-facts dl div {
    padding: var(--space-medium) 0;
    border-top: 1px solid var(--color-surface);
}

.about-facts dd {
    margin-top: var(--space-tiny);
    font-weight: var(--font-weight-medium);
}

.about-statement {
    flex: 2.4 1 32.5rem;
    min-width: 0;
    font-size: var(--text-size-heading-medium);
    font-weight: var(--font-weight-medium);
}

/* Services: one featured card and two smaller ones */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-medium);
}

/* Round yellow badge with the service number (01, 02, 03) */
.service-number {
    display: grid;
    place-items: center;
    width: var(--touch-target-size);
    height: var(--touch-target-size);
    margin: var(--space-small);
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    box-shadow: 0 0 0 .5rem var(--color-accent-soft);
    font-weight: var(--font-weight-medium);
}

.service-featured {
    flex: 1.5 1 28.75rem;
    min-width: 0;
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-huge);
    background: var(--color-surface);
}

.service-featured h3 {
    font-size: var(--text-size-heading-large);
    overflow-wrap: break-word;
}

.service-featured p {
    margin-top: var(--space-large);
    max-width: var(--line-length-short);
    font-size: var(--text-size-large);
}

.services-secondary {
    flex: 1 1 20rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
}

.service-card {
    flex: 1;
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
    border: 1px solid var(--color-surface);
    transition: border-color .2s;
}

.service-card:hover {
    border-color: var(--color-text);
}

.service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-medium);
}

.service-card h3 {
    margin-top: var(--space-large);
    font-size: var(--text-size-heading-small);
    overflow-wrap: break-word;
}

/* Products: one row each (name + tag, description, domain) */
.product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-medium) var(--space-huge);
    padding: var(--space-extra-large) 0;
    border-bottom: 1px solid var(--color-surface);
    text-decoration: none;
}

.product-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-medium);
}

.product-title {
    font-size: var(--text-size-heading-medium);
}

.product-tag {
    padding: var(--space-tiny) var(--space-small);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-style: normal;
}

/* Grey tag for a product that is paused (Operon) */
.product-tag-paused {
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.product-description {
    max-width: var(--line-length);
    padding-top: var(--space-tiny);
}

.product-domain {
    justify-self: start;
    padding-top: var(--space-small);
    white-space: nowrap;
    transition: transform .2s;
}

a.product-row:hover .product-domain {
    transform: translateX(var(--space-tiny));
}

div.product-row .product-domain {
    color: var(--color-text-muted);
}

/* From 45rem the row becomes three columns: name, description, domain */
@container (min-width: 45rem) {
    .product-row {
        grid-template-columns: minmax(11.25rem, 1fr) minmax(0, 2fr) 11rem;
    }

    .product-domain {
        justify-self: end;
    }
}

/* Contact and footer: yellow block with the invitation to get in touch, company details and the big signature ----- */

.contact-section {
    overflow: hidden;
    background-color: var(--color-accent);
    background-image: repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-text-on-accent) 6%, transparent) 0 1px,
        transparent 1px 16px
    );
    color: var(--color-text-on-accent);
    /* The footer text is medium weight so it reads well on the strong yellow. */
    font-weight: var(--font-weight-medium);
}

.contact-section .page-content {
    padding-top: var(--section-spacing);
    padding-bottom: 0;
}

.contact-section .section-label {
    background: color-mix(in srgb, var(--color-text-on-accent) 14%, transparent);
}

.contact-text {
    max-width: 40ch;
    font-size: var(--text-size-heading-small);
    font-weight: var(--font-weight-extra-bold);
    line-height: var(--line-height-tight);
}

/* Three columns: company, address and phones, legal links */
.company-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-extra-large) var(--space-huge);
    margin-top: var(--space-huge);
    padding-top: var(--space-extra-large);
    border-top: 1.5px solid var(--color-text-on-accent);
}

.company-details > div,
.company-details > address,
.legal-links {
    display: flex;
    flex-direction: column;
    font-style: normal;
}

.company-details b {
    font-weight: var(--font-weight-extra-bold);
}

.company-details-spacer {
    height: var(--space-medium);
}

.company-details a,
.legal-links a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-thickness .15s;
}

.company-details a:hover,
.legal-links a:hover {
    text-decoration-thickness: 3px;
}

.legal-links {
    gap: var(--space-tiny);
}

.copyright {
    margin-top: var(--space-huge);
    padding: var(--space-medium) 0;
    border-top: 1.5px solid var(--color-text-on-accent);
    border-bottom: 1.5px solid var(--color-text-on-accent);
}

/* Huge "Cwellt" at the very bottom, slightly cut by the edge on purpose */
.signature {
    margin: clamp(1rem, 2cqi, 2rem) -.04em -.1em 0;
    font-size: var(--text-size-signature);
    text-align: right;
    line-height: .74;
    white-space: nowrap;
    user-select: none;
}

/* Text pages: the five legal pages and the 404 page ------------------- */

.text-page {
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--section-spacing) 0;
}

.text-page h1 {
    max-width: none;
    font-size: var(--text-size-heading-large);
}

.text-page h2 {
    margin-top: var(--space-huge);
    font-size: var(--text-size-heading-small);
}

.text-page p,
.text-page ul {
    margin-top: var(--space-extra-large);
    font-size: var(--text-size-large);
}

.text-page h2 + p,
.text-page h2 + ul {
    margin-top: var(--space-large);
}

.text-page ul {
    padding-left: var(--space-huge);
}

.text-page li {
    margin-top: var(--space-small);
}

/* Smaller list used for the company identity data in the legal notice */
.text-page .data-list {
    font-size: var(--text-size-medium);
}

.text-page .last-updated {
    margin-top: var(--space-huge);
    font-size: var(--text-size-medium);
}

/* Name, role and date of whoever approved the policy */
.text-page .approval-block {
    margin-top: var(--space-huge);
    padding-top: var(--space-extra-large);
    border-top: 1px solid var(--color-surface);
}

.text-page .back-link {
    display: inline-block;
    margin-top: var(--space-huge);
}

/*
    Lighthouse scene of the hero: ground hatching, horizon line, the tower (drawn in tower.svg),
    its lamp, the rotating light beam and the caption under the horizon.

    The build joins this file to style.css (this one goes last), so it can use the colors and spacing
    defined there. Two rules in style.css depend on the variables defined here: .hero (minimum height)
    and .hero-intro (maximum width of the text).
*/

:root {
    /* The tower is cut by the right edge up to a 90rem page; on wider pages it slides in until it is whole. */
    --tower-width: clamp(6.25rem, 17.5cqi, 15.75rem);
    --tower-right-offset: calc(var(--tower-width) * -0.16 + clamp(0px, 100cqi - 90rem, var(--tower-width) * 0.16));
    --lamp-size: clamp(.75rem, 1.2cqi, 1.125rem);
}

/* The scene fills the hero edge to edge: ground hatching, horizon line, tower, light beam and caption. */
.hero-scene {
    position: absolute;
    inset: 0 calc(var(--page-side-padding) * -1);
    overflow: hidden;
    pointer-events: none;
    background-image: repeating-linear-gradient(to bottom, transparent 0 11px, var(--color-surface) 11px 12px);
    background-size: 100% 20px;
    background-position: bottom;
    background-repeat: no-repeat;
}

.horizon {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 20px);
    height: 1px;
    background: var(--color-text);
    opacity: .35;
}

.tower {
    position: absolute;
    right: var(--tower-right-offset);
    bottom: 20px;
    width: var(--tower-width);
    aspect-ratio: 120 / 316;
    opacity: .92;
}

.tower svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Windows and details are drawn in the background color on top of the dark tower shape. */
.tower-cutouts {
    fill: var(--color-background);
}

.tower-cutout-lines {
    fill: none;
    stroke: var(--color-background);
}

.obelisk-gap {
    stroke: var(--color-background);
    stroke-width: 5;
    stroke-linejoin: round;
    paint-order: stroke;
}

.lamp {
    position: absolute;
    left: 50%;
    top: 20%;
    width: var(--lamp-size);
    height: var(--lamp-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow:
        0 0 0 calc(var(--lamp-size) * .5) var(--color-accent-soft),
        0 0 70px 26px var(--color-accent-soft);
}

/* "Torre de Hércules · coordinates" under the horizon line */
.tower-caption {
    position: absolute;
    z-index: 1;
    right: calc(var(--tower-right-offset) + var(--tower-width) + var(--space-large));
    bottom: var(--space-tiny);
    padding: 0 var(--space-small);
    background: var(--color-background);
    letter-spacing: var(--letter-spacing-uppercase);
    white-space: nowrap;
}

/* A big conic gradient that rotates slowly around the lamp. */
.light-beam {
    position: absolute;
    left: 50%;
    top: 20%;
    width: 2400px;
    height: 2400px;
    margin: -1200px 0 0 -1200px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 252deg,
        var(--color-lighthouse-beam) 260deg 280deg,
        transparent 292deg 360deg
    );
    mask-image: radial-gradient(circle closest-side, #000 0 25%, transparent 93%);
    animation: sweep 10s ease-in-out infinite alternate;
}

@keyframes sweep {
    from {
        transform: rotate(-16deg);
    }

    to {
        transform: rotate(12deg);
    }
}

@keyframes sweep-narrow {
    from {
        transform: rotate(22deg);
    }

    to {
        transform: rotate(52deg);
    }
}

/* Narrow pages (under 47.5rem): the beam points down-left and the caption moves to the left edge. */
@container (max-width: 47.5rem) {
    .light-beam {
        animation-name: sweep-narrow;
    }

    .tower-caption {
        right: auto;
        left: var(--page-side-padding);
    }
}

@media (prefers-reduced-motion: reduce) {
    .light-beam {
        animation: none;
    }
}