/* cbdmadness.club · static copy of the live Elementor / Hello look · build 3
   Every size, colour and spacing below is measured from the live WordPress site (work/DESIGN-LIVE.md).
   Roboto: self-hosted variable font, SIL Open Font License 1.1 (/assets/fonts/OFL-roboto.txt). It is used only where live
   uses it (HOME/BLOG, the cannahealthamsterdam.com line, the cards); all other text uses the Hello theme system stack.
   Nothing is loaded from another host. No JavaScript, no cookies.
   Deliberate differences from live: card excerpt and footer small grey #767676 instead of #7A7A7A / #777 (same look, passes
   WCAG AA 4.5:1); keyboard focus rings; a skip link; the post page uses the normal header instead of live's giant wordmark.
   Kept from live on purpose (Ju wants the live look): legal links #333 without underline, card hover #6EC1E4. */
@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/roboto-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/roboto-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/roboto-var-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/roboto-var-greek-ext.woff2) format("woff2");unicode-range:U+1F00-1FFF}

:root{
  --red:#B41B15;        /* banner: post-12.css .elementor-element-fa14eb6 */
  --title:#54595F;      /* card title (kit secondary) */
  --hover:#6EC1E4;      /* card title / Read More hover (kit primary) */
  --grey:#767676;       /* card excerpt, Read More, post date (live #7A7A7A) */
  --text:#333;          /* body, legal, post */
  --foot:#666;          /* footer */
  --foot2:#767676;      /* footer copyright paragraph (live #777) */
  --link:#C36;--link-h:#336;
  --sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --rob:Roboto,sans-serif;
  color-scheme:light;
}

