/*
Theme Name: Restore & Refine
Theme URI: https://restoreandrefine.co.nz/
Author: Restore & Refine
Description: Custom WordPress theme built to match the design and structure of restoreandrefine.co.nz. Includes reusable page templates for Service pages and Location pages so new pages can be added in the same style as the live site.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: restore-refine
*/

/* =========================================================
   NOTE ON COLORS / FONTS
   The live site is built in Elementor and its exact brand
   hex codes and font files are stored in Elementor's Global
   Settings (not exposed in page HTML). The palette below is
   a close approximation based on the site's black/white logo
   and neutral, warm aesthetic. Swap the CSS variables below
   for the exact brand values (Site Settings > Global Colors
   / Global Fonts in Elementor) before using in production.
   ========================================================= */

:root{
  --rr-charcoal:      #1e1e1e;
  --rr-charcoal-soft:  #333333;
  --rr-cream:          #faf7f2;
  --rr-white:          #ffffff;
  --rr-accent:         #b08a5f;
  --rr-accent-dark:    #8f6f47;
  --rr-border:         #e5e0d8;
  --rr-font-heading:  'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --rr-font-body:     'Jost', 'Helvetica Neue', Arial, sans-serif;
  --rr-radius:         6px;
  --rr-max-width:      1140px;
}

*, *::before, *::after{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: var(--rr-font-body);
  color: var(--rr-charcoal-soft);
  background: var(--rr-white);
  line-height: 1.6;
  font-size: 16px;
}

h1, h2, h3, h4, h5, .rr-heading{
  font-family: var(--rr-font-heading);
  color: var(--rr-charcoal);
  line-height: 1.25;
  margin: 0 0 .6em;
  font-weight: 600;
}

a{ color: var(--rr-accent-dark); text-decoration: none; }
a:hover{ color: var(--rr-accent); }

img{ max-width: 100%; height: auto; display: block; }

.rr-container{
  max-width: var(--rr-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.rr-site-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--rr-border);
}
.rr-logo img{ max-height: 42px; }
.rr-nav ul{ list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.rr-nav a{ color: var(--rr-charcoal); font-weight: 500; }
.rr-header-actions{ display: flex; align-items: center; gap: 16px; }
.rr-btn{
  display: inline-block;
  padding: 12px 26px;
  border-radius: var(--rr-radius);
  background: var(--rr-charcoal);
  color: var(--rr-white);
  font-weight: 600;
  letter-spacing: .02em;
  border: 2px solid var(--rr-charcoal);
  transition: background .2s ease, color .2s ease;
}
.rr-btn:hover{ background: transparent; color: var(--rr-charcoal); }
.rr-btn--outline{ background: transparent; color: var(--rr-charcoal); }
.rr-btn--outline:hover{ background: var(--rr-charcoal); color: var(--rr-white); }

.rr-hero{
  background: var(--rr-charcoal);
  color: var(--rr-white);
  text-align: center;
  padding: 90px 24px;
}
.rr-hero h1, .rr-hero .rr-eyebrow{ color: var(--rr-white); }
.rr-hero .rr-eyebrow{
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.rr-hero p{ max-width: 640px; margin: 0 auto 30px; font-size: 1.1rem; opacity: .9; }

.rr-section{ padding: 80px 0; }
.rr-section--cream{ background: var(--rr-cream); }
.rr-section-heading{ text-align: center; max-width: 720px; margin: 0 auto 48px; }

.rr-tiles.wp-block-columns{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.rr-tiles .wp-block-column{
  border: 1px solid var(--rr-border);
  border-radius: var(--rr-radius);
  overflow: hidden;
  text-align: center;
  background: var(--rr-white);
  margin: 0;
}
.rr-tiles .wp-block-image{ margin: 0; }
.rr-tiles .wp-block-image img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rr-tile-label{ padding: 18px; font-weight: 600; margin: 0; }
.rr-tile-label a{ color: inherit; }

.rr-checklist{ max-width: 760px; margin: 0 auto; }
.rr-checklist-item{ position: relative; padding: 18px 0 18px 32px; border-bottom: 1px solid var(--rr-border); }
.rr-checklist-item:last-child{ border-bottom: none; }
.rr-checklist-item::before{ content: "\2713"; position: absolute; left: 0; top: 18px; color: var(--rr-accent-dark); font-weight: 700; font-size: 1.2rem; }

.rr-service-list{ list-style: none; margin: 0; padding: 0; max-width: 640px; }
.rr-service-list li{ padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid var(--rr-border); }
.rr-service-list li::before{ content: "\2713"; position: absolute; left: 0; color: var(--rr-accent-dark); font-weight: 700; }

.rr-faq-item{ border-bottom: 1px solid var(--rr-border); padding: 18px 0; }
.rr-faq-item h4{ margin-bottom: 8px; }

.rr-cta{
  text-align: center;
  padding: 70px 24px;
  background: var(--rr-cream);
}
.rr-cta .rr-btn-row{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

.rr-site-footer{
  padding: 34px 0;
  border-top: 1px solid var(--rr-border);
  text-align: center;
  font-size: .9rem;
  color: #777;
}
.rr-site-footer a{ color: var(--rr-charcoal); }
.rr-site-footer a:hover{ color: var(--rr-accent); }
.rr-site-footer .rr-nav{ margin-bottom: 14px; }
.rr-site-footer .rr-nav ul{ justify-content: center; flex-wrap: wrap; }

/* Entry content */
.rr-entry-content h2{ margin-top: 1.4em; }
.rr-entry-content img{ border-radius: var(--rr-radius); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .rr-tiles.wp-block-columns{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px){
  .rr-site-header{ flex-direction: column; gap: 14px; }
  .rr-nav ul{ flex-wrap: wrap; justify-content: center; gap: 16px; }
  .rr-tiles.wp-block-columns{ grid-template-columns: 1fr; }
  .rr-hero{ padding: 60px 20px; }
  .rr-hero h1{ font-size: 1.8rem; }
  .rr-section{ padding: 56px 0; }
  .rr-cta .rr-btn-row{ flex-direction: column; align-items: center; }
}