/* ============================================================
   This is my Life: 2026 rebrand
   Loaded after the mylife theme stylesheet by the timl-rebrand
   mu-plugin. Every rule is scoped to body.timl-rebrand, so turning
   the plugin off (or preview mode for logged-out visitors) shows
   the old design untouched.

   Sections
     1. Tokens
     2. Fonts
     3. Page background and base type
     4. Header, logo, navigation
     5. Blue to crimson (links, buttons, accents)
     6. Tiles: paper instead of flat colour blocks
     7. Tiles with photos
     8. Answers page form
     9. Single posts and pages
    10. Footer
    11. Mobile
    12. Focus and selection
   ============================================================ */


/* ---- 1. Tokens ------------------------------------------- */

body.timl-rebrand {
  /* Palette (swatch values from the brand pack) */
  --c-paper:     #F4F4F4;
  --c-cream:     #FFFFF9;
  --c-rule:      #C2C2C2;
  --c-grey:      #6D6C6C;
  --c-charcoal:  #444342;
  --c-rose:      #EBDDD7;
  --c-mint:      #CEE7DF;
  --c-plum:      #7B5B64;
  --c-raspberry: #B84C65;
  --c-crimson:   #A4113A;

  /* Roles */
  --bg-page:      var(--c-paper);
  --bg-footer:    var(--c-plum);
  --text:         var(--c-charcoal);
  --text-muted:   var(--c-grey);
  --text-on-dark: var(--c-cream);
  --link:         var(--c-crimson);
  --link-hover:   var(--c-plum);

  /* Paper textures, taken from the "Website Updated" page of the
     brand pack. Light paper carries raspberry titles, grey paper
     carries cream titles, as in the mockup. */
  --paper-light: url("textures/paper-light.jpg");
  --paper-grey:  url("textures/paper-grey.jpg");
  --title-on-light-paper: var(--c-raspberry);
  --title-on-grey-paper:  var(--c-cream);
  --title-on-photo:       var(--c-rose);

  /* Type: Close Friends is the primary face (logo, headings, tile
     titles), Gabriel Sans Condensed the accent (nav, body, forms). */
  --font-display: "Close Friends", "Gabriel Sans Cond", cursive;
  --font-body:    "Gabriel Sans Cond", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  --font-tile:    var(--font-display);

  /* Logo */
  --logo: url("logos/typeface-charcoal.svg");
  --logo-width: 262px;
  --logo-ratio: 3.17; /* width / height of the logo artwork */
}


/* ---- 2. Fonts -------------------------------------------- */

@font-face {
  font-family: "Close Friends";
  src: url("fonts/close-friends.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gabriel Sans Cond";
  src: url("fonts/gabriel-sans-cond.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ---- 3. Page background and base type -------------------- */

body.timl-rebrand,
body.timl-rebrand.single,
body.timl-rebrand.page-template-template-contact {
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

body.timl-rebrand p,
body.timl-rebrand ul {
  font-size: 16px;
  line-height: 1.6;
}

body.timl-rebrand input[type="text"],
body.timl-rebrand input[type="submit"],
body.timl-rebrand textarea,
body.timl-rebrand input#s {
  font-family: var(--font-body);
}

/* Close Friends has a very small x-height (about half of most
   faces), so headings set in it need to be roughly 1.6x larger
   than the old Lato sizes to read at the same visual size. */
body.timl-rebrand h1,
body.timl-rebrand h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0;
}

body.timl-rebrand h1 { font-size: 68px; line-height: 1.05; }
body.timl-rebrand h2 { font-size: 54px; line-height: 1.1; }

body.timl-rebrand h3,
body.timl-rebrand h4,
body.timl-rebrand h5 {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
}

body.timl-rebrand .loading {
  display: none !important;
}


/* ---- 4. Header, logo, navigation -------------------------
   Mockup: large wordmark on the left, short uppercase nav on the
   right, no "Trending" item (the logo already links home).
   ----------------------------------------------------------- */

body.timl-rebrand .top-nav,
body.timl-rebrand .container-wide {
  background: var(--bg-page);
}

body.timl-rebrand .top-nav .container {
  padding: 44px 0 26px;
}

body.timl-rebrand .top-nav #logo.three.columns {
  width: 300px;
}

body.timl-rebrand .top-nav .menucell.twelve.columns {
  width: 860px;
  float: right;
}

/* Swap the old PNG for the SVG wordmark without editing header.php.
   The <img> stays in the page (visually hidden) so the link keeps
   its accessible name. */
body.timl-rebrand #logo a.logo {
  position: relative;
  display: block;
  width: var(--logo-width);
  height: calc(var(--logo-width) / var(--logo-ratio));
  background: var(--logo) left center / contain no-repeat;
}

