/* =============================================================================
   Swaleh's Mortgage University — the hub, the vertical video, related posts.
   Loaded on the hub page and on posts.
   ========================================================================== */
.fw-mu-hero, .fw-mu-body { --fw-muted: #5d6b7a; --fw-rule: #e3e8ee; box-sizing: border-box; }
.fw-mu-hero *, .fw-mu-body * { box-sizing: border-box; }

/* ---- Hero: title, search, the nine topics ------------------------------- */
.fw-mu-hero { background: var(--color-primary); color: #fff; padding: 64px 24px 40px; text-align: center; }
.fw-mu-hero__in { max-width: 1040px; margin: 0 auto; }
.fw-mu-hero h1 { margin: 0 0 14px; font-family: var(--font-heading); font-size: clamp(32px, 4.5vw, 50px); font-weight: 700; letter-spacing: -1.2px; line-height: 1.1; color: #fff; }
.fw-mu-hero__lede { margin: 0 auto; max-width: 660px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .85); }

.fw-mu-search { display: flex; gap: 10px; max-width: 560px; margin: 26px auto 0; }
.fw-mu-search input[type="search"] {
    flex: 1; min-width: 0; padding: 14px 18px; font-family: var(--font-body); font-size: 16px;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff;
}
.fw-mu-search input::placeholder { color: rgba(255, 255, 255, .6); }
.fw-mu-search input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; background: rgba(255, 255, 255, .16); }
.fw-mu-search button {
    flex: none; padding: 14px 26px; border: 0; border-radius: 999px; background: var(--color-accent); color: #16240f;
    font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer;
}
.fw-mu-search button:hover { background: #8fd44a; }

.fw-mu-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.fw-mu-topic {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .07);
    color: #fff; text-decoration: none; font-size: 14.5px; line-height: 1.3; transition: background .12s, border-color .12s, transform .12s;
}
.fw-mu-topic:hover { background: rgba(128, 195, 61, .22); border-color: var(--color-accent); color: #fff; text-decoration: none; transform: translateY(-1px); }
.fw-mu-topic.is-on { background: var(--color-accent); border-color: var(--color-accent); color: #16240f; font-weight: 600; }
.fw-mu-topic__icon { display: inline-flex; flex: none; }
.fw-mu-topic__icon svg { width: 18px; height: 18px; }
.fw-mu-topic__n { font-size: 12.5px; opacity: .75; }

/* ---- Body: sections and cards ------------------------------------------- */
.fw-mu-body { max-width: 1280px; margin: 0 auto; padding: 44px 24px 80px; }
.fw-mu-section { margin-bottom: 52px; scroll-margin-top: 110px; }
.fw-mu-section:last-child { margin-bottom: 0; }
.fw-mu-head { margin: 0 0 18px; }
.fw-mu-head h2 {
    display: flex; align-items: center; gap: 12px; margin: 0 0 4px;
    font-family: var(--font-heading); font-size: 28px; font-weight: 700; letter-spacing: -.6px; color: var(--color-primary);
}
.fw-mu-head__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--color-primary); color: #fff; }
.fw-mu-head__icon svg { width: 20px; height: 20px; }
.fw-mu-head__meta { margin: 0; color: var(--fw-muted); font-size: 15.5px; line-height: 1.5; }

.fw-mu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.fw-mu-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fw-rule); border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.fw-mu-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(41, 58, 81, .8); text-decoration: none; }
/* 16:9, the YouTube thumbnail shape. The artwork for these posts is made at
   1280x720 and anything else crops Mike's own titling off the top and
   bottom, since the image is object-fit: cover. */
.fw-mu-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #EEEFF1; overflow: hidden; }
.fw-mu-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-mu-card__novideo { position: absolute; inset: 0; background: linear-gradient(150deg, #35445A, var(--color-primary)); }
/* The triangle belongs to --play only: a post with no artwork and no video
   gets the panel and nothing else, rather than promising a film. */
.fw-mu-card__novideo--play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent rgba(255, 255, 255, .9); }
.fw-mu-card__novideo:not(.fw-mu-card__novideo--play)::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%);
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.42' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
}
.fw-mu-card__badge { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(16, 24, 35, .78); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.fw-mu-card__badge i { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent var(--color-accent); }
.fw-mu-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.fw-mu-card__topic { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-dk); }
.fw-mu-card__title { font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--color-primary); }

