/* ============================================================
   Customed Tiles - inner page styles
   Loaded after custom.css (see custom.css section 0 for the
   design tokens used everywhere below). Page-specific layout
   and components only: no header, footer or global button
   rules live in this file.
   ============================================================ */

/* ------------------------------------------------------------
   1. Price calculator
   /pool_coping_price_calculator/  (body .page-id-401)
   ------------------------------------------------------------ */

/* 1.1 Hero band: turn the plain white title strip into a short
   navy header. The slide li carries an inline white background
   and the widget CSS sets a fixed height, so both need !important. */
.page-id-401 .so-widget-sow-hero,
.page-id-401 .so-widget-sow-hero .sow-slider-base,
.page-id-401 .so-widget-sow-hero ul.sow-slider-images {
  min-height: 220px !important;
}
.page-id-401 .so-widget-sow-hero li.sow-slider-image {
  background: linear-gradient(135deg, var(--ct-navy) 0%, var(--ct-navy-2) 100%) !important;
}
.page-id-401 .so-widget-sow-hero .sow-slider-image-wrapper {
  height: auto !important;
  min-height: 220px;
  max-width: 100%;
  padding: 48px 5% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.page-id-401 .so-widget-sow-hero .sow-slider-image-wrapper h1 {
  color: #ffffff !important;
  text-shadow: none !important;
  font-family: var(--ct-font-head);
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  max-width: 760px;
  margin: 0 !important;
}
@media (max-width: 540px) {
  .page-id-401 .so-widget-sow-hero .sow-slider-image-wrapper h1 {
    font-size: 24px;
  }
}

/* 1.2 The wpcf7 form as a white card. */
.page-id-401 .wpcf7 {
  max-width: 880px;
  margin: 32px auto 60px;
  background: var(--ct-bg);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow);
  padding: 40px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .page-id-401 .wpcf7 {
    padding: 20px;
    margin: 20px auto 40px;
  }
}

/* 1.3 Intro line and section headings. */
.page-id-401 .coping-welcome {
  font-family: var(--ct-font-body);
  color: var(--ct-muted);
  font-size: 16px;
}
.page-id-401 .coping-h3 {
  font-family: var(--ct-font-head);
  color: var(--ct-ink);
  font-size: 19px;
}
.page-id-401 .coping-cta-h3 {
  border-top: 2px solid var(--ct-line) !important;
  margin: 44px 0 20px !important;
  padding: 28px 0 0 !important;
  font-size: 18px;
  color: var(--ct-ink);
}
.page-id-401 .coping-cta-sub {
  color: var(--ct-muted);
}

/* 1.4 Tier headers as small uppercase pills. */
.page-id-401 .coping-tier-header {
  display: inline-block;
  clear: both;
  background: var(--ct-bg-soft);
  color: var(--ct-blue-dark);
  border-left: none;
  border-radius: 999px;
  padding: 6px 16px;
  font-family: var(--ct-font-head);
}
.page-id-401 .coping-tier-header p {
  margin: 0;
}

/* 1.5 Coping style cards: 3 columns on desktop, 2 on tablet,
   1 under 540px. The inline calculator CSS floats the cards
   with !important, so the grid rules below need matching
   specificity and !important to take over the layout. */
.page-id-401 .coping-profile-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin: 0 0 8px !important;
}
.page-id-401 .coping-card {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .page-id-401 .coping-profile-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 540px) {
  .page-id-401 .coping-profile-grid {
    grid-template-columns: 1fr !important;
  }
}
.page-id-401 .coping-img-wrap {
  border-radius: 14px;
}
.page-id-401 .coping-card:hover .coping-img-wrap {
  box-shadow: var(--ct-shadow-sm);
}
.page-id-401 .coping-card-name {
  font-size: 16px;
  padding: 10px 12px;
}
.page-id-401 .coping-card.selected .coping-img-wrap {
  border-color: var(--ct-blue);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.35);
}
.page-id-401 .coping-card.selected .coping-img-wrap::after {
  content: "\2713";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ct-blue);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(6, 58, 90, 0.3);
}

/* 1.6 Thickness pills in the brand blue. */
.page-id-401 .thickness-pill {
  border-color: var(--ct-blue);
  color: var(--ct-blue-dark);
  border-radius: var(--ct-radius);
  font-family: var(--ct-font-body);
  padding: 10px 22px;
  font-size: 15px;
}
.page-id-401 .thickness-pill:hover {
  background: var(--ct-bg-soft);
}
.page-id-401 .thickness-pill.active {
  background: var(--ct-blue);
  border-color: var(--ct-blue);
  color: #ffffff;
}
.page-id-401 .thickness-pill.disabled {
  border-color: var(--ct-line);
  color: var(--ct-muted);
  background: var(--ct-bg-soft);
}

