/*
Theme Name:   Swyft Child (Rubikify)
Theme URI:    https://rubikify.com
Description:  Rubikify's changes to Swyft: an island header carrying Shopify's App Store badge, and a real front page. Nothing here touches the parent, so Swyft can be updated.
Author:       Craftshift
Template:     swyft
Version:      1.0
Text Domain:  swyft-child
*/

/* =========================================================================
   Tokens
   ========================================================================= */
:root {
    --rf-ink: #14110f;
    --rf-soft: #5d554f;
    --rf-muted: #8a817a;
    --rf-line: #e7e2dd;
    --rf-line-strong: #d6cec7;
    --rf-wash: #faf8f6;
    --rf-surface: #fff;
    --rf-accent: #8b4513;
    --rf-accent-wash: #f6efe8;
    --rf-radius: 16px;
    --rf-shadow: 0 6px 24px rgba(20, 17, 15, .07);
    --rf-header-gap: 12px;
}

/* =========================================================================
   Header: an island, not a bar

   Swyft draws the header as a full-width strip. craftshift.com,
   rubikvariantimages.com and rubikcombinedlistings.com all float it as a card
   instead, and a reader moving between the four sites should not feel they
   have left. The <header> keeps its own box; the card is .cs-container inside
   it, which is the element that already holds the right width.
   ========================================================================= */
/*
 * The rail behind the card is transparent, and stays transparent. The page
 * shows through the gap around the card, which is the point of a floating
 * header: it sits on the page rather than replacing the top of it. The card
 * itself is opaque, so nothing reads through the header proper.
 *
 * It was frosted before this. The blur hid the content behind it and drew a
 * visible seam down both sides of the page where the filtered region ended; a
 * white tint under it painted a pale band over any hero that is not white.
 * Stickiness itself is the theme's, set by navbar_sticky.
 */
.cs-header.cs-header-stretch {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-block: var(--rf-header-gap);
    z-index: 300;
}
.cs-header.cs-header-stretch > .cs-container {
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: 18px;
    box-shadow: var(--rf-shadow);
    /* Matches the content container's own inline padding, so the logo lines up
       with the first letter of the page beneath it. It was 20 and the header
       sat four pixels inside everything else. */
    padding-inline: 24px;
}
.cs-header.cs-header-stretch .cs-header__inner { min-height: 70px; }
/* 60px inside a 64px row left four pixels of air and made the header look
   stuffed. 42 in a 70px row is the same proportion the other three sites use. */
.cs-header.cs-header-stretch .cs-logo img { height: 42px; width: 42px; }

/* The header never hides. It used to tuck away on the way down the page below
   1000px, which bought reading space and cost the install badge; asked for
   twice, it stays. */
@media (prefers-reduced-motion: reduce) {
    .cs-header.cs-header-stretch { transition: none; }
}

/*
 * The App Store badge. The link keeps its text, which is what a screen reader
 * and a crawler read; the badge is painted behind it and the text is taken off
 * screen. A background rather than an <img> because the theme builds this
 * markup with no filter on it, and because a background cannot reflow the
 * header while it decodes. Sized in px for the same reason.
 */
.cs-header__custom-button.cs-button {
    background: transparent var(--rf-badge) center / contain no-repeat !important;
    border: 0 !important;
    border-radius: 6px;
    box-shadow: none !important;
    color: transparent !important;
    display: block;
    font-size: 0 !important;
    /* The badge is 166x44 at native size. Below that the "Available on" line
       is about six pixels tall, which is a shape rather than a word; it started
       at 36 and could not be read. 47 in a 70px row is what the other three
       sites use, so all four read at the same weight. */
    height: 47px;
    line-height: 0 !important;
    min-height: 0;
    padding: 0 !important;
    width: 178px;
}
.cs-header__custom-button.cs-button:hover { opacity: .88; }
@media (max-width: 1100px) {
    .cs-header__custom-button.cs-button { height: 38px; width: 144px; }
}

/* Swyft marks the current menu item with a bar in the theme accent, which is
   still the stock blue. Everything else in this header is black, white and the
   logo, so the blue read as a stray. Only the header is changed: the accent is
   also the link colour in post bodies, where a blue link is the convention and
   worth leaving alone. */
.cs-header__nav .current-menu-item > a::after,
.cs-header__nav .current_page_item > a::after,
.cs-header__nav .current-menu-ancestor > a::after,
.cs-header__nav-inner > li > a::after { background-color: var(--rf-ink); }

/* =========================================================================
   Front page
   =========================================================================

   Measure, before anything else. Swyft's container is 1648px, which is fine
   for a three-column post grid and far too wide for a page made of sentences:
   a 741px paragraph inside a 1600px row is not a layout, it is a column
   floating in white. The container is narrowed to 1280 site-wide further down,
   and everything here is sized against that.
   ========================================================================= */
.rf-home { color: var(--rf-ink); }
.rf-home section { padding-block: 72px; }
.rf-home section + section { border-top: 1px solid var(--rf-line); }

