/* O'Kellys Irish Pub - site styles. Self-hosted fonts, no external requests. */
@font-face{font-family:"Abhaya Libre";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/abhaya-libre.woff2) format("woff2")}
@font-face{font-family:"Fjalla One";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fjalla-one.woff2) format("woff2")}

:root{
  --cream:#ffefca;
  --gold:#efd989;
  --text:#fff8ea;
  --muted:rgba(255,248,234,.68);
  --panel:rgba(38,40,33,.88);
  --panel-solid:#26281f;
  --line:rgba(255,239,202,.38);
  --hl:#ffff66;
  --hl2:#ffff99;
  --serif:"Abhaya Libre",Georgia,"Times New Roman",serif;
  --head:"Fjalla One","Arial Narrow",Impact,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--text);background:#140d0b}
body::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;
  background:linear-gradient(rgba(0,0,0,.63),rgba(0,0,0,.63)),url(../img/bar.jpg) center right/cover no-repeat}
img{max-width:100%;height:auto;display:block}
a{color:var(--cream);text-underline-offset:.15em}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:.6em 1em;z-index:100}
.skip:focus{left:8px;top:8px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 22px}
.wrap.narrow{max-width:900px}
.muted{color:var(--muted)}
.center{text-align:center}
.right{text-align:right}

/* header */
.site-header{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0));position:relative;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.brand img{width:220px;height:auto}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 26px;justify-content:flex-end}
.site-nav a{font-family:var(--head);font-size:18px;letter-spacing:.04em;text-decoration:none;color:var(--text);padding:.35em 0;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current]{border-bottom-color:var(--cream);color:var(--cream)}
.nav-toggle{display:none;font-family:var(--head);font-size:17px;letter-spacing:.05em;color:#fff;background:#000;border:1px solid #fff;padding:.5em 1.1em;cursor:pointer}

/* headings and text */
h1,h2,h3,h4,h5{font-weight:700;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5.4vw,4rem);color:var(--cream)}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--cream)}
p{margin:0 0 1em}
.big{font-size:1.15em}
.hl{color:var(--hl)}
.hl2{color:var(--hl2)}
.lead{font-size:1.25em;max-width:46rem}