/* Hello reset (the parts live uses) */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font:400 1rem/1.5 var(--sys);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5{margin:.5rem 0 1rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}
h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}
p{margin:0 0 .9rem}
b,strong{font-weight:bolder}
img{max-width:100%;height:auto;border:0}
a{color:var(--link);text-decoration:none;background-color:transparent}
a:hover,a:active{color:var(--link-h)}
ul{margin:0}
li{margin:0}
:focus-visible{outline:2px solid #000;outline-offset:2px}
.skip{position:absolute;left:-9999px;top:10px;z-index:9;padding:12px 24px;background:#fff;color:#000;font:500 15px/1 var(--rob);border-radius:3px}
.skip:focus{left:10px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* header (all pages): white bar, wordmark left at 14 % of its column, HOME / BLOG right */
.hdr{padding:0 10px;background:#fff}
.hdr-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px;max-width:1600px;margin:0 auto;padding:10px 0}
.hdr-logo{padding:10px}
.hdr-logo a{display:block;width:14%}
.hdr-logo picture,.hdr-logo img{display:block;width:100%}
.hdr-logo img{aspect-ratio:1898/1262}   /* the originals' exact ratios (small WebPs round to whole pixels) */
.hdr-nav{padding:10px;display:flex;justify-content:flex-end;align-items:flex-start;gap:20px}
.hdr-nav a{display:inline-block;padding:12px 24px;font:500 15px/1 var(--rob);color:#000;background:#fff;border-radius:3px;transition:all .3s}
.hdr-nav a:hover,.hdr-nav a:active{color:#000}
@media (max-width:767px){.hdr-logo a{width:100%}.hdr-nav{flex-wrap:wrap}}

/* red banner (home, blog, legal, 404): Canna Health stack 1/3, CBD-MADNESS.jpg 2/3 bottom-aligned */
.ban{background:var(--red);padding:0 10px}
.ban-in{display:flex;gap:20px;max-width:1066px;margin:0 auto;padding:10px 0}
.ban-l,.ban-r{padding:10px;min-width:0}
.ban-l{flex:0 1 33.3333%}
.ban-r{flex:0 1 66.6666%;display:flex;flex-direction:column;justify-content:flex-end}
.ban-r picture,.ban-r img{display:block;width:100%}
.ban-r img{aspect-ratio:1059/381}
.ban-link{display:flex;flex-direction:column;gap:20px;text-align:center;color:#fff;text-decoration:none}
.ban-link:hover,.ban-link:active{color:#fff}
.ban-link:focus-visible{outline-color:#fff;outline-offset:4px}
.ban-link .w{display:block}                 /* the 16px/24px system-font line box of live's widgets */
.ban-link img{display:inline-block;vertical-align:middle}
.ban-link .w-click{margin-bottom:-30px}     /* live: click widget margin-bottom -30px (+ the 20px gap) */
.b-click,.b-fair{width:52%}
.b-click{aspect-ratio:1583/531}
.b-fair{aspect-ratio:950/118}
.b-arrow{width:min(52.5px,21%)}
.b-cha{width:58%}
.ban-link .b-url{margin:0 0 14.4px;font:900 22px/33px var(--rob);color:#fff}
@media (max-width:767px){.ban-in{flex-wrap:wrap}.ban-l,.ban-r{flex:0 0 100%}}

/* green section: the Reefer Madness poster at natural size, white cards in a 4 / 2 / 1 column grid */
.cards{padding:0 10px;background:#fff url(/assets/img/reefer-madness-poster-1366.jpg) 0 0/1667px 2500px repeat scroll;
  background-image:image-set(url(/assets/img/reefer-madness-poster.webp) type("image/webp"),url(/assets/img/reefer-madness-poster-1366.jpg) type("image/jpeg"))}
.cards-in{max-width:1140px;margin:0 auto;padding:10px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 15px}
@media (max-width:1024px){.cards-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.cards-in{grid-template-columns:minmax(0,1fr)}}
.card{background:#fff;overflow:hidden;text-align:left}
.card :focus-visible{outline-offset:-2px}
.card-img{display:block;margin-bottom:26px}
.card-img picture,.card-img img{display:block;width:100%}
.card-t{margin:0 0 40px;padding:5px 0;font:600 28px/33.6px var(--rob)}   /* 5px + live's invisible 35px date line */
.card-t a{color:var(--title)}
.card p{margin:0 0 14.4px;font:400 16px/24px var(--rob);color:var(--grey)}
.card .more{display:inline-block;font:400 16px/24px var(--rob);color:var(--grey)}
.card-t a:hover,.card-t a:active,.card .more:hover,.card .more:active{color:var(--hover)}

/* registry footer (every page): live's inline styles */
.foot-wrap{padding:10px;display:flex;justify-content:center;background:#fff}
.foot{max-width:1000px;margin:0 auto;padding:25px 15px;font-size:13px;line-height:1.5;color:var(--foot);text-align:center}
.foot>div{margin-bottom:12px}
.foot .f-logo img{width:140px;max-width:140px;height:auto}
.foot a{color:inherit;text-decoration:none}
.foot a:hover,.foot a:active{color:inherit}
.foot .rights{max-width:850px;margin:0 auto;font-size:12px;color:var(--foot2)}

/* legal pages + 404 */
.legal-wrap{padding:0 10px}
.legal-in{max-width:1140px;margin:0 auto;padding:10px 0}
.legal{max-width:900px;margin:0 auto;font-size:15px;line-height:1.7;color:#333}
.legal a{color:#333}
.legal a:hover,.legal a:active{color:#333}
.legal ul{margin:0;padding-left:40px}
.legal li{margin:0}
.nf a{text-decoration:underline}

/* single post: normal header, article at Hello's .site-main width, registry footer */
.post{max-width:1140px;margin:0 auto;padding:0 0 16px;overflow-wrap:break-word}   /* long source URLs wrap at 375 */
@media (max-width:1199px){.post{max-width:800px}}
@media (max-width:991px){.post{max-width:600px}}
@media (max-width:767px){.post{max-width:500px}}
@media (max-width:575px){.post{max-width:none;padding:0 10px 16px}.post h1{padding:0 10px}}   /* hello-theme .page-header .entry-title: the title sits 10 px further in than the body */
.post-date{margin:-8px 0 16px;font-size:14.4px;line-height:21.6px;color:var(--grey)}
.post-hero{display:block;margin:0 0 16px}
.post-hero img{display:block;width:100%;height:auto;max-height:500px;object-fit:cover}   /* hello-theme .post .wp-post-image */
@media (max-width:991px){.post-hero img{max-height:400px}}
@media (max-width:575px){.post-hero img{max-height:300px}}
.note{margin:0 0 16px;padding:7.2px 10px;background:rgba(128,128,128,.071);border:1px solid #333;font-size:14.4px;line-height:21.6px;color:#333}
.note p{margin:0}
.note .note-label{font-weight:700}
.note a{color:#333;text-decoration:underline}
.note a:hover,.note a:active{color:var(--link-h)}
.post-body a{color:var(--link);text-decoration:underline}
.post-body a:hover,.post-body a:active{color:var(--link-h)}
.post-body ul{margin:0;padding-left:40px}
.post-body .h-sources{font-size:1.5rem}          /* live h4 "Sources:" */
.post-body .h-sources.h5{font-size:1.25rem}      /* live h5 "References" */
.post-body .src-group>*{margin:24px 0 0}         /* Gutenberg group, block gap 24px */
.post-body .src-group>:first-child{margin-top:0}
.post-body figure{margin:0 0 1em;overflow-x:auto}
.post-body table{width:100%;border-collapse:collapse;border-spacing:0;font-size:.9em;line-height:1.5;margin:0 0 15px}
.post-body td{border:1px solid #333;padding:.5em;vertical-align:top}
.post-body tbody>tr:nth-child(odd)>td{background:rgba(128,128,128,.071)}
.post-body tbody>tr:hover>td{background:rgba(128,128,128,.102)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.hdr-nav,.skip{display:none}}