/* Sections sit inside the theme's container, so a wash is a rounded panel
   rather than a full-bleed band; a full-bleed trick here would fight the
   theme's own horizontal overflow rules. Its own border replaces the hairline
   that would otherwise double up against it. */
.rf-home section.rf-wash {
    background: var(--rf-wash);
    border: 1px solid var(--rf-line);
    border-radius: 20px;
    margin-block: 44px;
    padding: 56px 44px;
}
.rf-home section.rf-wash,
.rf-home section.rf-wash + section { border-top-color: transparent; }
.rf-home section.rf-wash + section { border-top: 0; padding-top: 28px; }
.rf-home section:has(+ section.rf-wash) { padding-bottom: 28px; }

.rf-home h2 { font-size: clamp(1.55rem, 2.4vw, 1.95rem); letter-spacing: -.028em; line-height: 1.18; margin: 0; }
.rf-home h3 { font-size: 1.05rem; letter-spacing: -.015em; line-height: 1.35; margin: 0; }

/*
 * Every gap below is declared at this specificity on purpose. A blanket
 * `.rf-home p { margin: 0 }` used to sit here, and because it outranks a
 * single class it silently zeroed the top margin on every lede and every meta
 * row on the page. Headings then ran straight into their own subtitles, which
 * is most of what made the first version look unfinished.
 */
.rf-home p { margin: 0; }
.rf-home .rf-lede {
    color: var(--rf-soft);
    font-size: 1.05rem;
    line-height: 1.66;
    margin-top: 16px;
    max-width: 66ch;
}
.rf-home .rf-head { margin-bottom: 40px; max-width: 760px; }
.rf-home .rf-head .rf-lede { margin-top: 12px; }

/* ---- Hero -------------------------------------------------------------
   Centred, like craftshift.com and rubikvariantimages.com. Rubikify has no
   product shot to put beside a left-aligned column, and inventing one to fill
   the right half would be decoration standing in for content. */