/* 1.7 Big number inputs. */
.page-id-401 #coping_meters,
.page-id-401 #coping_dropface {
  font-size: 20px;
  font-weight: 700;
  width: 100%;
  max-width: 320px;
  min-height: 52px;
  padding: 12px 16px;
  box-sizing: border-box;
}
.page-id-401 .wpcf7-form em {
  color: var(--ct-muted);
  font-style: italic;
  font-size: 14px;
}
.page-id-401 .coping-cut-note {
  color: var(--ct-muted);
}
.page-id-401 .coping-cut-label input[type="checkbox"] {
  accent-color: var(--ct-blue);
}

/* 1.8 Instant estimate block: plain labels above the inputs, the
   block itself is the only container. */
.page-id-401 .coping-field-label {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 18px !important;
  box-sizing: border-box;
}
.page-id-401 .coping-field-label .wpcf7-form-control-wrap {
  display: block;
}

/* 1.9 Submit: width and spacing only, the yellow look is global. */
.page-id-401 .wpcf7-submit {
  min-width: 220px;
  margin: 8px 12px 8px 0;
}

/* ------------------------------------------------------------
   2. FAQ
   /pool-coping-faq-all-you-need-to-know-about-our-pool-coping-services/
   (body .page-id-607.page-layout-default.sidebar)
   ------------------------------------------------------------ */

/* 2.1 Hide the sidebar (search form + empty Recent Comments) and
   let the content take the full width. The theme's .sidebar rules
   use the same class count as these, so the later position of
   this file settles the tie; !important removes any doubt. */
.page-id-607 #secondary {
  display: none;
}
.page-id-607 .content-area {
  float: none !important;
  margin: 0 !important;
  width: 100% !important;
}
.page-id-607 .site-main {
  margin: 0 !important;
}

/* 2.2 Centred readable column. */
.page-id-607 .entry-header {
  text-align: center;
  padding-top: 20px;
}
.page-id-607 .entry-title {
  font-family: var(--ct-font-head);
  color: var(--ct-navy);
  font-size: 34px;
  max-width: 800px;
  margin: 0 auto 8px;
}
.page-id-607 .entry-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 8px 0 80px;
}
.page-id-607 .entry-content > h2 {
  font-family: var(--ct-font-head);
  color: var(--ct-blue-dark);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 40px;
}
.page-id-607 .entry-content h3 {
  font-family: var(--ct-font-head);
  color: var(--ct-ink);
  font-size: 20px;
  border-left: 4px solid var(--ct-yellow);
  padding-left: 16px;
  margin: 40px 0 12px;
}
.page-id-607 .entry-content p {
  color: var(--ct-text);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 12px;
}
.page-id-607 .entry-content a {
  color: var(--ct-blue-dark);
}
.page-id-607 .entry-content a:hover {
  color: var(--ct-blue);
}
@media (max-width: 768px) {
  .page-id-607 .entry-title {
    font-size: 26px;
  }
  .page-id-607 .entry-content h3 {
    font-size: 18px;
    margin-top: 32px;
  }
}

/* ------------------------------------------------------------
   3. Contact
   /contact/  (body .page-id-292)
   ------------------------------------------------------------ */

/* 3.1 Hero photo: shrink to a banner and add a navy gradient
   footer so the empty heading area still reads as a design
   element rather than a plain photo. */
.page-id-292 .so-widget-sow-hero,
.page-id-292 .so-widget-sow-hero .sow-slider-base,
.page-id-292 .so-widget-sow-hero ul.sow-slider-images,
.page-id-292 .so-widget-sow-hero .sow-slider-image-wrapper {
  min-height: 360px !important;
}
.page-id-292 .so-widget-sow-hero .sow-slider-image-wrapper {
  height: auto !important;
  padding: 40px 5% !important;
  box-sizing: border-box;
}
.page-id-292 .so-widget-sow-hero li.sow-slider-image {
  position: relative;
}
.page-id-292 .so-widget-sow-hero li.sow-slider-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(6, 58, 90, 0) 0%, rgba(6, 58, 90, 0.8) 100%);
  pointer-events: none;
  z-index: 3;
}
@media (max-width: 540px) {
  .page-id-292 .so-widget-sow-hero,
  .page-id-292 .so-widget-sow-hero .sow-slider-base,
  .page-id-292 .so-widget-sow-hero ul.sow-slider-images,
  .page-id-292 .so-widget-sow-hero .sow-slider-image-wrapper {
    min-height: 260px !important;
  }
}

