/*
Theme Name: Frost Child — Reliance
Theme URI: https://hirereliance.com
Description: Child theme of Frost for Reliance Contracting & Services. Sets the brand palette, typography (Gabarito / Public Sans / Spline Sans Mono), and custom text styles from the approved Figma design tokens.
Author: Reliance web build
Template: frost
Version: 1.0.1
Text Domain: frost-child
*/

/* ------------------------------------------------------------------
   Custom text styles (block style variations)
   These are the Figma text styles that don't map to an HTML element.
   Apply them from a Paragraph/Heading block's "Styles" panel.
------------------------------------------------------------------ */

.is-style-eyebrow {
  font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--wp--preset--color--gold-dark);
}

.is-style-meta {
  font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--wp--preset--color--slate);
}

.is-style-lede {
  font-family: Gabarito, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(20px, 1.2vw + 1rem, 24px);
  font-weight: 500;
  line-height: 1.6;
}

/* ------------------------------------------------------------------
   Header: on mobile, drop the standalone "Get a Free Quote" button and
   surface it inside the hamburger menu instead; keep the logo + hamburger
   on one row.
------------------------------------------------------------------ */

/* Desktop: the in-menu quote link is redundant (the button shows) — hide it */
@media (min-width: 601px) {
  .nav-cta { display: none !important; }
}

/* The header is a 3-column layout (logo / nav / button) so the nav can be
   centered on desktop. Keep those columns on ONE ROW at every width so they
   never stack vertically. */
.site-header-bar .wp-block-columns {
  flex-wrap: nowrap !important;
  align-items: center;
}
@media (max-width: 781px) {
  /* Override WP's "stack columns on mobile" (row + auto width, both !important) */
  .site-header-bar .wp-block-columns { flex-direction: row !important; }
  .site-header-bar .wp-block-columns > .wp-block-column { flex-basis: auto !important; }
}
/* Phone: hamburger appears — push the nav to the far right and shrink the logo.
   The quote-button/phone group is hidden via its own .header-quote-btn rule below
   (not by hiding the whole column, since the nav can end up in that same column
   and we must never hide the hamburger). */
@media (max-width: 600px) {
  .site-header-bar .wp-block-columns > .wp-block-column:first-child { flex: 0 1 auto !important; }
  .site-header-bar .wp-block-columns > .wp-block-column:nth-child(2) { flex: 1 1 auto !important; }
  .site-header-bar .primary-nav { justify-content: flex-end !important; }
  .site-header .header-quote-btn { display: none !important; }
  .site-header .reliance-logo img { width: 160px !important; }
}

/* Animated gold underline on the top nav items; stays lit on the active page.
   Desktop only — the mobile overlay keeps its clean list. */
@media (min-width: 601px) {
  .primary-nav .wp-block-navigation-item__content {
    position: relative;
    padding-bottom: 4px;
  }
  .primary-nav .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--wp--preset--color--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
  }
  .primary-nav .wp-block-navigation-item__content:hover::after,
  .primary-nav .wp-block-navigation-item__content:focus-visible::after,
  .primary-nav .current-menu-item > .wp-block-navigation-item__content::after,
  .primary-nav .current_page_item > .wp-block-navigation-item__content::after,
  .primary-nav .wp-block-navigation-item__content[aria-current="page"]::after {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .primary-nav .wp-block-navigation-item__content::after { transition: none; }
}