.rf-home .rf-hero { padding-block: 64px 72px; text-align: center; }
.rf-home .rf-hero h1 {
    font-size: clamp(2.15rem, 4.2vw, 3.15rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.08;
    margin: 0 auto;
    max-width: 17ch;
}
.rf-home .rf-hero .rf-lede {
    font-size: 1.13rem;
    margin: 22px auto 0;
    max-width: 68ch;
}
.rf-home .rf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.rf-home .rf-hero .rf-actions { justify-content: center; }

.rf-btn {
    align-items: center;
    background: var(--rf-ink);
    border: 1.5px solid var(--rf-ink);
    border-radius: 10px;
    color: #fff;
    display: inline-flex;
    font-size: .95rem;
    font-weight: 600;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    text-decoration: none;
    transition: transform .14s, background .14s, border-color .14s;
}
.rf-btn:hover { background: #000; color: #fff; transform: translateY(-1px); }
.rf-btn--ghost { background: var(--rf-surface); border-color: var(--rf-line-strong); color: var(--rf-ink); }
.rf-btn--ghost:hover { background: var(--rf-surface); border-color: var(--rf-accent); color: var(--rf-ink); }

/* Three facts, read as one line with hairline separators rather than as three
   stranded phrases spaced across 1,600px. */
.rf-home .rf-meta {
    color: var(--rf-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .88rem;
    gap: 6px 18px;
    justify-content: center;
    margin-top: 30px;
}
.rf-home .rf-meta span { align-items: center; display: inline-flex; gap: 18px; }
.rf-home .rf-meta span:not(:last-child)::after {
    background: var(--rf-line-strong);
    content: "";
    height: 12px;
    width: 1px;
}

/* ---- Cards ------------------------------------------------------------- */
.rf-grid { display: grid; gap: 20px; }
.rf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rf-card {
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: var(--rf-radius);
    display: block;
    padding: 26px;
    text-decoration: none;
}
a.rf-card { color: inherit; transition: border-color .14s, box-shadow .14s, transform .14s; }
a.rf-card:hover { border-color: var(--rf-line-strong); box-shadow: var(--rf-shadow); transform: translateY(-2px); }
.rf-home .rf-card p { color: var(--rf-soft); font-size: .94rem; line-height: 1.6; margin-top: 10px; }
.rf-card__tag {
    color: var(--rf-muted);
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

/* The two routes. This is the spine of the page: a reader arrives with one of
   exactly two problems, and everything else is a detour until they have picked. */
.rf-route { display: flex; flex-direction: column; padding: 32px; }
.rf-route h3 { font-size: 1.26rem; line-height: 1.3; }
.rf-route ul { list-style: none; margin: 20px 0 0; padding: 0; }
.rf-route li { color: var(--rf-soft); font-size: .94rem; line-height: 1.6; padding: 6px 0 6px 24px; position: relative; }
.rf-route li::before { color: var(--rf-accent); content: "\2192"; left: 0; position: absolute; }
.rf-route__foot { border-top: 1px solid var(--rf-line); margin-top: auto; padding-top: 22px; }
.rf-route__foot > p + p { margin-top: 12px; }
.rf-route__foot a { color: var(--rf-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rf-home .rf-route__rating { color: var(--rf-muted); display: block; font-size: .86rem; margin-top: 8px; }

/* ---- Start here --------------------------------------------------------
   The label goes to the far edge rather than trailing the title, so a wide row
   reads as a table and not as a short line with a long tail of nothing. */
.rf-list { list-style: none; margin: 0; padding: 0; }
.rf-list li + li { border-top: 1px solid var(--rf-line); }
.rf-list a {
    align-items: baseline;
    color: var(--rf-ink);
    display: flex;
    flex-wrap: wrap;
    font-size: 1.02rem;
    font-weight: 600;
    gap: 4px 24px;
    justify-content: space-between;
    min-height: 44px;
    padding: 17px 0;
    text-decoration: none;
}
.rf-list a:hover { color: var(--rf-accent); }
.rf-list span { color: var(--rf-muted); font-size: .85rem; font-weight: 500; letter-spacing: .01em; }

/* ---- Topics ------------------------------------------------------------ */
.rf-tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.rf-tags a {
    align-items: center;
    background: var(--rf-surface);
    border: 1px solid var(--rf-line);
    border-radius: 999px;
    color: var(--rf-ink);
    display: inline-flex;
    font-size: .92rem;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    text-decoration: none;
    transition: border-color .14s, color .14s;
}
.rf-tags a:hover { border-color: var(--rf-accent); color: var(--rf-accent); }
.rf-tags b { color: var(--rf-muted); font-weight: 500; }

/* ---- Closer ------------------------------------------------------------ */
.rf-closer { text-align: center; }
.rf-home .rf-closer .rf-lede { margin-inline: auto; }
.rf-home .rf-closer .rf-actions { justify-content: center; }
.rf-badge { display: inline-block; line-height: 0; }
.rf-badge img { border-radius: 6px; display: block; height: 46px; width: 174px; }
.rf-badge:hover { opacity: .88; }

@media (max-width: 900px) {
    .rf-home section { padding-block: 52px; }
    .rf-home section.rf-wash { margin-block: 32px; padding: 38px 24px; }
    .rf-grid--2, .rf-grid--3 { grid-template-columns: 1fr; }
    .rf-home .rf-hero { padding-block: 40px 48px; }
    .rf-home .rf-hero h1 { max-width: none; }
    .rf-home .rf-meta { gap: 6px 14px; }
    .rf-list a { justify-content: flex-start; }
}

/* =========================================================================
   Layout
   ========================================================================= */

/*
 * 1648px is the theme's container. It suits a three-column post grid and
 * nothing else on this site: it made the header island four pixels wider than
 * the content beneath it, stretched a six-item link list across 1,530px, and
 * gave the tool cards 521px each to hold two lines of text. 1280 lines the
 * header up with the content and puts the post cards back at a card's size.
 */
.cs-container { max-width: 1280px; }

/* The front page has no sidebar, so the content column takes the whole
   container rather than leaving a third of it blank. */
.rf-front .cs-site-content.rf-fullwidth .cs-main-content,
.rf-front #primary.rf-home { max-width: none; width: 100%; }
.rf-front .cs-sidebar { display: none; }

/* The theme leaves room above the content for the cover it would normally
   paint there. The front page has its own hero, so that is just a gap. */
.rf-front .cs-site-content,
.rf-front .cs-site-content .cs-main-content { margin-top: 0; }

/* The badge in the mobile header. Sized to sit beside the search toggle on a
   360px screen without pushing the logo off centre. */
.rf-mobile-badge { display: block; flex-shrink: 0; line-height: 0; }
.rf-mobile-badge img { border-radius: 5px; display: block; height: 34px; width: 128px; }
@media (max-width: 480px) {
    .cs-header__inner-mobile .cs-logo img { height: 44px; width: 44px; }
    .rf-mobile-badge img { height: 30px; width: 113px; }
}

/* A single card left over on the last row reads as a mistake sitting in the
   left corner. Centred, it reads as the end of the list. Seven tools will
   never tile evenly into three columns, so this is the shape of the problem,
   not a one-off. */
@media (min-width: 901px) {
    .rf-grid--3 > :last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* The theme reserves 104px under the content for a widgetised footer area this
   site does not use, which left the closing CTA stranded above a gap. The last
   section keeps its own padding, and that is the whole distance to the footer. */
.rf-front .cs-site-content { margin-bottom: 0; }
.rf-home > section:last-child { padding-bottom: 80px; }

/* The footer menu is eight links centre-aligned in a wrapping row, which came
   out ragged: two on one line, one on the next, two on the next. Left-aligned,
   the same wrap lands flush and the eye has an edge to follow. Columns were
   the first attempt and were worse: the centre column is narrow and the longer
   domain names ran into each other. */
.cs-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 26px;
    justify-content: flex-start;
    text-align: left;
}
.cs-footer__col.cs-col-center { flex: 1 1 auto; }
@media (max-width: 720px) {
    .cs-footer__nav { justify-content: center; text-align: center; }
}