/* 3.2 Row 1: the Contact Us details as a white card. */
.page-id-292 #pg-292-1 {
  max-width: 760px;
  margin: 56px auto 40px;
  padding: 0 15px;
  box-sizing: border-box;
}
.page-id-292 #panel-292-1-0-0 {
  background: var(--ct-bg);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow);
  padding: 40px;
  box-sizing: border-box;
}
.page-id-292 #panel-292-1-0-0 .widget-title {
  font-family: var(--ct-font-head);
  color: var(--ct-navy);
  font-size: 24px;
  margin: 0 0 20px;
}
.page-id-292 #panel-292-1-0-0 .textwidget p {
  color: var(--ct-text);
  margin: 0 0 10px;
}
.page-id-292 #panel-292-1-0-0 .textwidget a {
  color: var(--ct-blue-dark);
  font-weight: 600;
}
/* Definition-like layout: the label lines (Phone:, Email:) read as
   small caps terms, the value lines (the number, the link) as the
   prominent answer. Paragraph order comes from the page content. */
.page-id-292 #panel-292-1-0-0 .textwidget p:nth-of-type(3),
.page-id-292 #panel-292-1-0-0 .textwidget p:nth-of-type(5) {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  font-weight: 700;
  color: var(--ct-muted);
  margin-bottom: 2px;
}
.page-id-292 #panel-292-1-0-0 .textwidget p:nth-of-type(4) {
  font-size: 20px;
  font-weight: 700;
  color: var(--ct-navy);
  margin-bottom: 20px;
}
.page-id-292 #panel-292-1-0-0 .textwidget p:nth-of-type(6) a {
  font-size: 18px;
  font-weight: 700;
}

/* 3.3 Row 2: light 4-column info band. */
.page-id-292 #pg-292-2 {
  background: var(--ct-bg-soft);
  border-radius: var(--ct-radius-lg);
  padding: 48px 40px;
  margin: 0 0 60px;
}
.page-id-292 #pg-292-2 .widget-title,
.page-id-292 #pg-292-2 .siteorigin-widget-tinymce h3 {
  font-family: var(--ct-font-head);
  color: var(--ct-navy);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.page-id-292 #pg-292-2 .textwidget p,
.page-id-292 #pg-292-2 .siteorigin-widget-tinymce p {
  color: var(--ct-text);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 768px) {
  .page-id-292 #pg-292-2 {
    padding: 32px 24px;
  }
}

/* 3.4 Social buttons: round, navy, yellow on hover. SiteOrigin
   prints this widget's own colour CSS as a late <link> (after this
   file), and it matches the same class at the same specificity, so
   the button-shape rules need one more ancestor class plus
   !important to hold their ground regardless of load order. */