body.timl-rebrand #logo a.logo img {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  max-width: none;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Optional second logo beside the wordmark (set in timl-rebrand.php) */
body.timl-rebrand .top-nav #logo.three.columns {
  width: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}

body.timl-rebrand .top-nav .menucell.twelve.columns {
  width: auto;
}

body.timl-rebrand .timl-badge img {
  display: block;
  height: 64px;
  width: auto;
  max-width: 220px;
}

@media only screen and (max-width: 767px) {
  body.timl-rebrand .timl-badge img { height: 44px; max-width: 140px; }
}

body.timl-rebrand .sf-menu {
  float: right;
  margin-right: 46px;
}

body.timl-rebrand .sf-menu li {
  margin-left: 0;
}

body.timl-rebrand .sf-menu li > a,
body.timl-rebrand .sf-menu a,
body.timl-rebrand .sf-menu a:visited {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.01em;
  padding: 0 0 0 26px;
  color: var(--text);
}

body.timl-rebrand .sf-menu li.current_page_item > a,
body.timl-rebrand .sf-menu li.current-menu-item > a,
body.timl-rebrand .sf-menu a:hover {
  color: var(--link);
}

/* Hide "Trending" (the menu item that links to the home page).
   Once the rebrand is live it's tidier to remove it in
   Appearance > Menus and delete these two rules. */
body.timl-rebrand .sf-menu > li.menu-item-home,
body.timl-rebrand #mobilenav > li.menu-item-home {
  display: none;
}

body.timl-rebrand ul.filter li a,
body.timl-rebrand ul.filter li a:visited,
body.timl-rebrand ul.filter li a.active {
  font-family: var(--font-body);
  color: var(--text);
}

body.timl-rebrand ul.filter li a:hover {
  color: var(--link);
}


/* ---- 5. Blue to crimson ---------------------------------- */

body.timl-rebrand p a,
body.timl-rebrand a,
body.timl-rebrand .subtitle a,
body.timl-rebrand .title a,
body.timl-rebrand blockquote,
body.timl-rebrand blockquote p,
body.timl-rebrand .highlight,
body.timl-rebrand .singlecontent a {
  color: var(--link);
}

body.timl-rebrand a:hover,
body.timl-rebrand p a:hover,
body.timl-rebrand h1 a:hover,
body.timl-rebrand h2 a:hover,
body.timl-rebrand h3 a:hover,
body.timl-rebrand .widget a:hover {
  color: var(--link-hover);
}

/* Load more */
body.timl-rebrand .more-posts a {
  font-family: var(--font-body);
  font-size: 18px;
  letter-spacing: 0.08em;
  border: 2px solid var(--link);
  color: var(--link) !important;
  background: transparent;
}

body.timl-rebrand .more-posts a:hover,
body.timl-rebrand .more-posts a:focus-visible {
  background: var(--link);
  color: var(--text-on-dark) !important;
}


/* ---- 6. Tiles: paper instead of flat colour blocks -------
   Tiles without a photo get a colour picked per post in the
   editor ("Answers - Background Colour"). The old darker colours
   become grey paper, the old lighter colours become light paper,
   so the mix editors already chose carries over.
   ----------------------------------------------------------- */

