/* Modern reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Custom properties (design tokens — overridden per Customizer inline <style>) */
:root {
  --color-primary:   #2b6cb0;
  --color-secondary: #4a5568;
  --color-text:      #2d3748;
  --color-bg:        #ffffff;
  --color-link:      #2b6cb0;
  --color-muted:     #718096;
  --color-border:    #e2e8f0;
  --color-surface:   #f7fafc;

  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-md:   1.125rem;
  --font-size-lg:   1.25rem;
  --font-size-xl:   1.5rem;
  --font-size-xxl:  2rem;
  --font-size-xxxl: 2.5rem;

  --line-height-body:    1.7;
  --line-height-heading: 1.3;

  --space-xs:  0.25rem;
  --space-s:   0.5rem;
  --space-m:   1rem;
  --space-l:   1.5rem;
  --space-xl:  3rem;
  --space-xxl: 5rem;

  --content-width: 1200px;
  --main-width:    68%;
  --loop-columns:  3;

  --radius-s: 4px;
  --radius-m: 8px;
  --shadow-s: 0 1px 3px rgba(0,0,0,.08);
  --shadow-m: 0 4px 12px rgba(0,0,0,.10);
}

/* Base */
body {
  font-family: var(--font-body);
  font-size:   var(--font-size-base);
  line-height: var(--line-height-body);
  color:       var(--color-text);
  background:  var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family:   var(--font-heading);
  line-height:   var(--line-height-heading);
  color:         var(--color-text);
  margin-bottom: var(--space-s);
}
h1 { font-size: var(--font-size-xxxl); }
h2 { font-size: var(--font-size-xxl);  }
h3 { font-size: var(--font-size-xl);   }
h4 { font-size: var(--font-size-lg);   }
h5 { font-size: var(--font-size-md);   }
h6 { font-size: var(--font-size-base); }

p  { margin-bottom: var(--space-m); }
ul, ol { padding-left: var(--space-l); margin-bottom: var(--space-m); }

a {
  color:           var(--color-link);
  text-decoration: none;
}
a:hover, a:focus { text-decoration: underline; }

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

/* Images */
img { border-radius: var(--radius-s); }
figure { margin: 0; }
figcaption {
  font-size:  var(--font-size-sm);
  color:      var(--color-muted);
  margin-top: var(--space-xs);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  width:         100%;
  padding:       var(--space-s) var(--space-m);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-s);
  background:    var(--color-bg);
  color:         var(--color-text);
  font-size:     var(--font-size-base);
}
input:focus, textarea:focus, select:focus {
  outline:        2px solid var(--color-primary);
  outline-offset: 2px;
  border-color:   var(--color-primary);
}
button,
input[type="submit"],
input[type="button"] {
  cursor:        pointer;
  padding:       var(--space-s) var(--space-l);
  background:    var(--color-primary);
  color:         #fff;
  border:        none;
  border-radius: var(--radius-s);
  font-size:     var(--font-size-base);
}
button:hover, input[type="submit"]:hover { opacity: .9; }

/* WordPress alignment classes */
.alignleft  { float: left;  margin-right: var(--space-l); margin-bottom: var(--space-m); }
.alignright { float: right; margin-left:  var(--space-l); margin-bottom: var(--space-m); }
.aligncenter { display: block; margin: 0 auto var(--space-m); }
.alignwide  { margin-left: calc(-1 * var(--space-xl)); margin-right: calc(-1 * var(--space-xl)); max-width: none; }
.alignfull  { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.wp-block-image img { height: auto; }

/* Screen reader / skip link */
.screen-reader-text {
  clip: rect(1px,1px,1px,1px);
  height: 1px; width: 1px;
  overflow: hidden;
  position: absolute !important;
}
.screen-reader-text:focus {
  background: var(--color-surface);
  clip: auto;
  height: auto; width: auto;
  padding: var(--space-m) var(--space-l);
  position: static !important;
  z-index: 100000;
}
.skip-link { position: absolute; top: -100%; left: 0; }
.skip-link:focus { top: 0; }