/* =========================================================================
   WORK IN ALBERTA — the site's only stylesheet
   Casyna. Change a variable below and the whole site follows.

   1. Variables        5. Content and listings
   2. Base             6. Advertising slots
   3. Header and nav   7. Footer
   4. Banner (hero)    8. Responsive rules
   ========================================================================= */

/* ---------- 1. VARIABLES ------------------------------------------------ */
:root{
  --blue-900:#001D3A;   /* deep Alberta blue: header, footer */
  --blue-800:#002E5D;   /* headings */
  --blue-600:#0A4E8A;   /* links */
  --blue-050:#EAF0F6;   /* light panels */
  --gold:#C8A22E;       /* Alberta's other official colour, used as accent */
  --gold-050:#F6ECCB;
  --ink:#18212B;
  --muted:#5C6975;
  --line:#DBE1E8;
  --bg:#F2F5F8;
  --white:#fff;
  --wrap:1200px;
  --display:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(0,29,58,.06);
}

/* ---------- 2. BASE ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-600);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--blue-800)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--white);padding:10px 16px}
code{background:var(--blue-050);padding:1px 5px;font-size:.9em;border-radius:2px}

/* ---------- 3. HEADER AND NAVIGATION ------------------------------------ */
.masthead{background:var(--blue-900);color:var(--white)}
.masthead__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.logo{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--white)}
.logo b{font:700 26px/1 var(--display);letter-spacing:-.02em}
.logo span{font:600 11px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.masthead__tag{margin:0;font-size:14px;color:#9FB4CA;text-align:right}

.navbar{background:var(--white);border-bottom:1px solid var(--line);
  box-shadow:0 2px 0 0 var(--gold) inset}
.navbar__wrap{padding:0}
.burger{display:none;width:100%;background:none;border:0;padding:14px 20px;cursor:pointer;
  font:600 14px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-900);text-align:left}
.burger span::after{content:"▾";float:right;transition:transform .2s}
.burger[aria-expanded="true"] span::after{transform:rotate(180deg)}
.nav ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:15px 13px;text-decoration:none;color:var(--ink);
  font:600 14.5px/1 var(--display);border-bottom:3px solid transparent}
.nav a:hover{color:var(--blue-800);border-bottom-color:var(--gold)}
.nav a[aria-current="page"]{color:var(--blue-900);border-bottom-color:var(--blue-900)}
.nav__ext a{color:var(--muted);font-weight:500}
.nav__ext:first-of-type{border-left:1px solid var(--line);margin-left:6px}

/* ---------- 4. PHOTO BANNER --------------------------------------------- */
.hero{background-size:cover;background-position:center 55%;color:var(--white);
  padding:52px 0 46px;border-bottom:4px solid var(--gold)}

/* Banner photo, one class per page. The blue wash keeps the headline legible
   over any of them — change --hero-wash rather than each rule below. */
:root{--hero-wash:linear-gradient(90deg,rgba(0,29,58,.88) 0%,rgba(0,29,58,.45) 70%,rgba(0,29,58,.25) 100%)}
.hero--rockies  {background-image:var(--hero-wash),url("../img/header-rockies.jpg")}
.hero--calgary  {background-image:var(--hero-wash),url("../img/header-cal989x180.jpg")}
.hero--edmonton {background-image:var(--hero-wash),url("../img/header-edm989x180.jpg")}
.hero--petroleum{background-image:var(--hero-wash),url("../img/header-petroleum.jpg")}
.hero h1{margin:0 0 12px;padding-bottom:14px;
  background:linear-gradient(90deg,var(--gold) 0 68px,rgba(255,255,255,.25) 68px 220px,transparent 220px) 0 100%/100% 3px no-repeat;font:700 clamp(28px,4.6vw,44px)/1.1 var(--display);letter-spacing:-.02em;
  text-shadow:0 1px 12px rgba(0,20,40,.5)}
.hero__lead{margin:0;max-width:60ch;font-size:19px;color:#DCE7F2}

/* ---------- 5. CONTENT -------------------------------------------------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;
  max-width:var(--wrap);margin:26px auto 0;padding:0 20px;align-items:start}
.card{background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);
  padding:28px 32px;margin-bottom:24px}
.eyebrow{font:600 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
h2{font:600 22px/1.3 var(--display);color:var(--blue-800);margin:0 0 14px;
  padding-bottom:9px;border-bottom:2px solid var(--gold-050)}
h3{font:600 18px/1.35 var(--display);margin:0 0 4px}
p{margin:0 0 15px}
.note{background:var(--gold-050);border-left:4px solid var(--gold);padding:14px 16px;font-size:15.5px}

.facts{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.facts li{display:flex;justify-content:space-between;gap:20px;padding:11px 2px;
  border-bottom:1px solid var(--line);font-size:16px}
.facts span{color:var(--muted)}
.facts b{font:600 16px var(--display);color:var(--blue-800);text-align:right}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;list-style:none;padding:0;margin:0}
.tiles a{display:block;height:100%;padding:15px 17px;background:var(--blue-050);
  text-decoration:none;border-left:4px solid var(--blue-600);transition:background .15s,border-color .15s}
.tiles a:hover{background:var(--gold-050);border-left-color:var(--gold)}
.tiles strong{display:block;font:600 16px/1.3 var(--display);color:var(--blue-800)}
.tiles small{color:var(--muted);font-size:14px}

/* directory entries */
.listings{list-style:none;margin:0;padding:0}
.listing{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);
  margin:0 -14px;padding-left:14px;padding-right:14px;transition:background .15s}
