/* Reset */

/* div, main, footer {border:1px solid red;} */

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

/* Layout Fixes */
html {line-height: 1.6;}
body {min-height: 100vh;}

/* Cancels out pre-set margins */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, pre, ol, ul {
  margin: 0; pa8dding:0;
}

/* Prevents rubber-band effect */
body {overscroll-behavior: none;}

/* List Style */
ul[class], ol[class] {
 list-style: none;
}

/* Sets the Accessibility in Safari */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Text Fixes */
/* Until Apple fixes fonts in landscape mode on iphones */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

h1, h2, h3 button, input, label {
  line-height: 1.1;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {text-wrap: pretty;}

input, button, textarea, select {
  font: inherit;
}

:target {scroll-margin-block: 5ex;}

/* Make images easier to work with */
img, picture {
  max-width: 100%;
  height: auto;
  display: block;
}

/* scroll-behavior: smooth eases the transition on id links,
scroll-margin: 40px leaves 40px above the id link (outside the element)  */
html {scroll-behavior: smooth; scroll-margin-inline-start: 40px;
scroll-margin-block-start: 40px;}

/* Prevent the rubber band scroll effect when the user hits the top or bottom of
the document */
body {overscroll-behavior: none;}

/* End Reset */

:root {
--prime-color-p: #23437d; /* Pure Primary color */ 
--prime-color-s: #23437d55;
--prime-color-t: #02070b;
/* Function Colors */
--success: #008000; /* green */
--info: #0000cd; /* blue */
--warning: #ff4500; /* orange */
--danger: #ff0000; /* red */
--black: #111111;
--white: #fffffb;
--grey: #dedede;
--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--h1:3.5rem;
--h2:2.5rem;
--h3:1.5rem;
--p-rem: .5rem;
--p-rem2: 1rem;
--p-rem3: 1.5rem;
}

.ch65 {width:65ch; margin-left:auto; margin-right:auto;}

.cw, .cw p {color:var(--white);}
.cb, .cb p {color:var(--black);}
.cp, .cp p {color:var(--prime-color-p);}

.lock-red {color: #580000;}
.lock-blue {color: #3621bc;}

.bgb, .bcb {background-color:black;}
.bgg, .bcg {background-color:var(--grey);}
.bgw, .bcw {background-color:var(--white);}
.bcp {background-color:var(--prime-color-p);}
.bcs {background-color:var(--prime-color-s);}
.bct {background-color:var(--prime-color-t);}
.b-fade {background-image: url('faded.png'); background-size:contain; background-repeat: no-repeat;}
.b-long {background-image: url('long-half.webp'); background-size:cover;}
.b-op-7 {opacity: 0.7;}
.b-op-5 {opacity: 0.5;}
.b-op-3 {opacity: 0.3;}

.block {display:block;}
.brdr-rad6 {border-radius:6px;}
.brdr-rad10 {border-radius:10px;}
.rad12 {border-radius:12px;}
.rad12-right {border-radius:0 12px 12px 0;}

.brdr-prime-bot {border-bottom:1px double var(--prime-color-p);}
body {background-color:var(--prime-color-t); font-family: var(--system-ui); color:var(--black); border-top:3px double var(--prime-color-p); border-bottom:3px double var(--prime-color-p);}
.frame-header {max-width:1200px; margin-left:auto; margin-right:auto; background-color:black; padding:var(--p-rem); border-bottom:1px solid var(--prime-color-p);}
.frame {width:98%; max-width:1200px; margin-left:auto; margin-right:auto; background-color:var(--white); border-right:3px double var(--prime-color-p); border-left:3px double var(--prime-color-p);}
.main { padding:var(--p-rem2) 0; margin-bottom:var(--p-rem2);}
.max {max-width:50rem;}
.mauto {margin-left:auto; margin-right:auto;}

a:link, a:visited {color:var(--prime-color-p); font-weight:bold;}
a:hover, a:active {text-shadow:0px 1px var(--prime-color-s);}
/* Adds the notices to links for offsite when the beginning of the url string matches http 
[href*="http"]:after {display: inline-flex; content: 'OFFSITE'; font-size:75%; margin-left:.1rem;}
[href*="https://HighAndDry-Storage"]:after {display: inline-flex; content: ''; font-size:75%; margin-left:0;}

.llink a:link, .llink a:visited, .llink a:hover {color:var(--white); background-color:var(--prime-color-p); border-radius: 5px; padding:.25rem .5rem; margin-right:.1rem; text-decoration:none;}

:target {/*background-color:#red;*/
        -webkit-animation: target-fade 3s;
	-moz-animation: target-fade 3s;
	-o-animation: target-fade 3s;
	animation: target-fade 3s;}
@-webkit-keyframes target-fade {
	from { background-color: #9999ff; } /* [1] */
	to { background-color: transparent; text-decoration:underline;}
}

@-moz-keyframes target-fade {
	from { background-color: #9999ff; } /* [1] */
	to { background-color: transparent;  text-decoration:underline;}
}

@-o-keyframes target-fade {
	from { background-color: #9999ff; } /* [1] */
	to { background-color: transparent; text-decoration:underline;}
}

@keyframes target-fade {
	from { background-color: #9999ff; } /* [1] */
	to { background-color: transparent;  text-decoration:underline;}
}

h1 {color:var(--prime-color-p); font-size:var(--h1); text-align:center; font-variant: small-caps; margin:1.5rem 0; color:var(--black);}
h2 {color:var(--prime-color-p); font-size:var(--h2); font-variant: small-caps;}
h3 {color:var(--prime-color-s); font-size:var(--h3); text-transform: capitalize;}
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited {text-decoration-line: none;}

@font-face {
  font-family: "bodyfont"; /* set name */
  src: url('CharisSIL-Regular.ttf'); /* url of the font */
}

body {
  font-family: "bodyfont";
}


@font-face {
  font-family: "Hegarty"; /* set name */
  src: url('BBHHegarty-Regular.ttf'); /* url of the font */
}

h1, h2, h3, .hegarty {
  font-family: "Hegarty";
}

@font-face {
  font-family: "Honk"; /* set name */
  src: url('Honk-Regular-VariableFont_MORF,SHLN.ttf'); /* url of the font */
}

.honk {
  font-family: "Honk";
}


.watermark {background:cover;}

.error::before {display: inline-flex; content: ''; background-image:url(icon-barrier-w.svg); background-size: 1em 1em; margin-right:.3em; height: .8em; width: .8em;}
.error::after {display: inline-flex; content: ''; background-image:url(icon-barrier-w.svg); background-size: 1em 1em; margin-left:.3em; height: .8em; width: .8em;}

.jump {text-align:center;}
.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.main p {margin:1rem 0;}

h2 + p, h3 + p {margin-bottom:2rem;}
.t-cntr {text-align:center;}
.t-lft {text-align:left;}
.t-rt {text-align:right;}
.t-bold {font-weight:600;}
.t-bold-500 {font-weight:500;}
.t-ital {font-style:italic;}
.t-80 {font-size:80%;}
.t-120 {font-size:120%;}

.p-rem {padding:var(--p-rem);}
.p-rem2 {padding:var(--p-rem2);}
.p-rem3 {padding:var(--p-rem3);}

.top-block {width:100%; max-width:599px;  padding:.25rem .5rem;}
.logo {max-width:10rem; margin-left:auto; margin-right:auto; background:#000; border-radius:6px;}

.nav {margin-top:10px;}
.nav li {display:block;}
#nav a:link, #nav a:visited, #nav a:hover {color:#fff; background:var(--prime-color-p); border-radius: 5px; padding:.25rem .5rem; text-decoration:none; margin-top:.25rem; margin-bottom:.5rem;}
.no-underline {text-decoration:none;}

.site-news-home {border:2px solid var(--prime-color-p); border-radius:12px; padding:var(--p-rem);}

/* Functional Notices */
.status {margin-bottom:1rem; border:2px solid black; border-radius:6px; text-align:center;}
.status-hdr {padding:1rem 1.5rem; font-size: 1.2rem; font-weight:bolder; }
.status-txt {padding:1rem 2rem;}
.info {border: 2px solid var(--info);}
.info .status-hdr {color:var(--white); background-color: var(--info);}
.info .status-hdr::before {display: inline-flex; content: ''; background-image:url(icon-info-w.svg); background-size: 1.5em 1.5em; margin-right:.3em; height: 1.5em; width: 1.5em;}
.info .status-hdr:hover {color: var(--white); background-color:#0000cd99;}
.success {border: 2px solid var(--success);}
.success .status-hdr {color:var(--white); background-color: var(--success);}
.success .status-hdr:hover {color: var(--white); background-color:#00800099;}
.success .status-hdr::before {display: inline-flex; content: ''; background-image:url(icon-check-mark-w.svg); background-size: 1.5em 1.5em; margin-right:.3em; height: 1.5em; width: 1.5em;}
.warning {border: 2px solid var(--warning);}
.warning .status-hdr {color:var(--white); background-color: var(--warning);}
.warning .status-hdr:hover {color: var(--white); background-color:#ff450099;}
.warning .status-hdr::before {display: inline-flex; content: ''; background-image:url(icon-ringing-alarm-w.svg); background-size: 1.5em 1.5em; margin-right:.3em; height: 1.5em; width: 1.5em;}
.danger {border: 2px solid  var(--danger);}
.danger .status-hdr {color:var(--white); background-color: var(--danger);}
.danger .status-hdr:hover {color: var(--white); background-color:#ff000099;}
.danger .status-hdr::before {display: inline-flex; content: ''; background-image:url(icon-hazard-sign-w.svg); background-size: 1.5em 1.5em; margin-right:.3em; height: 1.5em; width: 1.5em;}

.clearboth {clear:both;}

.footer {clear:both; padding:var(--p-rem); color:var(--white); background-color:var(--black);}
.footer-nav {text-align:right; padding-top:10px; font-weight:bold; margin-bottom:1rem;}
.footer-nav a:link, .footer-nav a:visited, .footer-nav a:hover {color:#fff; background-color:var(--prime-color-p); border-radius: 5px; padding:.25rem .5rem; margin-right:.1rem; text-decoration:none;}
.footer-cntr {margin-top:.5rem; text-align:center;}
.footer-cntr a:link, .footer-cntr a:visited, .footer-cntr a:hover {color:#fff; text-decoration:none;}


@media (min-width: 1001px) {
root {
--p-rem: 1rem;
--p-rem2: 2rem;
--p-rem3: 3rem;
}

.nav li {display:inline;}
#nav a:link, #nav a:visited, #nav a:hover {margin-top:0;}


body {font-size:1.2rem;}

.frame {max-width:100rem;}
.p-rem {var(--p-rem);}
.p-rem2 {var(--p-rem2);}
.p-rem3 {var(--p-rem3);}
.rss {margin-top:0;}
#nav a:link, #nav a:visited, #nav a:hover {margin-bottom:3rem;}

.g-nav {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: 1fr 2fr 7fr 1fr 1fr;
  align-content: center;
}
.g-nav-item {/* border: 1px solid grey; */}

.g-1-3-7-1 {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: 1fr 3fr 7fr 1fr;
  align-content: center;
}
.g-1-3-7-1-item {/*  border: 1px solid grey; */}

.g-2-6-4 {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: 1.5fr 6fr 4.5fr;
  align-content: center;
}
.g-2-6-4-item {/* border: 1px solid grey; */}

.g-1-2-6-2-1 {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: 1fr 2fr 6fr 2fr 1fr;
  align-content: center;
}
.g-1-2-6-2-1-item {/* border: 1px solid grey; */}

.g-1-3-4-3-1 {
  display: grid;
  column-gap: 1.8rem;
  grid-template-columns: 1fr 3fr 4fr 3fr 1fr;
  align-content: center;
}
.g-1-3-4-3-1-item {/* border: 1px solid grey; */}

.g-2-8-2 {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: 2fr 8fr 2fr;
  align-content: center;
}
.g-2-8-2-item {/* border: 1px solid grey; */}

.g-1-10-1 {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: 1fr 10fr 1fr;
  align-content: center;
}
.g-1-10-1-item {/* border: 1px solid grey; */}

.g-65ch {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: 1fr 70ch 1fr;
}

.g-65ch-item { /* border: 1px solid rgba(0, 0, 0, 0.8); */}

.update {padding-left:2rem; padding-right:2rem;}
}


@media (prefers-color-scheme: dark) {
:root {
--black: #fffffb;
--white: #111111
}
}

html {
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

/* override styles when printing */
@media print {
  #jump, #nav,  footer {display:none;}
/* adds the url after every link */
  a::after {
  content: " (" attr(href) ")";
}
/* adds copyright on all printed pages*/
main::after {
  content: "Copyright 2025-6 HighAndDry-Storage.com";
  display: block;
  text-align: center;
}
}