/* -------------------------
   Variables & Base
   ------------------------- */
:root{
  --max-w:1200px;
  --text:#0b0b0b;
  --muted:#4b4b4b;
  --accent:#876a00;
  --accent-pressed:#00439a;
  --border:#d6d6d6;
  --card-bg:#ffffff;
  --page-bg:#f6f7f8;
  --heading-font: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  --body-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  --radius-md: 10px;
  --shadow-soft: 0 8px 22px rgba(0,0,0,0.08);
}

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

html,body{height:100%}
body{
  margin:0;
  font-family:var(--body-font);
  color:var(--text);
  background:var(--page-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55;
  text-rendering:optimizeLegibility;
}

/* Small accessibility nicety */
:focus{outline:3px solid rgba(0,85,204,0.12);outline-offset:2px}

/* Links */
a{color:var(--accent);text-decoration:none; font-weight:700}
a:hover,a:focus{color:var(--accent-pressed);text-decoration:underline}

/* Container */
.container{max-width:var(--max-w);margin:0 auto;padding:0 12px}

/* -------------------------
   Navigation / Header
   ------------------------- */
.main-nav{
  position:relative;
  background:
    radial-gradient(circle at 50% 0%, rgba(102,138,255,.28) 0, rgba(102,138,255,0) 34%),
    linear-gradient(135deg, #0c2153 0%, #102c67 48%, #17397c 100%);
  border-bottom:1px solid rgba(147,182,255,.18);
  box-shadow:0 18px 40px rgba(8,18,44,.22);
  z-index:60;
}
.main-nav::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, rgba(130,170,255,0), rgba(130,170,255,.55), rgba(130,170,255,0));
}
.nav-inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.main-nav .nav-inner{
  position:relative;
  z-index:1;
}
.nav-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#f5f8ff;
  text-decoration:none;
  white-space:nowrap;
}
.nav-brand:hover,
.nav-brand:focus{
  color:#ffffff;
  text-decoration:none;
}
.nav-brand--logo{
  gap:0;
}
.nav-brand--logo.nav-brand--logo-copy{
  gap:12px;
}
.nav-brand-logo-shell{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}
.nav-brand-logo{
  display:block;
  width:clamp(188px,20vw,280px);
  height:auto;
  max-height:58px;
}
.nav-brand-logo--mark{
  width:clamp(64px,6.6vw,88px);
  max-height:62px;
}
.nav-brand-mark{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  border-radius:14px;
  background:linear-gradient(145deg,#0f172a,#1f2937);
  box-shadow:0 12px 24px rgba(15,23,42,.16);
  color:#fff;
  font:700 22px/1 "Georgia","Times New Roman",serif;
  letter-spacing:.04em;
  position:relative;
  overflow:hidden;
}
.nav-brand-mark::after{
  content:"";
  position:absolute;
  right:6px;
  bottom:6px;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#d4a017;
  box-shadow:0 0 0 3px rgba(212,160,23,.12);
}
.nav-brand-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.nav-brand-copy--with-logo{
  justify-content:center;
}
.nav-brand-name{
  display:block;
  font-family:"DM Serif Display","Georgia","Times New Roman",serif;
  font-size:28px;
  line-height:1;
  font-weight:700;
  letter-spacing:.01em;
  color:#0f172a;
}
.main-nav .nav-brand-copy--with-logo .nav-brand-name{
  color:#f7fbff;
  font-family:"Segoe UI","Arial",sans-serif;
  font-size:clamp(30px,4vw,44px);
  font-weight:700;
  letter-spacing:-.035em;
  text-shadow:0 8px 22px rgba(4,12,34,.26);
}
.nav-brand-tag{
  display:block;
  margin-top:3px;
  font:600 10px/1.1 "Segoe UI",Arial,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#b7cffd;
}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-link{display:inline-flex;padding:4px;border-radius:6px;text-decoration:none}
.main-nav .icon-link{
  color:#eef4ff;
}
.main-nav .icon-link svg circle,
.main-nav .icon-link svg path{
  stroke:#eef4ff;
}
.btn-post{
  background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  color:#f8fbff;
  padding:6px 10px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  border:1px solid rgba(187,211,255,.24);
  box-shadow:0 10px 20px rgba(7,19,46,.18);
}
.main-nav .btn-post:hover,
.main-nav .btn-post:focus{
  background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  color:#ffffff;
}
@media (max-width: 640px){
  .nav-brand{
    gap:8px;
  }
  .nav-brand-logo-shell{
    padding:0;
    border-radius:0;
  }
  .nav-brand-logo{
    width:170px;
    max-height:42px;
  }
  .nav-brand-logo--mark{
    width:58px;
    max-height:44px;
  }
  .nav-brand-mark{
    width:38px;
    height:38px;
    flex-basis:38px;
    border-radius:12px;
    font-size:19px;
  }
  .nav-brand-name{
    font-size:22px;
  }
  .main-nav .nav-brand-copy--with-logo .nav-brand-name{
    font-size:29px;
  }
  .nav-brand-tag{
    display:none;
  }
}

/* -------------------------
   Breadcrumb / Search
   ------------------------- */
.breadcrumb-wrapper{
  max-width:var(--max-w);
  margin:8px auto;
  padding:0 12px;
  font-size:13px;
}
.bc-link{color:var(--text);font-weight:600}

.search-wrap{background:#f7f7f7;padding:10px 0}
.search-form{
  display:flex;
  gap:8px;
  max-width:900px;
  margin:0 auto;
  padding:0 12px;
}
.search-input{
  flex:1;
  padding:8px 10px;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:14px;
}
.search-btn{
  padding:8px 12px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}

/* -------------------------
   Simple Headings
   ------------------------- */
h1, h2, h3, h4 {
  margin: 0px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

/* Basic font sizes */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  letter-spacing: .2px;
}
h1 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
h2 { font-size: clamp(1rem, 1.55vw, 1.2rem); }
h3 { font-size: clamp(.95rem, 1.35vw, 1.08rem); }
h4 { font-size: clamp(.9rem, 1.15vw, 1rem); }
p {
  font-size: clamp(.82rem, .95vw, .9rem);
  color: var(--muted);
  margin-bottom: .65rem;
}

.card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


.simple-footer {
  background: #111;
  color: #f5f5f5;
  padding: 22px 10px;
  text-align: center;
  margin-top: 40px;
}

.simple-footer .footer-links {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px; /* spacing between targets */
}

.simple-footer .footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 12px;          /* basic hit area */
  border-radius: 4px;
  display: inline-flex;       /* makes padding applied as a box */
  align-items: center;
  justify-content: center;
}

/* Larger touch targets on mobile */
@media (max-width: 600px) {
  .simple-footer .footer-links a {
    padding: 5px;       /* increases target size */
    min-width: 48px;          /* recommended touch size */
    min-height: 48px;         /* recommended touch size */
  }
}

.simple-footer .footer-links a:hover {
  color: #f2f2f2;
  text-decoration: underline;
}

.footer-rta {
  font-size: 14px;
  color: #ff4040;
  font-weight: 600;
  margin-bottom: 5px;
}

.footer-copy {
  font-size: 13px;
  color: #e6e6e6;
  font-weight: 400;
}