/*
Theme Name: re.market.able
Theme URI: https://remarketableconsulting.ca/blog
Author: re.market.able Consulting
Author URI: https://remarketableconsulting.ca
Description: Brand-matched block theme for the re.market.able blog. Anton + Quicksand fonts, navy/cream/brand-accent palette, hard 1.5px borders with offset shadows in the same designed-print aesthetic as the marketing site.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: remarketable
Tags: blog, full-site-editing, block-theme, custom-colors, custom-fonts
*/

/* Most styling lives in theme.json — this file holds the bits that need
   real CSS (animations, pseudo-elements, complex selectors). */

/* Disable italic synthesis everywhere (matches the marketing site). */
body { font-synthesis: none; }

/* Brand "Remarketable" treatment: navy text with the pink swoosh/highlight. */
.remarketable-mk {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  background: var(--wp--preset--color--pink);
  color: var(--wp--preset--color--cream);
  padding: 0 0.25em;
  display: inline-block;
  transform: rotate(-1deg);
  box-shadow: 4px 4px 0 var(--wp--preset--color--ink);
}

/* Hard-edged designed-print buttons that match the marketing site CTAs. */
.wp-block-button__link {
  border: 1.5px solid var(--wp--preset--color--ink) !important;
  border-radius: 999px !important;
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  box-shadow: 4px 4px 0 var(--wp--preset--color--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-button__link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
}

/* Cards (pull-quotes, side cards) with the offset-shadow treatment. */
.has-card-style {
  background: var(--wp--preset--color--cream);
  border: 1.5px solid var(--wp--preset--color--ink);
  box-shadow: 8px 8px 0 var(--wp--preset--color--navy);
  padding: 1.5rem 1.75rem;
}

/* Editorial first-letter on .editorial-lede paragraphs. */
.editorial-lede::first-letter {
  font-family: 'Anton', sans-serif;
  font-size: 4.2em;
  float: left;
  line-height: 0.9;
  margin: 0.05em 0.15em 0 0;
  color: var(--wp--preset--color--pink);
}

/* Section dividers — thin ink line + dot, matches the marketing site
   .section-label pattern. */
.section-rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2.5rem 0 1.25rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.section-rule::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--green);
}
.section-rule::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: var(--wp--preset--color--ink);
  opacity: 0.2;
}

/* Site logo (block) — white knockout style on navy bg, color on cream. */
.site-logo-mark {
  height: 40px;
  width: auto;
}

/* Post meta: Anton uppercase row above the headline. */
.post-meta {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  color: var(--wp--preset--color--cyan);
  margin-bottom: 0.5rem;
}

/* Reduce italic rendering since Anton has no italic. */
em, i { font-style: normal; color: var(--wp--preset--color--pink); }

/* Comments form / widgets — light touch, hard borders. */
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
  border: 1.5px solid var(--wp--preset--color--ink);
  background: var(--wp--preset--color--cream);
  padding: 0.75rem 1rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  border-radius: 0;
}

/* Reading-width override for the post body. */
.is-style-post-content .wp-block-post-content > * {
  max-width: 65ch;
}