.page-id-292 .social-media-button-container .sow-social-media-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  margin: 0 8px 0 0 !important;
}
.page-id-292 .social-media-button-container .sow-social-media-button-facebook-0,
.page-id-292 .social-media-button-container .sow-social-media-button-instagram-0 {
  background: var(--ct-navy) !important;
  border-color: var(--ct-navy) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.page-id-292 .social-media-button-container .sow-social-media-button-facebook-0.ow-button-hover:hover,
.page-id-292 .social-media-button-container .sow-social-media-button-facebook-0.ow-button-hover:focus,
.page-id-292 .social-media-button-container .sow-social-media-button-instagram-0.ow-button-hover:hover,
.page-id-292 .social-media-button-container .sow-social-media-button-instagram-0.ow-button-hover:focus {
  background: var(--ct-yellow) !important;
  border-color: var(--ct-yellow) !important;
  color: var(--ct-navy) !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------
   4. Quote
   /quote/  (body .page-id-303)
   ------------------------------------------------------------ */

/* The order-form app injects its own markup and stylesheet at
   runtime (it is Angular Material, not Bootstrap/Bulma classes),
   so this only wraps the column, nudges its purple mat-primary
   buttons toward the brand navy, and contains a fixed-width inline
   diagram (.tilesizer, width:30em) that otherwise forces the page
   to scroll sideways on a phone. */
.page-id-303 .entry-content {
  max-width: 900px;
  margin: 40px auto 60px;
  overflow-x: hidden;
}
.page-id-303 .entry-content h2,
.page-id-303 .entry-content h3 {
  font-family: var(--ct-font-head);
  color: var(--ct-navy);
}
.page-id-303 .entry-content .mat-raised-button.mat-primary {
  background-color: var(--ct-navy) !important;
}
.page-id-303 .entry-content .mat-raised-button.mat-primary:hover {
  background-color: var(--ct-navy-2) !important;
}
.page-id-303 .entry-content .tilesizer {
  max-width: 100% !important;
}

/* ------------------------------------------------------------
   5. Thank-you
   /thank-you/  (body .page-id-359)
   ------------------------------------------------------------ */

.page-id-359 .entry-content {
  background: var(--ct-bg-soft);
  padding: 20px;
  min-height: 50vh;
  box-sizing: border-box;
}
.page-id-359 .entry-content > div:first-child {
  background: var(--ct-bg);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow);
  box-sizing: border-box;
}
.page-id-359 .entry-content h1 {
  color: var(--ct-navy) !important;
  font-family: var(--ct-font-head);
}
.page-id-359 .entry-content p {
  color: var(--ct-muted) !important;
}

/* ------------------------------------------------------------
   6. Visualizer
   /pool-copingvisualizer/  (body .page-id-562)
   ------------------------------------------------------------ */

/* 6.0 The bands below are pulled out to the viewport edges with
   100vw, which counts the vertical scrollbar on the browsers that
   still reserve room for one. Clipping the page on the x axis
   swallows that overhang. clip, not hidden: it makes no scroll
   container, so the sticky header keeps working. */
body.page-id-562 {
  overflow-x: clip;
}

/* 6.1 Title band. The theme wraps the article in .corp-container
   (max-width 1170px, padding 0 15px), so the band pulls itself out
   to the viewport edges and pushes the text back in as padding,
   which also caps the text at a 900px column. The intro paragraph
   is the first child of .entry-content, one box below the header,
   and repeats the pull: both are exactly 100vw wide, so the same
   left-to-right gradient meets across the seam. */
.page-id-562 .entry-header,
.page-id-562 .entry-content > p:first-of-type {
  background: linear-gradient(to right, var(--ct-navy) 0%, var(--ct-navy-2) 100%);
  margin: 0 calc(50% - 50vw);
  padding: 0 max(20px, calc(50vw - 450px));
  text-align: center;
}
.page-id-562 .entry-header {
  padding-top: 48px;
  padding-bottom: 14px;
}
.page-id-562 .entry-title {
  font-family: var(--ct-font-head);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  color: var(--ct-bg);
  margin: 0;
}
.page-id-562 .entry-content > p:first-of-type {
  padding-bottom: 44px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--ct-font-body);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 0;
}

/* 6.2 The page copy carries hard line breaks from the editor and a
   stray empty paragraph after the two script tags. Both are markup
   the page cannot drop, so they are taken out of the flow here. */
.page-id-562 .entry-content > p:first-of-type br,
.page-id-562 .entry-content > br {
  display: none;
}
.page-id-562 .entry-content > p:last-of-type:empty {
  display: none;
}

/* 6.3 The strip under the band: soft ground, edge to edge, with the
   card held at 1200px and 64px of air under it. */
.page-id-562 .entry-content {
  background: var(--ct-bg-soft);
  margin: 0 calc(50% - 50vw);
  padding: 0 max(15px, calc(50vw - 600px)) 64px;
}

/* 6.4 The component as a white card. It reads its colours, its
   corner radius and its font from --pv- custom properties set on
   the host element, and the site tokens are handed to it below. Its
   panels lay themselves out down to a phone, so the card needs no
   scroller of its own. */
.page-id-562 pool-visualizer {
  display: block;
  margin: 40px 0 0;
  padding: 24px;
  background: var(--ct-bg);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow);
  font-family: var(--ct-font-body);
  color: var(--ct-text);

  --pv-accent: var(--ct-blue);
  --pv-accent-dark: var(--ct-blue-dark);
  --pv-ink: var(--ct-ink);
  --pv-text: var(--ct-text);
  --pv-muted: var(--ct-muted);
  --pv-line: var(--ct-line);
  --pv-panel-bg: var(--ct-bg-soft);
  --pv-radius: var(--ct-radius);
  --pv-font: var(--ct-font-body);
}

@media (max-width: 768px) {
  .page-id-562 .entry-header {
    padding-top: 28px;
    padding-bottom: 10px;
  }
  .page-id-562 .entry-title {
    font-size: 28px;
  }
  .page-id-562 .entry-content > p:first-of-type {
    padding-bottom: 28px;
    font-size: 15px;
  }
  .page-id-562 .entry-content {
    padding-left: 12px;
    padding-right: 12px;
  }
  .page-id-562 pool-visualizer {
    margin-top: 24px;
    padding: 12px;
  }
}