body.timl-rebrand .noimages .postphoto {
  background-color: #DDD9DA;
  background-image: var(--paper-light);
  background-size: cover;
  background-position: center;
  --tile-title: var(--title-on-light-paper);
}

body.timl-rebrand .noimages.purple    .postphoto,
body.timl-rebrand .noimages.dark-blue .postphoto,
body.timl-rebrand .noimages.green     .postphoto,
body.timl-rebrand .noimages.grey      .postphoto,
body.timl-rebrand .noimages.red       .postphoto,
body.timl-rebrand .noimages.black     .postphoto {
  background-color: #8B898A;
  background-image: var(--paper-grey);
  --tile-title: var(--title-on-grey-paper);
}

body.timl-rebrand .noimages a.postlink .title h2,
body.timl-rebrand .noimages .postphoto div.title h2 {
  color: var(--tile-title);
}

/* Tile titles: handwriting face, top left. Close Friends has a
   tiny x-height, so these sizes are large on paper but match the
   visual size in the mockup (e.g. "Ruth's story: I'm so thankful I"
   fills one line of the big tile at about 52px). */
body.timl-rebrand .postphoto div.title h2 {
  font-family: var(--font-tile);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 44px;
  line-height: 1.08;
}

body.timl-rebrand .postphoto div.title h2 span,
body.timl-rebrand .postphoto a.postlink:hover div.title h2 span,
body.timl-rebrand .homepage .sixteen > div .postphoto div.title h2 span,
body.timl-rebrand .videos-page .noimages .postphoto div.title h2 span {
  vertical-align: top;
  padding: 16px 26px 0;
}

body.timl-rebrand .big .postphoto div.title h2  { font-size: 50px; }
body.timl-rebrand .slim .postphoto div.title h2 { font-size: 36px; }

/* Homepage: the theme fixes each position's size, so size by position */
body.timl-rebrand .homepage .sixteen > div:nth-of-type(1) .postphoto div.title h2 { font-size: 52px; }
body.timl-rebrand .homepage .sixteen > div:nth-of-type(2) .postphoto div.title h2,
body.timl-rebrand .homepage .sixteen > div:nth-of-type(3) .postphoto div.title h2,
body.timl-rebrand .homepage .sixteen > div:nth-of-type(5) .postphoto div.title h2 { font-size: 46px; line-height: 1.08; }
body.timl-rebrand .homepage .sixteen > div:nth-of-type(6) .postphoto div.title h2,
body.timl-rebrand .homepage .sixteen > div:nth-of-type(9) .postphoto div.title h2,
body.timl-rebrand .homepage .sixteen > div:nth-of-type(10) .postphoto div.title h2 { font-size: 48px; }
body.timl-rebrand .homepage .sixteen > div:nth-of-type(7) .postphoto div.title h2,
body.timl-rebrand .homepage .sixteen > div:nth-of-type(8) .postphoto div.title h2,
body.timl-rebrand .homepage .sixteen > div:nth-of-type(11) .postphoto div.title h2 { font-size: 40px; }
body.timl-rebrand .homepage .sixteen > div:nth-of-type(4) .postphoto div.title h2 { font-size: 30px; line-height: 1.05; }
body.timl-rebrand .homepage .sixteen > div:nth-of-type(4) .postphoto div.title h2 span { padding: 8px 14px 0; }

body.timl-rebrand .answers-page .postphoto div.title h2 {
  font-size: 34px;
  line-height: 1.08;
}

body.timl-rebrand .answers-page .postphoto div.title h2 span,
body.timl-rebrand .answers-page .postphoto a.postlink:hover div.title h2 span {
  padding: 12px 20px 0;
}

body.timl-rebrand .videos-page .postphoto div.title h2,
body.timl-rebrand .videos-page .slim .postphoto div.title h2,
body.timl-rebrand .videos-page .big .postphoto div.title h2 {
  font-size: 38px;
  line-height: 1.08;
}

body.timl-rebrand .postphoto div.title p,
body.timl-rebrand .postphoto div.title p span {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
}