/* ------------------------------------------------------------------
   Hero grid backdrop. Add "hero-grid" to a navy hero section's Advanced →
   Additional CSS class(es). A fine grid (two layered gradients) over a soft
   top-right glow, on the navy-dark ground.
------------------------------------------------------------------ */
.hero-grid {
  background-color: var(--wp--preset--color--navy-dark);
  background-image:
    linear-gradient(to right, rgba(11, 20, 32, 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 20, 32, 0.55) 1px, transparent 1px),
    radial-gradient(110% 130% at 100% 0%, rgba(120, 140, 175, 0.16), transparent 60%),
    linear-gradient(105deg, #16222f 0%, #16222f 40%, #223141 74%, #2c3a4a 100%);
  background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%;
  background-position: center top;
}

/* Light version of the grid for bone sections (e.g. testimonials).
   The solid bone is painted as a background-image layer so it covers the
   section's own color (which WP sets with !important) — flat bone, grid on top. */
.grid-bone {
  background-color: var(--wp--preset--color--bone);
  background-image:
    linear-gradient(to right, rgba(48, 62, 76, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(48, 62, 76, 0.07) 1px, transparent 1px),
    linear-gradient(var(--wp--preset--color--bone), var(--wp--preset--color--bone));
  background-size: 36px 36px, 36px 36px, 100% 100%;
  background-position: center top;
}

/* ------------------------------------------------------------------
   Phone-icon utility. Add "icon-phone" in a Button's Advanced →
   Additional CSS class(es) field to prepend the phone icon. It's a CSS
   mask, so it takes the button's text color and stacks with any style
   (Emergency, Outline, etc.).
------------------------------------------------------------------ */
.wp-block-button.icon-phone > .wp-block-button__link::before,
a.wp-block-button__link.icon-phone::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.55em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: url("/wp-content/themes/frost-child/assets/phone.svg") no-repeat center / contain;
  mask: url("/wp-content/themes/frost-child/assets/phone.svg") no-repeat center / contain;
}

/* ------------------------------------------------------------------
   Phone-number button styles (both carry a GOLD phone icon).
   "Phone (Plain)"   — transparent, no border (for the header).
   "Phone (Outline)" — 1px outline like the outline button (for CTAs).
------------------------------------------------------------------ */

/* Shared gold phone icon */
.wp-block-button.is-style-phone-plain > .wp-block-button__link::before,
.wp-block-button.is-style-phone-outline > .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.55em;
  vertical-align: -0.12em;
  background-color: var(--wp--preset--color--gold);
  -webkit-mask: url("/wp-content/themes/frost-child/assets/phone.svg") no-repeat center / contain;
  mask: url("/wp-content/themes/frost-child/assets/phone.svg") no-repeat center / contain;
}

/* Phone (Plain) — transparent, no border, text inherits the surrounding color */
.wp-block-button.is-style-phone-plain > .wp-block-button__link {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0.4em 0.2em;
  font-weight: 700;
}
.wp-block-button.is-style-phone-plain > .wp-block-button__link:hover,
.wp-block-button.is-style-phone-plain > .wp-block-button__link:focus {
  background: transparent;
  /* keep the global -2px lift so it moves up like the other buttons */
}

/* Phone (Outline) — outline pill (matches the outline button), gold phone icon */
.wp-block-button.is-style-phone-outline > .wp-block-button__link {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  padding: 0.85em 1.5em;
}
.wp-block-button.is-style-phone-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-phone-outline > .wp-block-button__link:focus {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* ------------------------------------------------------------------
   Homepage dynamic blog cards (Query Loop). Whole card clickable via a
   stretched post-title link; featured image zooms inside its frame.
------------------------------------------------------------------ */
/* Span the full content width as 3 equal columns (the post-template grid
   defaults to auto-fill, which leaves a gap at wide widths). */
.blog-cards .wp-block-post-template.is-layout-grid,
.blog-cards .wp-block-post-template {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .blog-cards .wp-block-post-template.is-layout-grid,
  .blog-cards .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .blog-cards .wp-block-post-template.is-layout-grid,
  .blog-cards .wp-block-post-template {
    grid-template-columns: minmax(0, 1fr);
  }
}

.blog-cards .blog-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 0px;
  background: var(--wp--preset--color--white);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Body fills the card so all cards match height and "Read more" sits at the bottom */
.blog-cards .blog-card > .wp-block-group {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-top: 0 !important;
}
.blog-cards .blog-card .is-style-meta {
  margin-top: auto;
  padding-top: 18px;
}
.blog-cards .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -24px rgba(18, 37, 57, .2);
}
.blog-cards .blog-card .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
}
.blog-cards .blog-card .wp-block-post-featured-image img {
  transition: transform .45s ease;
  width: 100%;
}
.blog-cards .blog-card:hover .wp-block-post-featured-image img {
  transform: scale(1.06);
}
.blog-cards .blog-card .wp-block-post-title {
  margin: 0;
}
.blog-cards .blog-card .wp-block-post-title a {
  text-decoration: none;
  color: var(--wp--preset--color--navy-dark);
  transition: color .2s ease;
}
.blog-cards .blog-card:hover .wp-block-post-title a {
  color: var(--wp--preset--color--gold-dark);
}
.blog-cards .blog-card .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* Blog index pagination */
.blog-cards .wp-block-query-pagination {
  gap: 8px 14px;
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: .85rem;
  letter-spacing: .04em;
}
.blog-cards .wp-block-query-pagination a,
.blog-cards .wp-block-query-pagination .wp-block-query-pagination-numbers {
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}
.blog-cards .wp-block-query-pagination .page-numbers.current {
  color: var(--wp--preset--color--gold-dark);
  font-weight: 700;
}
.blog-cards .wp-block-query-pagination a:hover {
  color: var(--wp--preset--color--gold-dark);
}
@media (prefers-reduced-motion: reduce) {
  .blog-cards .blog-card,
  .blog-cards .blog-card .wp-block-post-featured-image img { transition: none; }
  .blog-cards .blog-card:hover { transform: none; }
  .blog-cards .blog-card:hover .wp-block-post-featured-image img { transform: none; }
}

