/*
 * Page section styling
 *
 * Loaded on the front end and inside the block editor, so what James sees while
 * editing matches the published page.
 *
 * Scoped to .tfc-page, the body class added by the TFC Section Page template.
 * Nothing here can affect a page that does not use that template.
 */

/* ---------------------------------------------------------------
 * 1. Let the design run edge to edge inside Razzi's wrapper
 * ------------------------------------------------------------- */

/* Razzi puts 80px of padding on .site-content and hides nothing by default.
   A sectioned page provides its own vertical rhythm, so clear both. */
.tfc-page .site-content {
  padding-top: 0;
  padding-bottom: 0;
}

.tfc-page .page-header,
.tfc-page .rz-breadcrumb {
  display: none;
}

/* Razzi handles .alignfull on pages, but only above 768px, and it adds an 8px
   and 9px scrollbar fudge that leaves a visible sliver. Fix both, all widths. */
.tfc-page .site-content article > .alignfull {
  width: auto;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.tfc-page {
  overflow-x: clip; /* stops the 100vw children creating a horizontal scrollbar */
}

/* ---------------------------------------------------------------
 * 2. Base type inside a sectioned page
 * ------------------------------------------------------------- */

.tfc-page .site-content article {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
}

.tfc-page h1, .tfc-page h2, .tfc-page h3, .tfc-page h4 {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
}

/* Sections sitting on a dark surface flip their text colour, including the
   headings, which would otherwise inherit ink 900 from the rule above. */
.tfc-page .has-black-background-color,
.tfc-page .has-bark-background-color {
  color: var(--color-text-on-dark);
}

.tfc-page .has-black-background-color :is(h1, h2, h3, h4),
.tfc-page .has-bark-background-color :is(h1, h2, h3, h4) {
  color: var(--color-text-on-dark);
}

/* ---------------------------------------------------------------
 * 3. Section padding
 *
 * A full bleed group needs inner padding or its content touches the viewport
 * edge. Applied to the section itself, not to an inner wrapper: WordPress adds
 * the is-layout-constrained classes at render time rather than saving them into
 * the block markup, and the old .wp-block-group__inner-container element is not
 * emitted for a constrained group at all. Padding here is the only selector
 * that holds in both the editor and the front end.
 * ------------------------------------------------------------- */

.tfc-page .tfc-section,
.tfc-page .tfc-hero {
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.tfc-page .tfc-section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.tfc-page .tfc-section--tight {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .tfc-page .tfc-section {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }
}

/* Centre a readable column where a block is not already inside a constrained
   layout. Sections rely on theme.json contentSize instead. */
.tfc-page .tfc-container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------
 * 4. Cards and buttons
 * ------------------------------------------------------------- */

.tfc-page .tfc-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tfc-page .wp-block-button__link {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.tfc-page .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.tfc-page .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.tfc-page .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: currentColor;
}

/* ---------------------------------------------------------------
 * 5. Grids
 *
 * Core Columns goes to a fixed percentage split, which is why the prototype
 * broke at awkward widths. Add this class to a Columns block to make it wrap on
 * content rather than at a breakpoint. No media queries needed.
 * ------------------------------------------------------------- */

.tfc-page .tfc-autogrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-5);
}

.tfc-page .tfc-autogrid > .wp-block-column {
  flex-basis: auto !important; /* overrides the inline flex-basis core prints */
}

.tfc-page .tfc-autogrid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}

/* ---------------------------------------------------------------
 * 6. Images
 * ------------------------------------------------------------- */

.tfc-page img {
  max-width: 100%;
  height: auto;
}

.tfc-page .tfc-media-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===============================================================
 * 7. Shortcode components
 *
 * Used by [tfc_delivery_zones] and [tfc_postcode_checker], which can appear on
 * any page, so these are not scoped to .tfc-page. Every class is tfc- prefixed.
 * Two class selectors where Razzi styles the element type, because
 * input[type="text"] outranks a single class.
 * ============================================================= */

.tfc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tfc-note {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  margin: 0 0 14px;
}

.tfc-zone-lists h3,
.tfc-checker h3 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h4);
  color: var(--color-text-heading);
  margin: 0 0 8px;
}

.tfc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: 28px;
}

.tfc-chips:last-child {
  margin-bottom: 0;
}

.tfc-tag {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-body);
  white-space: nowrap;
}

.tfc-checker {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.tfc-checker h3 {
  margin-bottom: 4px;
}

.tfc-checker form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}

.tfc-checker__field {
  flex: 1 1 180px;
}

.tfc-checker .tfc-input {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-body);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  width: 100%;
  min-width: 0;
  margin: 0;
  height: auto;
}

.tfc-checker .tfc-input::placeholder {
  color: var(--color-text-faint);
}

.tfc-checker .tfc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  border-radius: var(--radius-md);
  padding: 12px 20px;
  background: transparent;
  color: var(--color-text-heading);
  border: 1px solid var(--color-border-strong);
  transition: background var(--duration-base) var(--ease-standard);
}

.tfc-checker .tfc-btn:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text-heading);
  border-color: var(--color-border-strong);
}

.tfc-checker__result {
  margin-top: var(--space-4);
}

.tfc-alert {
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: var(--text-small);
  line-height: var(--leading-normal);
}

.tfc-alert--info {
  background: var(--color-surface-sunken);
  color: var(--color-text-body);
}

.tfc-alert--success {
  background: var(--color-success-tint);
  color: var(--color-success);
}

.tfc-alert--danger {
  background: var(--color-danger-tint);
  color: var(--color-danger);
}

