/* ==========================================================================
   Beaumaris Football Club - responsive layer
   Loaded LAST on every public page so it can tidy up the older stylesheets
   (bfc.css, style.css, media.css) without editing them. Admin pages do not
   load this file.
   ========================================================================== */

:root {
  --bfc-blue: #0038a8;
  --bfc-blue-dark: #002a80;
  --bfc-gold: #f7a600;
  --bfc-sky: #abdaf7;
  --bfc-text: #222;
  --bfc-radius: 6px;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; color: var(--bfc-text); }
*, *::before, *::after { box-sizing: border-box; }

img, video, embed, object { max-width: 100%; }
img { height: auto; }

/* Keep map / video embeds inside the screen */
iframe { max-width: 100%; border: 0; }
iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"],
iframe[src*="facebook.com/plugins/video"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
iframe[src*="google.com/maps"], iframe[src*="maps.google"] { width: 100%; }

/* Links and buttons: slightly softer transitions than the 0.5s default */
body a { transition: color .2s, background-color .2s, opacity .2s; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--bfc-gold);
  outline-offset: 2px;
}

/* ---------- Tables ---------- */
/* responsive.js wraps content tables in .table-scroll so wide tables
   scroll sideways inside the page instead of stretching it. */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 15px;
}
.table-scroll > table { margin-bottom: 0; }
.table-scroll.is-scrollable {
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), transparent) right center;
  background-repeat: no-repeat;
  background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.table-scroll-hint {
  display: none;
  font-size: 12px;
  color: #555;
  margin: 4px 0 6px;
}
.table-scroll.is-scrollable + .table-scroll-hint,
.table-scroll-hint.show { display: block; }

/* A .container inside another .container (games played page) overflows */
.container .container { width: auto; max-width: 100%; }

/* ---------- Navigation ---------- */
.dropdown-submenu.open > .dropdown-menu { display: block; }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], select, textarea { max-width: 100%; }

/* ---------- Light refresh (all sizes) ---------- */
.section-content { border-radius: var(--bfc-radius); }
footer .footer-links li a, .footer-links li a { display: inline-block; padding: 3px 0; font-size: 13px; }
.footer_container .list-inline > li { padding: 4px; }

/* ---------- Sponsors ribbon: fade between groups (see js/script.js) ---------- */
/* All groups sit in the same grid cell, so they share one position and the
   ribbon is always as tall as the tallest group. (They used to switch between
   absolute and relative positioning, which made the logo groups jump up and
   down by the ribbon's padding while fading.) */
#owl-demo.sponsor-fader { position: relative; overflow: hidden; display: grid; }
.sponsor-fader .sponsor-group {
  grid-area: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  padding: 12px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 2.5s ease-in-out, visibility 0s linear 2.5s;
}
.sponsor-fader .sponsor-group.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity 2.5s ease-in-out, visibility 0s;
}
.sponsor-fader .item {
  flex: 0 0 25%;
  max-width: 25%;
  margin: 0 !important;
  padding: 0 15px;
  text-align: center;
}
.sponsor-fader .item img { width: 100%; height: auto; }
/* Before script.js has grouped the logos, show them in one row with the same
   size and spacing as the finished ribbon, so it doesn't load as a tall column
   of every logo and then collapse (which made the page jump on every load). */
#owl-demo { transition: none; }
#owl-demo.owl-carousel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  padding: 12px 0;
}
#owl-demo.owl-carousel > .item {
  flex: 0 0 25%;
  max-width: 25%;
  margin: 0;
  padding: 0 15px;
  text-align: center;
}
@media (max-width: 991px) {
  .sponsor-fader .item,
  #owl-demo.owl-carousel > .item { flex-basis: 33.333%; max-width: 33.333%; }
}
@media (max-width: 479px) {
  .sponsor-fader .item,
  #owl-demo.owl-carousel > .item { flex-basis: 50%; max-width: 50%; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sponsor-fader .sponsor-group, .sponsor-fader .sponsor-group.active { transition: none; }
}

