/* Global Styles - Basic setup for the entire page */
body {
  font-family: 'Barlow', sans-serif;  /* Main font for the entire site */
  background: linear-gradient(135deg, #1a472a, #90a955);          /* Light blue-gray background */
  background-attachment: fixed;      /* Prevents gradient from repeating */
  margin: 0;                          /* Remove default margins */
  padding: 20px;  
  padding-top: 45px;                    /* Add space around the entire page */
}

/* Main container that holds all content */
.container {
  position: relative;                 /* Allows absolute positioning of children */
  max-width: 1000px;                 /* Limits width on large screens */
  margin: 0 auto;                    /* Centers the container horizontally */
  background-color: #ffffff;         /* White background */
  padding: 20px;                     /* Inner spacing */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Subtle shadow for depth */
  border-radius: 20px;                /* Rounded corners */
  margin-top: 10px;  /* Add space for the logo */
}

/* Hype video section - Positioned in top right corner */
.hype-video-container {
  position: absolute;                /* Takes it out of normal flow */
  top: 10px;
  right: 10px;
  text-align: center;
  text-decoration: none;             /* Removes underline from links */
  color: inherit;                    /* Uses parent's text color */
}
.hype-video-link {
  text-decoration: none; /* Remove underline */
  color: inherit;        /* Inherit text color */
}
.hype-video-container img {
  width: 60px;
}
.hype-video-container p {
  margin: 0 0 0;
  font-size: 0.7em;
}

/* Back arrow button */
.back-arrow {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 24px;
  text-decoration: none;
  color: #000;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* Course header styles */
.coursename {
  text-align: left;
  font-weight: 600;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
/* New course-info container for the course image and text */
.course-info {
  display: flex;                     /* Creates horizontal layout */
  align-items: center;               /* Vertically centers items */
  padding: 5px 5px 5px 10px;        /* Spacing: top right bottom left */
  background-color: white;
  border-radius: 50%;               /* Makes container circular */
  margin: 0;
  width: fit-content;               /* Container only as wide as content */
}
.course-info a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.course-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 8px;  /* Reduced space between image and text */
  object-fit: cover;
  border: 2px solid #ec691a;
}
.course-info .coursename {
  font-weight: 600;
  margin: 0;
  font-size: 15px;
}
.course-info .courselocation {
  color: #666;
  margin: 0;
  font-size: 14px;
  font-style: italic;
}

/* Winner section styles */
.winner-container {
  display: flex;
  align-items: center;       /* Vertically centers text and image */
  justify-content: flex-end; /* Aligns content to the right */
  gap: 10px;                /* Space between text and image */
  margin-top: 20px;         /* Reduced from 20px to 10px */
}
.winner-text {
  text-align: right;
  margin: 0;               /* Remove any margin */
  position: relative;
  top: -4px;              /* Move text block up slightly */
}
.weeklywinner {
  margin: 0 0 1px 0;        /* Reset default margins on paragraphs */
}
.ctpwinner {
  margin: 0 0 0 0;          /* Reset default margins on paragraphs */
  font-size: 14px;
}
.winner-image {
  width: 60px;
  height: 60px;
  object-fit: cover;        /* Ensures the image fills the box without distortion */
}
.ctpscore {
  padding: 0;
  margin: 0;
  font-size: 12px;
}

/* Title styles */
.monthtitle {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}
.themetitle {
  text-align: center;
  font-size: 16px;
  font-style: italic;
  margin: 0 0 20px 0;
  padding: 0;
}

/* Player information styles */
.player {
  text-align: left;
  font-size: 16px;
  margin: 0 0 10px 0;
  padding: 0;
}
.player-container {
  display: flex;
  align-items: center;
  height: 100%;
}
.player-image {
  flex: 0 0 auto;
  margin-left: 5px;
}
th:first-child,
td:first-child {
  width: 225px;
}
.player-image img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}
.player-image-top {
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-image-top img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  display: block;  /* Added to remove any extra space */
}
.player-info {
  margin-left: 10px;
  flex: 1;
}
.player-info .player-name,
.player-info .hcp-overall {
  display: block;
}
.player-name-top {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  position: relative;
  top: -1px;  /* Move the name up by 5px */
}
.player-score-top {
  font-size: 12px;
  gap: 3px;
  display: flex;
  letter-spacing: 1px;
  width: 100%;
  margin-top: -5px;
}

/* Calendar and grid styles */
.month-box {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  height: 40px;  /* Reduced height from 80px to 60px */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.quarter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.week {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  margin: 0;  /* Removed all margins */
  padding: 0;
}
.weeklywinner {
  text-align: right;
  font-size: 14px;
}

/* Heading styles */
h1,
h2,
h3,
h4 {
  text-align: center;
  color: #333;
  margin: 0;
}

/* Cell content styles */
.cell-content {
    position: relative;
    min-height: 50px;
    width: 100%;
}

.cell-content .asterisk {
    position: absolute;
    color: #777777;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(-15%);
    text-align: center;
}

.cell-content .stroke {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    transform: translateY(-30%);
}
.delta {
  display: inline-block;
  padding: 2px 6px 4px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.small-delta {
  padding: 3px 4px 2px 5px;
  border-radius: 4px;
  min-width: 9px;
  font-weight: 400;
  margin: 0;
}
/* Green background for negative numbers */
.negativeDelta {
  background: darkgreen;
  color: white;
}
/* Red background for positive numbers */
.positiveDelta {
  background: darkred;
  color: white;
}
/* Black text for zero */
.zeroDelta {
  border: 1px dashed #8C8C8C;
  color: #bbbbbb;
}

/* Scoring indicators for golf scores */
.birdie, .eagle, .bogey, .double-bogey {
    padding: 0 3px;
    display: inline-block;
    min-width: 20px;                /* Ensures consistent width */
    min-height: 26px;               /* Ensures consistent height */
    text-align: center;
    line-height: 26px;              /* Vertically centers text */
    vertical-align: middle;
}

.birdie {
    border: 1px solid darkgreen;    /* Green circle for under par */
    border-radius: 50%;
    box-sizing: content-box;
}

.eagle {
    background-color: rgba(0, 100, 0, 0.8);  /* Solid green for eagle */
    border-radius: 50%;
    color: white;
}

.bogey {
    border: 1px solid darkred;
    box-sizing: content-box;
}

.double-bogey {
    background-color: rgba(139, 0, 0, 0.8);
    color: white;
}

/* Table styles */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 5px;
  margin-bottom: 10px;  /* Reduced from 20px to 10px */
  position: relative;
}
th,
td {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  text-align: center;
}
th {
  background-color: #f0f0f0;
  font-weight: 500;
}
tr:nth-child(even) {
  background-color: #fafafa;
}
.hole-row {
  background-color: #cccccc;
}
.par-row {
  background-color: #e0e0e0;
}
.par-row td {
  padding-top: 5px;
  padding-bottom: 5px;
}
.hcp-overall,
.hcp-stroke {
  display: block;
  font-size: 10px;
  color: #666;
}
.player-row td {
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
}

.trophy img{
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin: 0px 0px 0px 8px;
}

/* Responsive design breakpoints */
@media (min-width: 950px) {
  /* Large screens: 4 columns */
  .quarter-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
}
@media (min-width: 600px) and (max-width: 949px) {
  /* Medium screens: 2 columns */
  .quarter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
}
@media (max-width: 599px), (max-width: 599px) and (-webkit-min-device-pixel-ratio: 3) {
  .quarter-grid {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
@media (max-width: 600px) and (max-aspect-ratio: 1/1), (max-width: 600px) and (max-aspect-ratio: 1/1) and (-webkit-min-device-pixel-ratio: 3) {
  th:nth-child(n+2):nth-child(-n+10),
  td:nth-child(n+2):nth-child(-n+10) {
    display: none;
  }
}
@media (max-width: 600px) and (min-aspect-ratio: 1/1), (max-width: 600px) and (min-aspect-ratio: 1/1) and (-webkit-min-device-pixel-ratio: 3) {
  th:nth-child(n+2):nth-child(-n+10),
  td:nth-child(n+2):nth-child(-n+10) {
    display: table-cell;
  }
}

/* Background image for lower four rows */
tbody.player-rows-bg {
  position: relative;
}
tbody.player-rows-bg::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%) scale(1);
}
tbody.player-rows-bg tr td {
  position: relative;
  z-index: 1;
}
table td:nth-last-child(1),
table td:nth-last-child(2),
table td:nth-last-child(1),
table td:nth-last-child(2) {
    font-weight: 500;  /* Makes the last three columns slightly bolder */
}

/* Add responsive adjustments for landscape mobile */
@media screen and (max-width: 896px) {  /* iPhone landscape breakpoint */
    .birdie, .eagle, .bogey, .double-bogey {
        min-width: 16px;
        min-height: 22px;
        line-height: 22px;
        padding: 0 2px;
    }
    
    .birdie, .bogey {
        box-sizing: border-box;
    }
}

/* For screens between 600px and 667px */
@media screen and (min-width: 600px) and (max-width: 675px) {
    table th:nth-last-child(2),
    table td:nth-last-child(2),
    table th:nth-last-child(3),
    table td:nth-last-child(3) {
        display: none;
    }
}

@media screen and (max-width: 667px) {  /* iPhone SE/smaller devices in landscape */
    .birdie, .eagle, .bogey, .double-bogey {
        min-width: 14px;
        min-height: 20px;
        line-height: 20px;
        padding: 0 1px;
    }
}

/* Player-specific image border colors */
.corbin-image {
    border: 2px solid #fb58af;      /* Pink border for Corbin */
    border-radius: 50%;
}

.ab-image {
    border: 2px solid #3897f5;      /* Blue border for AB */
    border-radius: 50%;
}

.matt-image {
    border: 2px solid #8de55d;
    border-radius: 50%;
}

.julian-image {
    border: 2px solid #b84af8;
    border-radius: 50%;
}

.pin-container {
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}

.weeklywinner, .ctpwinner, .ctpscore {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;  /* Right-aligns the content */
    margin: 0 0 5px 0;  /* Adds consistent bottom margin to each line */
}

.ctpscore {
    margin-bottom: 0;  /* Removes bottom margin from last line */
}

.weeklywinner img, .ctpwinner img {
    display: block;
    order: -1;
    position: relative;
    top: -1px;  /* Moves these images up by 2px */
}

.ctpscore img {
    display: block;
    order: -1;  /* Keeps the ruler image in its original position */
}

.header-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;  /* Adjust size as needed */
  top: -40px;    /* Adjust to control how much sticks out */
  z-index: 1;    /* Ensures logo appears above container */
}

/* Player link styles */
.player-name a, .player-name-top a {
    text-decoration: none;
    color: inherit;
}

.player-name a:hover, .player-name-top a:hover {
    text-decoration: underline;
}

/* Player image link styles */
.player-image a, .player-image-top a {
    text-decoration: none;
    color: inherit;
}
.container {
  position: relative;  /* Ensure this exists */
}

.logo-header {
  position: relative;
  top: -65px;  /* Changed from -65px */
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: -65px;  /* Match the top value */
  width: 100px;
  z-index: 2;
}