.listing:hover{background:var(--blue-050)}
.listing:first-child{padding-top:0}
.listing:last-child{border-bottom:0;padding-bottom:0}
.listing__logo{flex:0 0 120px;align-self:flex-start;width:120px;height:90px;object-fit:contain;
  border:1px solid var(--line);background:var(--white);padding:4px}
.listing__logo--none{display:flex;align-items:center;justify-content:center;
  background:var(--blue-050);color:var(--blue-600);font:700 32px var(--display)}
.listing__body{min-width:0}
.listing__body p{margin:0;color:#3A4652;font-size:16px}
.listing__extra{margin-top:6px!important;font-size:14.5px}

.listing__meta{margin:2px 0 6px!important;font:600 14.5px var(--display);color:var(--blue-800)}
.listing__credit{margin:16px 0 0;font-size:13.5px;color:var(--muted)}
.listings--compact .listing{padding:14px 0}
.listings--compact .listing__body p{color:var(--muted);font-size:15px}

.embed{position:relative;border:1px solid var(--line)}
.embed iframe{display:block;width:100%;height:1400px;border:0}

/* ---------- 6. ADVERTISING SLOTS ---------------------------------------- */
/* .ad reserves its height so the page does not jump when an ad loads.
   Removing min-height here will hurt the Core Web Vitals score. */
.ad{text-align:center;margin:0 auto 24px}
.ad ins,ins.adsbygoogle{display:block}   /* was repeated inline on every unit */
.ad--leaderboard{min-height:120px;padding:16px 20px;background:var(--white);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:0}
.ad--incontent{min-height:280px;padding:20px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
.ad--rectangle{min-height:280px}

/* ---------- side rail ---------------------------------------------------- */
.rail__inner{position:sticky;top:16px}
.panel{background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);padding:20px 22px;margin-bottom:24px}
.panel h2{font-size:17px;margin-bottom:12px}
.panel p{font-size:15.5px;margin-bottom:12px}
.price{font:700 21px var(--display);color:var(--blue-800)}
.btn{display:inline-block;background:var(--blue-800);color:var(--white);text-decoration:none;
  padding:11px 18px;font:600 15px var(--display)}
.btn:hover{background:var(--gold);color:var(--blue-900)}
.linklist{list-style:none;margin:0;padding:0}
.linklist li{padding:7px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.linklist li:last-child{border-bottom:0}

/* ---------- 7. FOOTER ---------------------------------------------------- */
.foot{background:var(--blue-900);color:#B9CAda;margin-top:32px;padding:36px 0 24px;font-size:15px}
.foot a{color:var(--white);text-decoration:none}
.foot a:hover{color:var(--gold);text-decoration:underline}
.foot h2{font:600 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px;border:0;padding:0}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:7px}
.foot__copy{border-top:1px solid rgba(255,255,255,.16);margin:28px 0 0;padding-top:16px;
  font-size:13.5px;color:#8DA2B8}

/* ---------- 8. RESPONSIVE ------------------------------------------------ */
@media (max-width:1000px){
  .layout{grid-template-columns:1fr;gap:0}
  .rail__inner{position:static}
  .masthead__tag{display:none}
}
@media (max-width:780px){
  body{font-size:16px}
  .card,.ad--incontent{padding:20px}
  .hero{padding:36px 0 32px}
  .hero__lead{font-size:17px}
  .burger{display:block}
  .nav{display:none;border-top:1px solid var(--line)}
  .nav.is-open{display:block}
  .nav ul{display:block}
  .nav a{padding:13px 20px;border-bottom:1px solid var(--line)}
  .nav a:hover{border-bottom-color:var(--line)}
  .nav__ext:first-of-type{border-left:0;margin-left:0}
  .listing{gap:14px}
  .listing__logo{flex-basis:84px;width:84px;height:64px}
  .facts li{flex-direction:column;gap:0}
  .facts b{text-align:left}
  .embed iframe{height:1100px}
}
/* Print: drop the furniture, keep the content and the links. */
@media print{
  .navbar,.ad,.rail,.hero,.masthead__tag,.skip{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .layout{display:block;padding:0}
  .card{border:0;box-shadow:none;padding:0;margin-bottom:14pt}
  .listing a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .foot{background:none;color:#000;padding:0}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}