/* ---- Live price table, from [tfc_price_table] ---- */

/* Both selectors on purpose. Inside a section page, .tfc-page h1-h4 sets the
   display face at two class specificity, so a single class loses. */
.tfc-subhead,
.tfc-page .tfc-subhead {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h4);
  color: var(--color-text-heading);
  letter-spacing: normal;
  text-align: center;
  margin: 0 0 20px;
}

.tfc-price-set + .tfc-price-set {
  margin-top: var(--space-7);
}

/* Flex, not grid, here. The number of bag sizes differs per product and changes
   when James restocks: six for seasoned, two for kiln dried today. An auto-fit
   grid gives the two card row two half width tracks and strands the cards far
   apart. Flex wrap keeps them adjacent and centred whatever the count. */
.tfc-price-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.tfc-price-card {
  flex: 1 1 150px;
  max-width: 200px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.tfc-price-card--marked {
  border-color: var(--color-primary);
}

.tfc-price-card p {
  margin: 0;
}

.tfc-price-card__label {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.tfc-price-card__amount {
  font-family: var(--font-display);
  color: var(--color-primary);
  /* Sized here rather than with a font size preset: at 390px two cards leave
     about 115px of usable width, and 28px Alfa Slab One breaks a figure like
     GBP 277.50 across two lines. nowrap makes overflow visible, not silent. */
  font-size: clamp(20px, 5.2vw, 28px);
  white-space: nowrap;
  line-height: 1.1;
  margin-top: var(--space-2);
}

.tfc-price-card__each {
  color: var(--color-text-faint);
  font-size: var(--text-micro);
  margin-top: var(--space-1);
  white-space: nowrap;
}

/* ---- Product card call to action, from [tfc_product_cta] ---- */

.tfc-product-cta {
  margin-top: var(--space-5);
}

.tfc-product-cta__price {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-3);
}

.tfc-product-cta__price--out {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

.tfc-product-cta__action {
  margin: 0;
}

.tfc-product-cta .tfc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: 12px 24px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 1px solid var(--color-primary);
  transition: background var(--duration-base) var(--ease-standard);
}

.tfc-product-cta .tfc-btn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

/* ===============================================================
 * 8. Section classes used by the patterns
 * ============================================================= */

/* ---- Hero ----
 * The background image lives here rather than in the block, so the pattern
 * carries no markup that block validation can argue with. To change the
 * photograph, replace assets/img/hero-logs.jpg or override --tfc-hero-image.
 */
.tfc-page .tfc-hero {
  --tfc-hero-image: url("../img/hero-logs.jpg");
  min-height: clamp(420px, 55vw, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  background-image: linear-gradient(rgba(13, 10, 8, .5), rgba(13, 10, 8, .55)), var(--tfc-hero-image);
  background-size: cover;
  background-position: center;
}

.tfc-page .tfc-hero :is(h1, h2, p) {
  color: #fff;
}

.tfc-page .tfc-hero h1 {
  max-width: 820px;
}

.tfc-page .tfc-hero p {
  max-width: 640px;
  line-height: var(--leading-snug);
}

/* ---- Prose ---- */
.tfc-page .tfc-prose p {
  margin-top: 0;
  margin-bottom: 20px;
}

.tfc-page .tfc-prose p:last-child {
  margin-bottom: 0;
}

/* Every auto-fit grid below uses minmax(min(Npx, 100%), 1fr) rather than
   minmax(Npx, 1fr). A bare minimum larger than the container does not shrink, it
   overflows: the 420px split grid pushed the page 54px wide at a 390px viewport
   until this was added. */
/* ---- Two up split, text beside an image ----
 * 420px rather than the prototype's 320px. The delivery paragraph is long, and
 * at 320px the pair goes side by side on a tablet where the text column ends up
 * a narrow ribbon beside a short image and a column of dead space. At 420px it
 * stays stacked until there is room for both to look deliberate.
 */
.tfc-page .tfc-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--space-7);
  align-items: center;
}

.tfc-page .tfc-split-grid > .wp-block-column {
  flex-basis: auto !important;
}

/* ---- Product cards ---- */
.tfc-page .tfc-card-media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.tfc-page .tfc-card-media {
  margin: 0;
}

.tfc-page .tfc-card-body {
  padding: 28px;
}

/* ---- Zones, chips beside the checker ---- */
.tfc-page .tfc-zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px;
}

.tfc-page .tfc-zones > .wp-block-column {
  flex-basis: auto !important;
}

/* ---- Band, a sunken section between two cream ones ---- */
.tfc-page .tfc-band {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.tfc-page .tfc-band img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ---- Contact ---- */
.tfc-page .tfc-phone {
  font-family: var(--font-display);
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: var(--space-2) !important;
}

.tfc-page .tfc-phone a {
  color: inherit;
  text-decoration: none;
}

.tfc-page .tfc-logo {
  max-width: 220px;
}

.tfc-page .tfc-logo img {
  width: 100%;
  height: auto;
}

/* Orange call to action band. The button is a white preset, so only the
   heading needs help. */
.tfc-page .has-orange-background-color :is(h1, h2, h3, h4),
.tfc-page .has-orange-background-color p {
  color: #fff;
}

/* ---- Buttons in the patterns ---- */
.tfc-page .tfc-hero .wp-block-button__link {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lead);
}

/* White button on the orange band. The selector has to match the length of the
   default button rule in section 4, or that rule wins on specificity. */
.tfc-page .tfc-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lead);
  background-color: #fff;
  color: var(--color-primary);
}

.tfc-page .tfc-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--tfc-cream-200);
  color: var(--color-primary-active);
}