/*
Theme Name: St Martins Bold Scout
Theme URI: https://www.smartscouts.co.nz
Author: St Martins Scout Group
Description: A bold, easily-editable block theme for St Martins Scout Group, Christchurch. Full Site Editing - edit every page, colour, and word visually under Appearance > Editor. No page builder or plugins required.
Version: 1.2.4
Requires at least: 6.4
Tested up to: 6.7
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: stmartins-bold-scout
*/

/* ---- Supplemental styles (most styling lives in theme.json) ---- */

/* Hero highlight word */
.smbs-hero .hl { color: var(--wp--preset--color--yellow); }

/* Section cards lift slightly on hover */
.smbs-card { transition: transform .2s ease; height: 100%; }
.smbs-card:hover { transform: translateY(-4px); }

/* Make header links readable on the purple bar */
.smbs-header .wp-block-site-title a,
.smbs-header .wp-block-navigation a { color: #fff; text-decoration: none; }
.smbs-header .wp-block-navigation a:hover { opacity: .8; }

/* Footer links */
.smbs-footer a { color: #b3a9c6; text-decoration: none; }
.smbs-footer a:hover { color: #fff; }

/* Tidy default link underlines inside cards */
.smbs-card a { text-decoration: none; }

/* ---- sub-page pattern helpers ---- */
.smbs-step-n{width:34px;height:34px;border-radius:50%;background:var(--wp--preset--color--purple);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:"Bricolage Grotesque",sans-serif}
.smbs-cal{border-radius:12px;overflow:hidden;border:1px solid #e3dcef}
.smbs-cal iframe{display:block}
.smbs-pageband .wp-block-post-title{color:#fff}

/* Remove the default vertical gap between header / main / footer so the
   purple header sits flush with the purple page band (sections provide
   their own spacing via padding). */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

/* Hero: keep intro text left-aligned at a readable width (constrained
   layout otherwise auto-centres narrower blocks) + faint compass graphic. */
.smbs-hero {
  position: relative; overflow: hidden;
  /* HERO WATERMARK: the faint graphic behind the headline.
     To use your own logo, upload it (Media library), copy its URL, and
     override just this one line in Appearance > Editor > Styles > Additional CSS:
         .smbs-hero { --smbs-hero-watermark: url("https://YOUR-SITE/wp-content/uploads/your-logo.png"); }
     A white, transparent PNG or SVG works best. Tweak opacity/size on ::after if needed. */
  --smbs-hero-watermark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3'%3E%3Ccircle%20cx='100'%20cy='100'%20r='90'/%3E%3Ccircle%20cx='100'%20cy='100'%20r='60'/%3E%3Cpath%20d='M100%2010v180M10%20100h180M30%2030l140%20140M170%2030L30%20170'/%3E%3C/svg%3E");
}
.smbs-herowrap { max-width: 1140px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.smbs-hero h1 { max-width: 880px; }
.smbs-hero p { max-width: 560px; }
.smbs-hero::after {
  content: ""; position: absolute; right: -40px; top: -30px;
  width: 520px; height: 520px; opacity: .16; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-size: contain;
  background-image: var(--smbs-hero-watermark);
}

/* Header placeholder logo */
.smbs-header .smbs-logo svg { width: 34px; height: 34px; display: block; }

/* Left-aligned prose column (e.g. About page), overriding the constrained
   layout's forced auto-centering. */
.smbs-prose { max-width: 760px; margin-left: 0 !important; margin-right: auto !important; }
.smbs-prose > * { margin-left: 0 !important; margin-right: auto !important; text-align: left; }