/*
Theme Name: Only Way Is Burgh
Theme URI: https://onlywayisburgh.football/
Author: Ricky Kelly
Description: Custom red, white and pop-art football theme for The Only Way Is Burgh fan site. Built around Burgh match shortcodes.
Version: 1.3.3
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: only-way-is-burgh
*/

:root{
  --burgh-red:#b00012;
  --burgh-red-2:#d71920;
  --burgh-dark-red:#650008;
  --burgh-black:#101010;
  --burgh-white:#ffffff;
  --burgh-cream:#fff7f7;
  --burgh-line:rgba(255,255,255,.28);
  --burgh-card:#ffffff;
  --burgh-text:#111111;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--burgh-text);
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1.55;
  background-color:var(--burgh-dark-red);
  background-image:
    radial-gradient(circle at 18px 18px, rgba(255,255,255,.15) 0 5px, transparent 6px),
    radial-gradient(circle at 70% 8%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(255,255,255,.09) 0 8%, transparent 8% 18%, rgba(0,0,0,.12) 18% 30%, transparent 30%),
    linear-gradient(160deg, #b00012 0%, #7b000b 48%, #d71920 100%);
  background-size:36px 36px, 140px 140px, 100% 100%, 100% 100%;
  background-attachment:fixed;
}
a{color:var(--burgh-red);font-weight:800;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.site-header{background:var(--burgh-dark-red)}
.brand-banner{background:#97000f;line-height:0}
.brand-banner a{display:block;line-height:0}
.brand-banner img{display:block;width:100%;height:auto;margin:0 auto}
.site-branding-text{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Top menu sits directly under the logo. There is no second header menu. */
.top-menu-bar{
  position:relative;
  z-index:5;
  background:rgba(16,16,16,.96);
  border-top:1px solid rgba(255,255,255,.25);
  border-bottom:4px solid var(--burgh-red-2);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.top-menu-inner{max-width:1180px;margin:0 auto;padding:0 14px}
.top-menu-bar ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0}
.top-menu-bar li{margin:0}
.top-menu-bar a{
  display:block;
  color:#fff;
  padding:15px 17px;
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-decoration:none;
}
.top-menu-bar a:hover,
.top-menu-bar .current-menu-item>a,
.top-menu-bar .current_page_item>a{background:var(--burgh-red-2);color:#fff;text-decoration:none}

.site-main{max-width:1180px;margin:0 auto;padding:26px 14px 48px}
.front-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.front-section,
.content-wrap,
.post-card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.42);
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  overflow:hidden;
}
.front-section{padding:18px}
.front-section.full{grid-column:1/-1}
.front-section-title,
.entry-title,h1,h2,h3{
  margin-top:0;
  line-height:1.15;
  color:#111;
  font-weight:900;
}
.front-section-title{
  display:inline-block;
  margin:0 0 14px;
  padding:8px 12px;
  background:var(--burgh-red);
  color:#fff;
  border-radius:10px;
  text-transform:uppercase;
  font-size:18px;
  letter-spacing:.03em;
}
.entry-title,h1{font-size:34px;margin:0 0 18px}
h2{font-size:24px;margin:0 0 14px}
h3{font-size:20px;margin:20px 0 10px}
p{margin:0 0 16px}.content-wrap{padding:22px}.post-card{padding:20px;margin-bottom:18px}

/* Shortcode / plugin output clean-up */
.front-section table,
.content-wrap table,
.burgh-table,
.league-table{
  width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;margin:0 0 16px;
}
th{background:#111;color:#fff;text-align:left;padding:11px;border:0;font-size:14px}
td{padding:10px;border-bottom:1px solid #e4e4e4}
tr:nth-child(even) td{background:#fafafa}
button,.button,.wp-block-button__link,input[type="submit"],.match-centre-link,.view-match-centre{
  display:inline-block;background:var(--burgh-red);color:#fff!important;border:0;border-radius:999px;padding:10px 16px;font-weight:900;text-decoration:none;cursor:pointer
}
button:hover,.button:hover,.wp-block-button__link:hover,input[type="submit"]:hover,.match-centre-link:hover,.view-match-centre:hover{background:#111;text-decoration:none}
input,textarea,select{max-width:100%;border:1px solid #ccc;border-radius:8px;padding:10px;font:inherit}
.site-footer{background:#111;color:#fff;border-top:4px solid var(--burgh-red-2);padding:22px 14px;text-align:center;font-weight:700}
.footer-inner{max-width:1180px;margin:0 auto}

/* Make sure old/duplicate menu containers from widgets or blocks don't sit above the banner. */
body .wp-block-navigation:first-child:not(.keep-navigation),
body > nav:not(.top-menu-bar),
.site-topline{display:none!important}

@media (max-width:760px){
  .top-menu-inner{padding:0}
  .top-menu-bar ul{display:block}
  .top-menu-bar a{padding:13px 16px;border-top:1px solid rgba(255,255,255,.12)}
  .front-grid{grid-template-columns:1fr}
  .site-main{padding:18px 10px 36px}
  .front-section,.content-wrap,.post-card{border-radius:12px}
  .entry-title,h1{font-size:28px}
  table{font-size:14px}
  th,td{padding:8px}
}


/* v1.3.1 pop-art finish */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,.05) 39px 43px, transparent 44px 82px),
    radial-gradient(circle at 8% 22%, rgba(255,255,255,.12) 0 2px, transparent 3px) 0 0/28px 28px;
}

.site-header .site-branding-text{display:none}

.top-menu-bar{border-top:0}
.top-menu-bar .menu{min-height:52px}

@media (max-width:760px){
  .brand-banner img{min-height:145px;object-fit:cover;object-position:center top}
}


/* v1.3.2 clean dropdown navigation + mobile hamburger */
.top-menu-bar{
  background:#101010;
  border-bottom:4px solid #e31722;
}
.top-menu-inner{
  position:relative;
}
.menu-toggle{
  display:none;
  align-items:center;
  gap:10px;
  width:100%;
  border-radius:0;
  background:#101010;
  color:#fff!important;
  padding:14px 16px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.hamburger-lines{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
}
.hamburger-lines span{
  display:block;
  width:24px;
  height:3px;
  background:#fff;
  border-radius:99px;
}
.menu-wrap > ul,
.top-menu-bar ul.menu{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:0;
}
.top-menu-bar li{
  position:relative;
}
.top-menu-bar .menu-item-has-children > a::after{
  content:" ▾";
  font-size:11px;
}
.top-menu-bar ul.sub-menu,
.top-menu-bar ul.children{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  z-index:9999;
  min-width:265px;
  background:#171717;
  border-top:4px solid #e31722;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  padding:6px 0;
  border-radius:0 0 10px 10px;
}
.top-menu-bar li:hover > ul.sub-menu,
.top-menu-bar li:focus-within > ul.sub-menu,
.top-menu-bar li:hover > ul.children,
.top-menu-bar li:focus-within > ul.children{
  display:block;
}
.top-menu-bar ul.sub-menu li,
.top-menu-bar ul.children li{
  width:100%;
}
.top-menu-bar ul.sub-menu a,
.top-menu-bar ul.children a{
  padding:12px 16px;
  white-space:normal;
  line-height:1.25;
  border-top:1px solid rgba(255,255,255,.08);
}
.top-menu-bar ul.sub-menu a:hover,
.top-menu-bar ul.children a:hover{
  background:#b00012;
}
.top-menu-bar .current-menu-ancestor > a,
.top-menu-bar .current-menu-parent > a{
  background:#b00012;
  color:#fff;
}

/* Better red / pop-art page background matched to the banner */
body{
  background-color:#93000d;
  background-image:
    radial-gradient(circle at 14px 14px, rgba(255,255,255,.18) 0 4px, transparent 5px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 44px),
    linear-gradient(135deg, #b00012 0%, #760009 48%, #d71920 100%);
  background-size:36px 36px, 100% 100%, 100% 100%;
}
.site-main{
  padding-top:28px;
}
.front-section,
.content-wrap,
.post-card{
  background:rgba(255,255,255,.97);
}

@media (min-width:761px){
  .top-menu-bar li:hover > a,
  .top-menu-bar li:focus-within > a{
    background:#e31722;
    color:#fff;
  }
}

@media (max-width:760px){
  .top-menu-inner{padding:0}
  .menu-toggle{display:flex}
  .menu-wrap{display:none;background:#101010}
  .top-menu-bar.is-open .menu-wrap{display:block}
  .menu-wrap > ul,
  .top-menu-bar ul.menu{
    display:block;
    width:100%;
  }
  .top-menu-bar li{width:100%}
  .top-menu-bar a{
    padding:14px 16px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .top-menu-bar ul.sub-menu,
  .top-menu-bar ul.children{
    position:static;
    display:block;
    min-width:0;
    width:100%;
    border-top:0;
    box-shadow:none;
    border-radius:0;
    padding:0;
    background:#242424;
  }
  .top-menu-bar ul.sub-menu a,
  .top-menu-bar ul.children a{
    padding-left:32px;
    font-size:13px;
    background:#242424;
  }
  .top-menu-bar .menu-item-has-children > a::after{
    content:"";
  }
  .top-menu-bar.is-open .hamburger-lines span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .top-menu-bar.is-open .hamburger-lines span:nth-child(2){opacity:0}
  .top-menu-bar.is-open .hamburger-lines span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hamburger-lines span{transition:.2s ease}
}

/* v1.3.3: homepage now respects WordPress page editor content only */
.front-page-content{
  max-width:1180px;
  margin:0 auto;
  padding:26px 18px 46px;
}
.front-page-content > *:first-child{margin-top:0}