/* buttons */
.btn{display:inline-block;font-family:var(--head);font-size:17px;letter-spacing:.04em;text-decoration:none;color:#fff;background:#000;border:1px solid #fff;padding:.6em 1.3em;line-height:1.2}
.btn:hover{background:var(--cream);color:#000;border-color:var(--cream)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:1.4em}

/* layout blocks */
.hero{padding:34px 0 46px}
.hero-text{text-shadow:0 1px 4px rgba(0,0,0,.85)}
.hero-map img{width:100%;max-width:464px;margin:0 auto}
.band{padding:26px 0}
.cols{display:grid;gap:30px;align-items:start}
.cols-2-1{grid-template-columns:2fr 1fr}
.cols-1-2{grid-template-columns:1fr 2fr}
.cols-2-2{grid-template-columns:1fr 1fr;align-items:center}
.panel{background:var(--panel);padding:28px 32px}
.rule{display:flex;align-items:center;gap:20px;text-align:center;margin-bottom:1em}
.rule::before,.rule::after{content:"";flex:1;border-top:1px solid var(--line)}
.rule span{flex:0 1 auto}
.photo-link{position:relative;display:block;overflow:hidden;box-shadow:0 12px 24px rgba(0,0,0,.5);color:#fff;text-decoration:none}
.photo-link img{width:100%;aspect-ratio:1479/1210;object-fit:cover;transition:transform .5s}
.photo-cap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.88);color:#111;padding:1em 1.4em;text-align:center;opacity:0;transition:opacity .25s;width:80%;font-size:1.05rem}
.photo-first{position:sticky;top:20px}
.photo-link:hover .photo-cap,.photo-link:focus-visible .photo-cap{opacity:1}
.photo-link:hover img{transform:scale(1.04)}
.quote-band .panel{background:rgba(38,40,33,.8)}
.pull{margin:0;font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.2;text-align:right;color:var(--cream);text-shadow:2px 2px 4px #000;font-style:italic}

/* inner pages */
.page-title{padding:44px 0 12px;text-align:center}
.page-title h1{margin-bottom:.3em}
.page-title .lead{margin:0 auto;color:var(--text)}
.prose h2{margin-top:1.4em;border-bottom:1px solid var(--line);padding-bottom:.25em}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.4em}
.prose address{font-style:normal;margin:1em 0}
.prose blockquote{margin:1.4em 0;padding:.2em 0 .2em 1.2em;border-left:3px solid var(--gold);font-size:1.1em}
.prose img{margin:1.2em auto}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:1.4em 0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;margin:0}
.gallery a{display:block;box-shadow:0 6px 14px rgba(0,0,0,.45)}
.hours{list-style:none;padding:0!important;margin:1.4em 0}
.hours li{display:flex;flex-wrap:wrap;gap:4px 24px;padding:.75em 0;border-bottom:1px solid var(--line);margin:0}
.hours strong{font-family:var(--head);font-weight:400;font-size:1.15em;min-width:13rem;color:var(--cream)}
.faq h2{font-family:var(--head);font-weight:400}

/* tabs (shared by "This Week" and the sport weeks) */
.tabs{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:start}
.tablist{display:flex;flex-direction:column;gap:6px}
.tablist button{font-family:var(--head);font-size:18px;letter-spacing:.03em;text-align:left;color:var(--muted);background:none;border:0;border-left:3px solid transparent;padding:.55em .8em;cursor:pointer}
.tablist button:hover{color:#fff}
.tablist button[aria-selected="true"]{color:var(--cream);border-left-color:var(--cream);background:rgba(255,239,202,.08)}
.panel-title{font-family:var(--head);font-weight:400;font-size:1.9rem;color:var(--cream);padding-bottom:.35em;margin-bottom:.7em;border-bottom:1px solid var(--line)}
.js .tabpanel:not(.is-active){display:none}
.tabpanel+.tabpanel{margin-top:2.4em}
.js .tabpanel+.tabpanel{margin-top:0}
.js .tabs .tablist{display:flex}

/* sport listing */
.notice{background:rgba(239,217,137,.16);border:1px solid var(--gold);padding:.8em 1.1em;margin:0 0 1.4em;font-size:1.1em}
.day{padding:.9em 0 .3em;border-top:1px solid rgba(255,239,202,.14)}
.day:first-of-type{border-top:0;padding-top:0}
.day-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;font-family:var(--head);font-weight:400;font-size:1.7rem;color:var(--cream);margin-bottom:.35em}
.day-open{font-size:1.15rem;color:var(--gold);letter-spacing:.03em}
.today{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;background:var(--cream);color:#1a1a12;padding:.15em .6em}
.day.is-today{background:rgba(255,239,202,.06);margin:0 -14px;padding-left:14px;padding-right:14px}
.label{font-family:var(--head);font-weight:400;font-size:1rem;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin:.9em 0 .3em}
.events,.fixtures{list-style:none;margin:0 0 .6em;padding:0}
.events li{padding:.15em 0}
.fixtures li{display:grid;grid-template-columns:4rem 9.5rem 1fr;gap:0 1rem;padding:.3em 0;border-bottom:1px dotted rgba(255,239,202,.16)}
.fixtures li:last-child{border-bottom:0}
.fixtures .t{font-family:var(--head);color:var(--cream);letter-spacing:.03em}
.fixtures .c{color:var(--muted)}
.fixtures .f{font-weight:700}
.fixtures .nocomp .f{grid-column:2/4}
.fixtures .plain{display:block}
.nosport{margin:.2em 0 .8em;color:var(--muted);font-style:italic}
.footnote{margin-top:1.6em;font-style:italic;color:var(--muted)}

/* footer */
.site-footer{margin-top:34px;padding:34px 0 40px;background:rgba(0,0,0,.55);font-size:1rem}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.foot-nav,.social{list-style:none;margin:.8em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-nav a,.social a{text-decoration:none;font-family:var(--head);letter-spacing:.03em}
.foot-nav a:hover,.social a:hover{text-decoration:underline}
.social{justify-content:center;margin-top:0}
.foot-b{text-align:center}
.foot-c{text-align:right}
.totop{font-family:var(--head)}

/* small screens */
@media (max-width:860px){
  body{font-size:18px}
  .cols-2-1,.cols-1-2,.cols-2-2,.footer-grid{grid-template-columns:1fr}
  .photo-first{order:2;position:static}
  .panel{padding:22px 18px}
  .nav-toggle{display:inline-block}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:rgba(10,8,7,.97);padding:10px 22px 18px;border-top:1px solid var(--line)}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:flex-start;gap:0}
  .site-nav a{display:block;padding:.7em 0;font-size:20px}
  .brand img{width:150px}
  .tabs{grid-template-columns:1fr;gap:16px}
  .tablist{flex-direction:row;flex-wrap:wrap;gap:8px}
  .tablist button{border:1px solid var(--line);border-left-width:1px;padding:.5em .9em;font-size:17px}
  .tablist button[aria-selected="true"]{border-color:var(--cream)}
  .day.is-today{margin:0 -8px;padding-left:8px;padding-right:8px}
  .fixtures li{grid-template-columns:3.8rem 1fr;row-gap:0}
  .fixtures .t{grid-row:1/3}
  .fixtures .c{grid-column:2;font-size:.92em}
  .fixtures .f{grid-column:2}
  .fixtures .nocomp .t{grid-row:auto}
  .pull,.right{text-align:left}
  .foot-b,.foot-c{text-align:left}
  .social{justify-content:flex-start}
  .hours strong{min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photo-link img,.photo-cap{transition:none}}
@media print{body::before{display:none}body{background:#fff;color:#000}.site-header,.site-footer,.photo-link{display:none}.panel{background:none;padding:0}}
.prose img.wide{width:100%;max-height:420px;object-fit:cover}
.prose img.map{max-width:464px}
.prose img.signature{max-width:220px;margin-left:0}
.prose .btn{margin:.2em 0}
.prose .btn-row{justify-content:flex-start}
.prose .lead{font-size:1.2em}