/* ---- 7. Tiles with photos ---------------------------------
   The mockup has no dark gradient: titles sit straight on the
   photo in pale rose. A very light shadow keeps them readable on
   bright photos without being visible as an effect.
   ----------------------------------------------------------- */

body.timl-rebrand .hasimages,
body.timl-rebrand .homepage .hasimages .postphoto,
body.timl-rebrand.page-template-template-videos-fixed .videos-page .postphoto {
  background-color: var(--c-charcoal) !important;
}

/* Faint shade behind the top edge only, where the titles sit.
   Barely visible on darker photos; keeps pale titles readable on
   bright skies. */
body.timl-rebrand .postphoto a.postlink div.overlay {
  background-image: linear-gradient(to bottom, rgba(68, 67, 66, 0.32), rgba(68, 67, 66, 0) 55%);
  background-color: transparent;
}

body.timl-rebrand .postphoto a.postlink:hover div.overlay {
  background-image: none;
  background-color: rgba(68, 67, 66, 0.35);
}

body.timl-rebrand .hasimages .postphoto div.title h2,
body.timl-rebrand .hasimages .postphoto div.title p {
  color: var(--title-on-photo);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}


/* ---- 8. Answers page form -------------------------------- */

body.timl-rebrand .answers-form h2 {
  font-family: var(--font-display);
  text-transform: none;
  font-size: 58px;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 14px;
}

body.timl-rebrand .answers-form p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}

body.timl-rebrand .answers-form p.small-text {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.4;
}

body.timl-rebrand .contactsubmit label {
  color: var(--text-muted);
  font-size: 15px;
  letter-spacing: 0.04em;
}

body.timl-rebrand .contactsubmit input[type="text"],
body.timl-rebrand .contactsubmit textarea,
body.timl-rebrand .contactsubmit.answers-form textarea,
body.timl-rebrand .contactsubmit.answers-form input.email[type="text"] {
  background: var(--c-cream);
  color: var(--text);
  border: 1px solid var(--c-rule);
  box-sizing: border-box;
}

/* The theme sized these as 90% plus 5% padding each side; with a
   border added they need border-box sizing and a full width. */
body.timl-rebrand .contactsubmit.answers-form textarea {
  width: 100%;
  padding: 14px 16px;
}

body.timl-rebrand .contactsubmit.answers-form input.email[type="text"],
body.timl-rebrand .contactsubmit.answers-form input[type="submit"] {
  width: 100%;
  height: 46px;
  margin: 0;
}

body.timl-rebrand .contactsubmit.answers-form input.email[type="text"] {
  padding: 0 14px;
  border-right: 0;
}

body.timl-rebrand .contactsubmit input[type="text"]:focus,
body.timl-rebrand .contactsubmit textarea:focus {
  border-color: var(--c-grey);
}

body.timl-rebrand .contactsubmit ::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

body.timl-rebrand .contactsubmit.answers-form input[type="submit"] {
  background: var(--c-crimson);
  color: var(--text-on-dark);
  font-size: 18px;
  letter-spacing: 0.08em;
  border: 1px solid var(--c-crimson);
  cursor: pointer;
}

body.timl-rebrand .contactsubmit.answers-form input[type="submit"]:hover {
  background: var(--c-plum);
  border-color: var(--c-plum);
}

body.timl-rebrand .answers-form p.error {
  color: var(--c-crimson);
}

body.timl-rebrand .answers-form .emailsuccess p {
  color: var(--text);
}


/* Contact page form: brand type and a crimson button instead of the old black one */
body.timl-rebrand #contactform,
body.timl-rebrand #contactform label,
body.timl-rebrand .contactsubmit select {
  font-family: var(--font-body);
}

body.timl-rebrand #contactform input[type="text"],
body.timl-rebrand #contactform textarea {
  background: var(--c-cream);
  color: var(--text);
  border: 1px solid var(--c-rule);
}

body.timl-rebrand #contactform input[type="submit"],
body.timl-rebrand #contactform #c_submit {
  background: var(--c-crimson);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 26px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