/* ==========================================================================
   Tablets and below (Bootstrap "sm" and smaller)
   ========================================================================== */
@media (max-width: 991px) {
  .container { width: 100%; max-width: 100%; }
  .row > .row { margin-left: 0; margin-right: 0; } /* rows nested straight inside rows (home page) */
  /* Boxes with a fixed pixel height (set inline for desktop) must grow when
     their content stacks on smaller screens, or they spill over the footer. */
  [style*="height:1380px"],
  [style*="height: 1380px"],
  [style*="height:1200px"],
  [style*="height: 1200px"],
  [style*="height:1150px"],
  [style*="height: 1150px"],
  [style*="height:1046px"],
  [style*="height: 1046px"],
  [style*="height:925px"],
  [style*="height: 925px"],
  [style*="height:900px"],
  [style*="height: 900px"],
  [style*="height:830px"],
  [style*="height: 830px"],
  [style*="height:720px"],
  [style*="height: 720px"],
  [style*="height:710px"],
  [style*="height: 710px"],
  [style*="height:670px"],
  [style*="height: 670px"],
  [style*="height:650px"],
  [style*="height: 650px"],
  [style*="height:630px"],
  [style*="height: 630px"],
  [style*="height:610px"],
  [style*="height: 610px"],
  [style*="height:570px"],
  [style*="height: 570px"],
  [style*="height:500px"],
  [style*="height: 500px"],
  [style*="height:430px"],
  [style*="height: 430px"] {
    height: auto !important;
    min-height: 0 !important;
  }
  /* Fixed-width boxes written inline in older pages */
  [style*="width:550px"], [style*="width: 550px"],
  [style*="width:600px"], [style*="width: 600px"],
  [style*="width:650px"], [style*="width: 650px"],
  [style*="width:700px"], [style*="width: 700px"],
  [style*="width:750px"], [style*="width: 750px"],
  [style*="width:800px"], [style*="width: 800px"],
  [style*="width:900px"], [style*="width: 900px"],
  [style*="width:950px"], [style*="width: 950px"] {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* Tablets: fit the 12 menu items on one line */
@media (min-width: 768px) and (max-width: 991px) {
  .top-menu .navbar-nav { display: flex; flex-wrap: wrap; justify-content: center; float: none; }
  .top-menu .navbar-nav > li { float: none; display: block; width: auto; }
  .navbar-default .navbar-nav > li > a {
    padding: 10px 6px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Phones (Bootstrap "xs")
   ========================================================================== */
@media (max-width: 767px) {

  /* media.css sets .container padding to 5px but .row still has -15px
     margins, which pushed every page 10px wider than the phone screen. */
  .container { padding-left: 10px; padding-right: 10px; }
  .row { margin-left: -10px; margin-right: -10px; }
  .row > [class*="col-"] { padding-left: 10px; padding-right: 10px; }
  .top-menu .row, .top-menu .navbar { margin-left: 0; margin-right: 0; }
  .row > .row { margin-left: 0; margin-right: 0; } /* rows nested straight inside rows (home page) */

  /* --- Mobile menu --- */
  .top-menu .navbar-header { display: flex; justify-content: flex-end; }
  .top-menu .navbar-toggle {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: var(--bfc-radius);
  }
  .top-menu .navbar-collapse {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    border-top: 1px solid rgba(255,255,255,.15);
    padding-left: 0;
    padding-right: 0;
  }
  .navbar-default .navbar-nav > li > a {
    padding: 13px 14px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
  }
  .navbar-nav .open .dropdown-menu,
  .navbar-nav > li > .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    left: 0 !important;
    margin: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background-color: rgba(0,0,0,.25) !important;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav > li > .dropdown-menu li a {
    padding: 11px 14px 11px 28px !important;
    font-size: 14px !important;
    color: #fff !important;
    white-space: normal;
  }
  .dropdown-submenu > .dropdown-menu {
    position: static;
    float: none;
    left: 0;
    margin-left: 0;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background-color: rgba(0,0,0,.2) !important;
  }
  .dropdown-submenu > .dropdown-menu > li > a { padding-left: 42px !important; }
  /* hover-to-open does not work on touch screens, submenus open on tap instead */
  .dropdown-submenu:hover > .dropdown-menu { display: none; }
  .dropdown-submenu.open > .dropdown-menu { display: block; }
  .dropdown-submenu > a:after { margin-right: 0; transform: rotate(90deg); margin-top: 7px; }

  /* --- Page body --- */
  .wrap-img { padding-left: 0; padding-right: 0; background-size: cover !important; }
  .section-content { margin-left: 0; margin-right: 0; }
  /* justified text leaves big gaps on narrow screens */
  [style*="text-align:justify"], [style*="text-align: justify"] { text-align: left !important; }
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  h3 { font-size: 19px; }

  /* history / premiership icon grids: two per row instead of one long list */
  .contact-section > .row > .col-sm-3,
  .history .row > .col-sm-3 {
    float: left;
    width: 50%;
    min-height: 1px;
    margin-bottom: 10px;
  }
  .contact-section > .row > .col-sm-3:nth-child(2n+1),
  .history .row > .col-sm-3:nth-child(2n+1) { clear: left; }

  /* Tables: smaller text so more fits before scrolling */
  table { font-size: 13px; }
  table td, table th { word-break: normal; }
  .table-scroll > table { width: auto; min-width: 100%; }
  .table-scroll > table th { white-space: nowrap; }

  /* Forms: full width and big enough to tap */
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="password"], select, textarea {
    font-size: 16px; /* stops iPhone zooming in on focus */
  }
  .btn, button, input[type="submit"], input[type="button"] { min-height: 40px; }

  /* Footer: two columns of links */
  .grid { width: 50%; float: left; text-align: left; }
  .grid:nth-child(2n+1) { clear: left; }
  .grid h5 { margin-top: 18px; }
  p.name { font-size: 18px; }
}

/* Very small phones */
@media (max-width: 400px) {
  .grid { width: 100%; float: none; padding-left: 20px; }
  .navbar-default .navbar-nav > li > a { font-size: 14px !important; }
}

/* ---------- Phones: readability and layout fixes (20 Oct 2026) ---------- */
@media (max-width: 767px) {
  /* 1. Minimum 12px text. Several older styles shrink table and list text
        to 9-11px on small screens. */
  .newfont, .newfont3, .newfont4, .newfont6,
  .awardsdetails, .committeedetails, .historydetails, .premiershipdetails,
  .historyheading2, .committeeheading2, .importantinformation, .stbtext,
  .playername, .playersponsor {
    font-size: 12px !important;
  }
  :is(.newfont, .newfont3, .newfont4, .newfont6, .awardsdetails, .committeedetails,
      .historydetails, .premiershipdetails, .historyheading2, .committeeheading2,
      .importantinformation, .stbtext, .playername, .playersponsor) :is(strong, b, a, em, span, p, li) {
    font-size: inherit !important;
  }

  /* 2. Spot the Ball: keep the Name / Contact / Email boxes inside the form */
  .formsetup input.newfont { max-width: calc(100% - 110px); }

  /* 3. Playing lists: two players per row instead of one */
  .row > .col-sm-2:has(> .individual_player) { float: left; width: 50%; padding-left: 4px; padding-right: 4px; }
  .row:has(> .col-sm-2 > .individual_player) { margin-left: 0; margin-right: 0; }
  .individual_player { width: 100% !important; max-width: 170px; }

  /* 4. Coaching Panel: cards use the full width; boxes size to their content */
  #seniorcoaches .col-md-6,
  #seniorcoaches .col-md-6 > [class*="col-md-"] { padding-left: 0; padding-right: 0; width: 100%; }
  #seniorcoaches .events-main1 { height: auto !important; min-height: 0; margin-bottom: 10px; }
  #seniorcoaches .coachesbio { height: auto; max-height: 265px; overflow-y: auto; }   /* empty bios no longer leave a tall blank box */
}