/*
Theme Name: PropFoto SA
Theme URI: https://propfotosa.co.za
Author: PropFoto SA
Description: A single-page property photography business theme. The homepage is built entirely from native WordPress blocks (headings, paragraphs, columns, buttons, tables) so every headline, price and word of copy can be edited directly in the block editor — no code required.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: propfoto
*/

:root{
  --ink:#161a20;
  --ink-soft:#4b5262;
  --paper:#eef0f3;
  --card:#ffffff;
  --card-soft:#f7f7f5;
  --line:#d9dce2;
  --amber:#b8712c;
  --amber-bright:#d98e3f;
  --amber-soft:#f4e3cc;
  --teal:#2f5f62;
  --teal-soft:#dce9e9;
  --shadow: 0 1px 2px rgba(20,20,30,.05), 0 12px 28px -14px rgba(20,20,30,.18);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#eef0f3; --ink-soft:#aab0bf; --paper:#0e1015; --card:#181c24;
    --card-soft:#1d222c; --line:#2a303c; --amber:#e0a35e; --amber-bright:#e0a35e;
    --amber-soft:#3a2e1c; --teal:#7fb3b0; --teal-soft:#1d2f30;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 28px -14px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; line-height:1.55;
}
h1,h2,h3,h4,.wp-block-heading{font-family:'Fraunces',Georgia,serif; margin:0;}
a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:1160px; margin:0 auto; padding-inline:24px;}
@media (max-width:560px){ .wrap{padding-inline:18px;} }
.section{padding-block:76px;}
@media (max-width:700px){ .section{padding-block:52px;} }
.section-band{background:var(--card-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ===== header ===== */
.site-header{
  position:sticky; top:0; z-index:20; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding-block:16px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; text-decoration:none; color:var(--ink);}
.brand .mark{width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.brand .mark img{width:100%; height:100%; object-fit:contain;}
.brand .bracket{stroke:var(--ink);}
.links ul.main-menu{list-style:none; display:flex; gap:28px; margin:0; padding:0; font-size:.92rem; font-weight:500;}
.links ul.main-menu a{text-decoration:none; color:var(--ink-soft);}
.links ul.main-menu a:hover{color:var(--amber);}
@media (max-width:760px){ .links{display:none;} }
.navcta{
  font-size:.85rem; font-weight:600; text-decoration:none; color:#fff;
  background:var(--ink); padding:10px 18px; border-radius:999px; white-space:nowrap;
}

/* ===== footer ===== */
.site-footer{border-top:1px solid var(--line); padding-block:28px; margin-top:20px;}
.footrow{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.82rem; color:var(--ink-soft);}

/* ===== generic text roles (add these as "Additional CSS class" on any block) ===== */
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber); font-weight:600; margin:0 0 14px;
}
.lede{color:var(--ink-soft); font-size:1.05rem; max-width:56ch;}
.accent{color:var(--amber-bright);}
.num{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;}

/* ===== buttons ===== */
.wp-block-buttons{gap:14px !important;}
.wp-block-button .wp-block-button__link{
  font-weight:600; font-size:.94rem; padding:14px 24px; border-radius:999px; border:1px solid transparent;
}
.wp-block-button.btn-primary .wp-block-button__link{background:var(--ink); color:#fff;}
.wp-block-button.btn-ghost .wp-block-button__link{background:transparent; color:var(--ink); border-color:var(--line);}

/* ===== hero ===== */
.hero{padding-block:64px 84px;}
.headline{font-size:clamp(2.3rem,5vw,3.4rem); font-weight:600; letter-spacing:-.01em; text-wrap:balance;}
.segstrip{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.chip{
  display:inline-block; font-size:.78rem; font-weight:600; padding:7px 13px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); color:var(--ink-soft);
}

/* ===== columns as card grids ===== */
.wp-block-columns{gap:16px !important;}
.wp-block-columns.tracks,
.wp-block-columns.why-grid,
.wp-block-columns.ladder{gap:18px !important;}

/* segment cards */
.wp-block-column.seg-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:var(--shadow);
}
.seg-card .idx{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--amber); font-weight:600;}
.seg-card h3{font-size:1.05rem; font-weight:600; margin-top:6px;}
.seg-card p.desc{color:var(--ink-soft); font-size:.88rem; margin-top:8px;}

/* pricing ladder */
.wp-block-column.tier{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow);
}
.wp-block-column.tier.premium{border-color:var(--amber-bright);}
.tier .tagline{color:var(--amber); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin:0;}
.tier .name{font-size:1.3rem; font-weight:600; margin-top:4px;}
.tier .from{margin-top:6px; color:var(--ink-soft); font-size:.9rem;}
.tier .from .amt{font-family:'IBM Plex Mono',monospace; color:var(--ink); font-weight:700; font-size:1.5rem;}
.tier ul.wp-block-list{list-style:none; margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px;}
.tier ul.wp-block-list li{font-size:.9rem; color:var(--ink-soft); padding-left:20px; position:relative;}
.tier ul.wp-block-list li::before{content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:700;}
.tier .wp-block-table{margin-top:12px;}
.tier .wp-block-table table{font-size:.86rem;}
.tier .wp-block-table td{padding:4px 0; border:none;}
.tier .wp-block-table tr td:last-child{text-align:right; font-weight:600; font-family:'IBM Plex Mono',monospace;}
.tier .note{
  font-size:.82rem; color:var(--ink-soft); background:var(--card-soft); border:1px dashed var(--line);
  border-radius:10px; padding:10px 12px; margin-top:12px;
}
.tier.premium .note{background:var(--amber-soft); border-color:var(--amber);}

/* segment tracks */
.wp-block-column.track{background:var(--teal-soft); border:1px solid var(--teal); border-radius:14px; padding:22px;}
.track h4{font-size:1.02rem; font-weight:600; color:var(--teal); margin:0;}
.track p.who{font-size:.82rem; color:var(--ink-soft); margin-top:4px;}
.track ul.wp-block-list{margin:12px 0; padding-left:18px; font-size:.86rem; color:var(--ink);}
.track ul.wp-block-list li{margin-bottom:5px;}
.track .price{font-family:'IBM Plex Mono',monospace; font-weight:700; margin-top:6px;}

/* how it works */
.wp-block-column.step .idx{font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--amber); font-weight:700;}
.wp-block-column.step h4{font-size:1.02rem; font-weight:600; margin-top:10px;}
.wp-block-column.step p.desc{color:var(--ink-soft); font-size:.87rem; margin-top:6px;}

/* why cards */
.wp-block-column.why-card{padding:24px; border-radius:14px; background:var(--ink); color:#f2f0ec;}
.wp-block-column.why-card h4{font-size:1.05rem; font-weight:600; color:inherit; margin:0;}
.wp-block-column.why-card p{margin-top:8px; font-size:.88rem; opacity:.92;}
.wp-block-columns.why-grid .wp-block-column.why-card:nth-child(2){background:var(--amber-bright);}
.wp-block-columns.why-grid .wp-block-column.why-card:nth-child(3){background:var(--teal);}

/* contact */
.contact-panel{
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:44px; box-shadow:var(--shadow);
}
.contact-panel .wp-block-columns{gap:36px !important;}
.contact-row{display:flex; gap:12px; align-items:flex-start; font-size:.92rem; margin-bottom:14px;}
.contact-row .k{font-weight:600; min-width:88px; color:var(--ink-soft); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; padding-top:2px;}
.contact-row .v{font-weight:600;}

/* pages other than the homepage */
.page-title{font-size:2rem; font-weight:600; margin-bottom:24px;}