body.timl-rebrand #contactform input[type="submit"]:hover,
body.timl-rebrand #contactform #c_submit:hover {
  background: var(--c-plum);
}

body.timl-rebrand .emailsuccess p {
  color: var(--text);
}


/* ---- 9. Single posts and pages --------------------------- */

body.timl-rebrand .pagetitle .title {
  color: var(--text);
  font-size: 68px;
  line-height: 1.05;
  max-width: 1000px;
}

body.timl-rebrand .pagetitle .subtitle {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-size: 21px;
  line-height: 1.4;
  max-width: 900px;
  margin-left: 0;
}

body.timl-rebrand .singlecontent h1,
body.timl-rebrand .singlecontent h2 {
  color: var(--text);
}

body.timl-rebrand .singlecontent p,
body.timl-rebrand .singlecontent li {
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  max-width: 44em;
}


/* ---- 10. Footer ------------------------------------------ */

body.timl-rebrand .footer {
  background: var(--bg-footer);
  color: var(--text-on-dark);
}

body.timl-rebrand .footer div.sixteen,
body.timl-rebrand.home .footer div.sixteen,
body.timl-rebrand.search .footer div.sixteen,
body.timl-rebrand.page-template-template-videos-fixed .footer div.sixteen,
body.timl-rebrand.page-template-template-answers-fixed .footer div.sixteen {
  border-top: 0;
  padding: 28px 0 40px;
}

body.timl-rebrand .footer ul li a {
  color: var(--text-on-dark);
  border-left-color: rgba(255, 255, 249, 0.4);
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.timl-rebrand .footer ul li a:hover {
  color: var(--c-rose);
}

body.timl-rebrand input#s {
  background: var(--c-cream);
  color: var(--text);
  font-size: 16px;
}


/* ---- 11. Mobile ------------------------------------------ */

body.timl-rebrand .mobilenavcontainer .icon-bar {
  background-color: var(--text);
}

body.timl-rebrand .mobilenavigation {
  background: var(--c-cream);
}

body.timl-rebrand #mobilenav a {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  border-bottom: 1px solid var(--c-rule);
}

@media only screen and (max-width: 959px) {
  body.timl-rebrand #logo a.logo {
    --logo-width: 210px;
    margin-bottom: 10px;
  }
  body.timl-rebrand .top-nav #logo.three.columns,
  body.timl-rebrand .top-nav .menucell.twelve.columns {
    width: auto;
  }
}

@media only screen and (max-width: 767px) {
  body.timl-rebrand h1,
  body.timl-rebrand .pagetitle .title { font-size: 50px; line-height: 1.05; }
  body.timl-rebrand h2,
  body.timl-rebrand .answers-form h2 { font-size: 44px; line-height: 1.05; }
  body.timl-rebrand .pagetitle .subtitle { font-size: 18px; line-height: 1.4; }
  body.timl-rebrand .top-nav #logo.three.columns { width: 75%; }
  body.timl-rebrand .postphoto div.title h2,
  body.timl-rebrand .big .postphoto div.title h2,
  body.timl-rebrand .slim .postphoto div.title h2,
  body.timl-rebrand .homepage .sixteen > div:nth-of-type(n) .postphoto div.title h2 { font-size: 34px; line-height: 1.08; }
}


/* ---- 12. Focus and selection ----------------------------- */

body.timl-rebrand a:focus-visible,
body.timl-rebrand input:focus-visible,
body.timl-rebrand textarea:focus-visible {
  outline: 2px solid var(--c-crimson);
  outline-offset: 2px;
}

body.timl-rebrand .footer a:focus-visible,
body.timl-rebrand .footer input:focus-visible {
  outline-color: var(--c-cream);
}

body.timl-rebrand ::selection {
  background: var(--c-rose);
  color: var(--c-charcoal);
}

@media (prefers-reduced-motion: reduce) {
  body.timl-rebrand .isobrick:hover .postphoto {
    transform: none !important;
  }
}