.fw-mu-more { margin: 16px 0 0; }
.fw-mu-more a { font-weight: 600; color: var(--color-primary); text-decoration: none; border-bottom: 2px solid var(--color-accent); }
.fw-mu-empty { font-size: 17px; color: var(--fw-muted); }
.fw-mu-pages { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fw-mu-pages .page-numbers { padding: 8px 14px; border: 1px solid var(--fw-rule); border-radius: 8px; color: var(--color-primary); text-decoration: none; font-size: 15px; }
.fw-mu-pages .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

@media (max-width: 1100px) { .fw-mu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .fw-mu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  {
    .fw-mu-hero { padding: 40px 16px 30px; }
    .fw-mu-body { padding: 30px 16px 70px; }
    .fw-mu-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .fw-mu-search { flex-direction: column; border-radius: 14px; }
    .fw-mu-search input[type="search"], .fw-mu-search button { border-radius: 12px; }
}

/* ---- A vertical video (a short) on a post ------------------------------- */
.fw-vvideo { position: relative; width: 100%; max-width: 360px; margin: 0 auto 22px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #0c1420; box-shadow: 0 18px 44px -20px rgba(41, 58, 81, .6); }
.fw-post__side .fw-vvideo { max-width: none; margin: 0; }
.fw-vvideo__media, .fw-vvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #0c1420; }
.fw-vvideo__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #0c1420; cursor: pointer; }
.fw-vvideo__play img { width: 100%; height: 100%; object-fit: cover; }
.fw-vvideo__play i { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 12px; background: rgba(255, 0, 0, .92); }
.fw-vvideo__play i::after { content: ""; position: absolute; left: 27px; top: 13px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.fw-vvideo__play:hover i { background: #f00; }
.fw-card--short { padding: 0; overflow: hidden; border: 0; background: none; box-shadow: none; }
.fw-card--short h4 { margin: 0 0 8px; }

/* ---- Related posts, at the foot of a post ------------------------------- */
.fw-related { margin: 40px 0 0; }
.fw-related h2 { margin: 0 0 4px; font-family: var(--font-body); font-size: 22px; font-weight: 600; color: var(--color-primary); }
.fw-related__meta { margin: 0 0 18px; font-size: 14px; color: var(--fw-muted); }
.fw-related__meta a { color: var(--color-primary); font-weight: 600; }
.fw-related .fw-mu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .fw-related .fw-mu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fw-related .fw-mu-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Topic chips on one line ---------------------------------------------
   Nine chips came to 1525px in a 1040px hero, so they wrapped to two rows.
   The hero is widened to the body's own width and the chips tightened enough
   to sit on one line at 1280. They still wrap below that, which is right. */
.fw-mu-hero__in { max-width: 1232px; }
.fw-mu-hero h1 { max-width: 1040px; margin-left: auto; margin-right: auto; }
.fw-mu-hero__lede, .fw-mu-search { max-width: 760px; margin-left: auto; margin-right: auto; }
.fw-mu-topics { gap: 7px; }
.fw-mu-topic { padding: 8px 10px; font-size: 13.5px; gap: 6px; }
.fw-mu-topic__icon svg { width: 16px; height: 16px; }
.fw-mu-topic__n { font-size: 12px; }
/* A count against each chip is noise on both pages: the index shows
   everything anyway, and on the hub every section already ends with
   "All 25 in First-Time Buyer". It is also the ~140px that was pushing the
   hub's row onto a second line. */
.fw-mu-topics--compact .fw-mu-topic__n { display: none; }
@media (max-width: 1240px) { .fw-mu-hero__in { max-width: 1040px; } }

/* ---- Archive hero extras (blog index and category pages) ---------------- */
.fw-mu-hero__kind { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--color-accent); }
.fw-mu-hero__back { margin: 18px 0 0; font-size: 15px; color: rgba(255, 255, 255, .75); }
.fw-mu-hero__back a { color: #fff; text-decoration: none; border-bottom: 2px solid var(--color-accent); }
.fw-mu-hero__back a:hover { color: #fff; }
.fw-mu-body > .fw-mu-head { margin-bottom: 18px; }

/* ---- A series as a course ---------------------------------------------------
   Ten cards in a grid read as ten unrelated things. A numbered list in running
   order reads as a course, which is what this is: start at the top, work down.
   The rail down the left is one continuous line through the numbers, so the
   sequence is visible before a single title is read. */
.fw-course { list-style: none; margin: 0; padding: 0; position: relative; }
.fw-course::before {
    content: ""; position: absolute; left: 19px; top: 28px; bottom: 28px; width: 2px;
    background: linear-gradient(var(--color-accent), #dfe5ec); opacity: .45;
}
.fw-course__item { position: relative; }
.fw-course__item + .fw-course__item { margin-top: 10px; }
.fw-course__link {
    display: grid; grid-template-columns: 40px 168px minmax(0, 1fr); align-items: center; gap: 18px;
    padding: 12px 18px 12px 0; border-radius: 14px; text-decoration: none;
    transition: background .15s, transform .15s;
}
.fw-course__link:hover { background: #f6f9fc; transform: translateX(2px); }
.fw-course__n {
    position: relative; z-index: 1; display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 2px solid var(--color-accent);
    font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--color-primary);
}
.fw-course__link:hover .fw-course__n { background: var(--color-accent); color: #fff; }
.fw-course__thumb {
    position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px;
    overflow: hidden; background: #EEEFF1;
}
.fw-course__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-course__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fw-course__step {
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--fw-muted);
}
.fw-course__title {
    font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.35;
    color: var(--color-primary);
}
.fw-course__link:hover .fw-course__title { color: var(--fw-green-d); }

@media (max-width: 760px) {
    /* The thumbnail goes under the title rather than beside it, because at this
       width a 168px image leaves the title two words per line. */
    .fw-course::before { top: 22px; bottom: 22px; }
    .fw-course__link { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 10px 12px 0; }
    .fw-course__n { width: 34px; height: 34px; font-size: 14px; }
    .fw-course__thumb { grid-column: 2; order: 2; }
    .fw-course__body { grid-column: 2; order: 1; }
    .fw-course__title { font-size: 16px; }
}

/* ---- The series shelf on the hub ------------------------------------------
   A series is not a subject, so it does not sit in the topic chips. It gets a
   block of its own above them: a few parts in order, then through to the
   series' own page. Tinted so it reads as a different kind of thing from the
   topic cards below it. */
.fw-shelf { margin: 0 0 40px; padding: 26px 28px; border: 1px solid #e4ebf2; border-radius: 16px; background: linear-gradient(180deg, #f7fbf4, #fff 60%); }
.fw-shelf__head { margin: 0 0 16px; }
.fw-shelf__kind { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fw-green-d); }
.fw-shelf__title { margin: 0; font-family: var(--font-body); font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--color-primary); }
.fw-shelf__title a { color: inherit; text-decoration: none; }
.fw-shelf__title a:hover { color: var(--fw-green-d); }
.fw-shelf__lede { margin: 8px 0 0; max-width: 72ch; font-size: 14.5px; line-height: 1.6; color: var(--fw-muted); }
.fw-course--peek { margin: 0; }
.fw-course--peek .fw-course__link { padding-top: 9px; padding-bottom: 9px; }
.fw-shelf__all { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 0; padding-left: 58px; }
.fw-shelf__all a { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.fw-shelf__all a:hover { color: var(--fw-green-d); }
.fw-shelf__count { font-size: 13.5px; color: var(--fw-muted); }
@media (max-width: 760px) {
    .fw-shelf { padding: 20px 16px; }
    .fw-shelf__title { font-size: 22px; }
    .fw-shelf__all { padding-left: 46px; }
}

/* ---- The directory --------------------------------------------------------
   /university/ is a set of doorways, not a feed. Series first and tinted, so
   the thing an ad points at is the thing the eye lands on. */
.fw-dir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fw-dir__card {
    display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start;
    padding: 20px; border: 1px solid #e4ebf2; border-radius: 14px; background: #fff;
    text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fw-dir__card:hover { border-color: var(--color-accent); box-shadow: 0 10px 26px -14px rgba(41, 58, 81, .5); transform: translateY(-2px); }
.fw-dir__card.is-series { border-color: #cfe3b4; background: linear-gradient(180deg, #f7fbf4, #fff 70%); }
.fw-dir__icon {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
    background: #f1f5f9; color: var(--color-primary);
}
.fw-dir__card.is-series .fw-dir__icon { background: var(--color-accent); color: #fff; }
.fw-dir__icon svg { width: 24px; height: 24px; }
.fw-dir__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fw-dir__kind { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fw-green-d); }
.fw-dir__name { font-family: var(--font-body); font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--color-primary); }
.fw-dir__desc { font-size: 13.5px; line-height: 1.5; color: var(--fw-muted); }
.fw-dir__count { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--fw-muted); }
@media (max-width: 1000px) { .fw-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .fw-dir { grid-template-columns: minmax(0, 1fr); } }

/* ---- No underline on a whole-card link ------------------------------------
   The parent sets a blanket a:hover { text-decoration: underline }, which is
   right for a link inside a sentence and wrong for a link wrapped around a
   whole card: the heading, the description and the count all underline at
   once. These carry their own hover already, a lift and a colour change. */
.fw-dir__card, .fw-dir__card:hover, .fw-dir__card:focus,
.fw-course__link, .fw-course__link:hover, .fw-course__link:focus,
.fw-mu-card, .fw-mu-card:hover, .fw-mu-card:focus { text-decoration: none; }
.fw-dir__card:hover *, .fw-course__link:hover *, .fw-mu-card:hover * { text-decoration: none; }

/* ---- Series page: the post sidebar alongside the list ---------------------
   The same sidebar single.php uses, so a series page and a post inside it
   feel like one place. Only a series gets it: a topic archive is a plain
   list and does not earn a second column. */
.fw-mu-body--split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.fw-mu-main { min-width: 0; }
.fw-mu-body--split .fw-post__side { position: sticky; top: 24px; }
@media (max-width: 1080px) {
    .fw-mu-body--split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .fw-mu-body--split .fw-post__side { position: static; }
}

/* ---- Granite hero ---------------------------------------------------------
   The navy band was a flat fill. This gives it stone: a fine grain from an
   SVG turbulence filter, two soft highlights so the light falls across it
   rather than sitting evenly, and a darker base at the foot so the content
   below has something to sit against.

   Done in CSS rather than as an image on purpose. It is about 1KB, it scales
   to any width without a second asset to push at cutover, and it cannot go
   missing the way an uploaded background can. */
.fw-mu-hero {
    position: relative;
    background:
        /* the light, falling from upper left */
        radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .10), transparent 58%),
        radial-gradient(90% 70% at 88% 12%, rgba(128, 195, 61, .10), transparent 60%),
        /* depth at the foot */
        linear-gradient(180deg, #2b3b52 0%, var(--color-primary) 52%, #1d2b3d 100%);
    isolation: isolate;
}
/* The grain itself. A separate layer so it can be blended rather than mixed
   into the gradient, which keeps the speckle visible in the dark areas where
   a plain overlay would disappear. */
.fw-mu-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
    background-size: 260px 260px;
}
/* Larger flecks over the grain, so it reads as stone rather than TV static. */
.fw-mu-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.6px),
        radial-gradient(rgba(0, 0, 0, .16) 1px, transparent 1.6px);
    background-size: 23px 23px, 31px 31px;
    background-position: 0 0, 11px 7px;
}
.fw-mu-hero__in { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
    /* nothing moves; the hero is static by design */
}