/* Blog index (posts page): match the header→hero spacing of the other pages.
   The blog template has a Site Editor DB copy that overrides the theme file,
   so we align it here: kill Frost's default main margin and match hero padding. */
body.blog main.site-content {
  margin-top: 0 !important;
}
body.blog main .hero-grid {
  padding-top: 84px !important;
}

/* FAQ accordions (core Details block) */
.wp-block-details {
  background: var(--wp--preset--color--white);
  border: 1px solid #e6ddce;
  border-radius: 12px;
  padding: 2px 24px;
}
.wp-block-details + .wp-block-details {
  margin-top: 12px;
}
.wp-block-details summary {
  font-family: Gabarito, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--wp--preset--color--navy-dark);
  padding: 20px 0;
  cursor: pointer;
  list-style-position: outside;
}
.wp-block-details[open] summary {
  color: var(--wp--preset--color--gold-dark);
}
.wp-block-details > *:not(summary) {
  color: var(--wp--preset--color--slate);
  padding-bottom: 8px;
}

/* Footer links: plain white text, no underline — gold on hover */
.site-footer a {
  color: var(--wp--preset--color--bone);
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--wp--preset--color--gold);
}

/* On dark (navy) sections, eyebrows read better in gold rather than gold-dark */
.has-navy-background-color .is-style-eyebrow,
.has-navy-dark-background-color .is-style-eyebrow {
  color: var(--wp--preset--color--gold);
}

/* ------------------------------------------------------------------
   Buttons: gradient fills, matched dimensions, hover states.
------------------------------------------------------------------ */

/* Filled buttons carry no border at all. Outline gets a 1px border in its own
   text color. */
.wp-block-button > .wp-block-button__link {
  border: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
  border: 1px solid currentColor;
  padding: 0.85em 1.5em;
}

/* Primary (gold) filled — gold gradient, navy text */
.wp-block-button:not(.is-style-outline):not(.is-style-emergency):not(.is-style-phone-plain):not(.is-style-phone-outline) > .wp-block-button__link {
  background: var(--wp--preset--gradient--gold-gradient);
  color: var(--wp--preset--color--navy-dark);
}
.wp-block-button:not(.is-style-outline):not(.is-style-emergency):not(.is-style-phone-plain):not(.is-style-phone-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not(.is-style-emergency):not(.is-style-phone-plain):not(.is-style-phone-outline) > .wp-block-button__link:focus {
  background: linear-gradient(180deg, #c6982f 0%, #8f6a16 100%);
  color: var(--wp--preset--color--navy-dark);
}

/* Emergency (red) — emergency gradient, navy text */
.wp-block-button.is-style-emergency > .wp-block-button__link {
  background: var(--wp--preset--gradient--emergency-gradient);
  color: var(--wp--preset--color--navy-dark);
}
.wp-block-button.is-style-emergency > .wp-block-button__link:hover,
.wp-block-button.is-style-emergency > .wp-block-button__link:focus {
  background: linear-gradient(180deg, #ec3838 0%, #a90b0b 100%);
  color: var(--wp--preset--color--navy-dark);
}

/* Outline — translucent fill of its own border/text color on hover */
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Subtle lift on hover for every button */
.wp-block-button__link:hover,
.wp-block-button__link:focus {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-button > .wp-block-button__link { transition: none; }
  .wp-block-button__link:hover,
  .wp-block-button__link:focus { transform: none; }
}

/* ---------------------------------------------------------------------------
   Column order helper — add "reverse-on-mobile" to a Columns block to flip
   its stacking order once the columns stack (≤781px). Handy when the design
   wants the SECOND column (e.g. an image) to sit ABOVE the first on phones.
   Works cleanly for two-column blocks; on 3+ columns it reverses all of them.
--------------------------------------------------------------------------- */
@media (max-width: 781px) {
  .wp-block-columns.reverse-on-mobile {
    flex-direction: column-reverse;
  }
}