/* sp.css - smartphone layer for kansaikaruizawa golf club (ASCII only) */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { margin: 0 !important; }
#hpb-container { overflow-wrap: anywhere; }

/* rate calendar page: keep 7 columns inside the screen */
.cal-weekdays, .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 3px; }
.cal-grid .cell { min-width: 0; overflow: hidden; }
img, iframe, video, embed, object { max-width: 100%; }
img { height: auto; }
table { max-width: 100%; }
td[style*="width : 1000px"] { width: auto !important; }

/* ---------- bottom action bar (phone only) ---------- */
#sp-bar { display: none; }

/* ---------- plan list (replaces the 7-column table) ---------- */
#plan-list { margin: 8px 0 24px; }
#plan-list h4 { margin: 20px 0 8px; font-size: 1.05em; }
#plan-list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #cccccc; }
#plan-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 12px 4px;
  border-bottom: 1px solid #dddddd;
}
#hpb-main #plan-list li { background: none !important; list-style: none !important; padding: 12px 4px !important; margin: 0 !important; }
#hpb-main #plan-list li:before, #hpb-main #plan-list li:after { display: none !important; content: none !important; }
#plan-list .pn { font-weight: bold; }
#plan-list .pp { font-weight: bold; font-size: 1.15em; color: #2e6b3a; text-align: right; white-space: nowrap; }
#plan-list .pd { grid-column: 1 / -1; font-size: 0.85em; color: #555555; }

@media screen and (max-width: 568px) {
  body { font-size: 16px; line-height: 1.8; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* header: phone number becomes a tap target */
  #hpb-headerExtra1 a { color: #ffffff; text-decoration: underline; padding: 6px 2px; display: inline-block; }

  /* content: use the full width */
  #hpb-wrapper, #hpb-main, #hpb-aside, #hpb-nav { box-sizing: border-box; max-width: 100%; }
  #hpb-main { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; padding-left: 14px !important; padding-right: 14px !important; }
  #hpb-title h2 { padding-left: 14px; padding-right: 14px; box-sizing: border-box; }
  #hpb-main h2, #hpb-main h3, #hpb-main h4 { overflow-wrap: anywhere; }
  #hpb-main p, #hpb-main li, #hpb-main dd { font-size: 16px; line-height: 1.8; }

  /* tables: let them shrink and wrap */
  #hpb-main table { width: 100% !important; box-sizing: border-box; }
  #hpb-main td, #hpb-main th { padding: 8px 6px; word-break: break-word; }
  #hpb-main td[style*="width"] { width: auto !important; }

  /* forms: 16px prevents iOS zoom-on-focus, 44px+ tap targets */
  #hpb-main input[type="text"], #hpb-main input[type="email"], #hpb-main input[type="tel"],
  #hpb-main input[type="password"], #hpb-main select, #hpb-main textarea {
    font-size: 16px; width: 100% !important; max-width: 100%; box-sizing: border-box;
    min-height: 44px; padding: 8px 10px; border: 1px solid #999999; border-radius: 4px; background: #ffffff; color: #222222;
  }
  #hpb-main textarea { min-height: 160px; }
  #hpb-main input[type="submit"], #hpb-main input[type="button"], #hpb-main button {
    font-size: 16px; min-height: 48px; padding: 10px 28px; border: 0; border-radius: 4px;
    background: #2e6b3a; color: #ffffff; font-weight: bold;
  }

  /* news */
  #toppage-news dl { margin-left: 0; margin-right: 0; }
  #toppage-news dd { margin-left: 0; }
  #toppage-news dd table { width: 100% !important; }
  #toppage-news dd img { max-width: 100%; height: auto; }

  /* bigger tap targets in menus and side links */
  #hpb-nav a, #hpb-aside #banner a, #hpb-footer a { min-height: 44px; }

  /* fixed bottom bar */
  #sp-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    background: #111111;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #sp-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.2;
    border-left: 1px solid #333333;
  }
  #sp-bar a:first-child { border-left: 0; }
  #sp-bar .sp-tel { background: #3b4a5a; }
  #sp-bar .sp-res { background: #2e6b3a; flex: 1.5; }
  #sp-bar .sp-acc { background: #222222; }
  #pagetop { margin-bottom: 8px; }
}

/* ======================================================================
   color layer (golf-course palette): deep green / sky blue / sun orange
   ====================================================================== */
:root {
  --kk-deep: #1b4429;
  --kk-green: #2e6b3a;
  --kk-green-tint: #e9f4e6;
  --kk-sky: #2f7fb8;
  --kk-sky-dark: #1f6193;
  --kk-sky-tint: #e5f1fa;
  --kk-sun: #e8742a;
  --kk-sun-dark: #c9551a;
  --kk-sun-tint: #fdeee0;
}

/* header and navigation */
#hpb-header { background: linear-gradient(135deg, var(--kk-deep) 0%, var(--kk-green) 100%) !important; }
#hpb-headerMain { border-bottom-color: rgba(255, 255, 255, 0.35) !important; }
#hpb-nav { background: var(--kk-deep) !important; }
#hpb-nav li a { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
#hpb-nav li:nth-child(1) a { box-shadow: inset 5px 0 0 #7cc47f; }
#hpb-nav li:nth-child(2) a { box-shadow: inset 5px 0 0 #5aaee0; }
#hpb-nav li:nth-child(3) a { box-shadow: inset 5px 0 0 #f0a35a; }
#hpb-nav li:nth-child(4) a { box-shadow: inset 5px 0 0 #f2d058; }
#hpb-nav li:nth-child(5) a { box-shadow: inset 5px 0 0 #e98a9b; }
#hpb-nav li:nth-child(6) a { box-shadow: inset 5px 0 0 #5cc6b8; }

/* section headings */
#toppage h3, #toppage-campaign h3, #toppage-news h3 { border-bottom: 2px solid var(--kk-green) !important; }
#toppage h3 .en, #toppage-campaign h3 .en, #toppage-news h3 .en { color: var(--kk-green); }
#hpb-main h4 { color: var(--kk-deep); }

/* body links (readable on white) */
#hpb-main a { color: var(--kk-sky-dark); }

/* plan cards on the top page: weekday = sky, weekend = sun */
#toppage .itemlist .item { border-radius: 8px; overflow: hidden; }
#toppage .itemlist .item:nth-child(1) { border-top: 5px solid var(--kk-sky) !important; background: var(--kk-sky-tint); }
#toppage .itemlist .item:nth-child(2) { border-top: 5px solid var(--kk-sun) !important; background: var(--kk-sun-tint); }
#toppage .itemlist .item:nth-child(1) h4 { color: var(--kk-sky-dark); }
#toppage .itemlist .item:nth-child(2) h4 { color: var(--kk-sun-dark); }

/* welcome offer box */
#toppage-campaign { background: #ffffff; border-radius: 10px; padding: 4px 14px 14px; }
#toppage-campaign h4 { color: var(--kk-sun-dark); }

/* plan list */
#plan-list h4 { display: inline-block; padding: 4px 14px; border-radius: 999px; color: #ffffff !important; font-size: 0.95em; }
#plan-list h4:nth-of-type(1) { background: var(--kk-sky); }
#plan-list h4:nth-of-type(2) { background: var(--kk-sun); }
#plan-list ul:nth-of-type(1) { border-top-color: var(--kk-sky); }
#plan-list ul:nth-of-type(2) { border-top-color: var(--kk-sun); }
#plan-list ul:nth-of-type(1) .pp { color: var(--kk-sky-dark); }
#plan-list ul:nth-of-type(2) .pp { color: var(--kk-sun-dark); }
#plan-list ul:nth-of-type(1) li:nth-child(even) { background: var(--kk-sky-tint); }
#plan-list ul:nth-of-type(2) li:nth-child(even) { background: var(--kk-sun-tint); }

/* news: date pills */
#toppage-news dt {
  background: var(--kk-green);
  color: #ffffff;
  border-radius: 999px;
  font-size: 13px;
}
@media screen and (max-width: 568px) {
  #toppage-news dt {
    display: inline-block;
    padding: 2px 12px !important;
    margin-top: 10px;
    width: fit-content !important;
    min-width: 0 !important;
    float: none !important;
  }
}

/* reservation banners on the top page */
#reserve-banners a:nth-child(1) { background: var(--kk-sky) !important; }
#reserve-banners a:nth-child(2) { background: var(--kk-green) !important; }

/* side links and shop info */
#hpb-aside #banner li:nth-child(1) a { border-left: 5px solid #7cc47f; }
#hpb-aside #banner li:nth-child(2) a { border-left: 5px solid #5aaee0; }
#hpb-aside #banner li:nth-child(3) a { border-left: 5px solid #f0a35a; }
#hpb-aside #banner li:nth-child(4) a { border-left: 5px solid #f2d058; }
#hpb-aside #banner li:nth-child(5) a { border-left: 5px solid #e98a9b; }
#hpb-aside #banner li:nth-child(6) a { border-left: 5px solid #5cc6b8; }
#shopinfo h3 { background: #cfe6cf !important; color: var(--kk-deep) !important; }

/* footer */
#hpb-footerExtra1 { background: #14391f !important; }
#hpb-footerMain { background: var(--kk-deep) !important; }

/* bottom bar (phone) */
@media screen and (max-width: 568px) {
  #sp-bar .sp-tel { background: var(--kk-sky); }
  #sp-bar .sp-res { background: var(--kk-green); }
  #sp-bar .sp-acc { background: var(--kk-sun); }
}

/* corrected logo (club), transparent background for the green header */
#hpb-headerLogo a { background-image: url(logo_kkgc.png) !important; }

/* 2026-10-20: plan note, and slightly larger base text for screens wider than a phone */
#plan-list .plan-note { font-size: 0.85em; color: #555555; margin: 12px 0 0; }
@media screen and (min-width: 569px) {
  html body, html:first-child body { font-size: 95% !important; }
}

/* ======================================================================
   desktop header (screens wider than a phone): full-width green band, full logo, tidy phone text
   ====================================================================== */
@media screen and (min-width: 569px) {
  #hpb-container {
    background-image: linear-gradient(135deg, var(--kk-deep) 0%, var(--kk-green) 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 130px !important;
    background-position: center top !important;
  }
  #hpb-header { background: transparent !important; }
  #hpb-nav { background: transparent !important; }
  #hpb-nav li a { border-bottom-color: transparent !important; }
  #hpb-headerExtra1 a { color: #ffffff !important; text-decoration: none !important; padding: 0 !important; display: inline !important; }
  #hpb-headerExtra1 .tel, #hpb-headerExtra1 .address { font-size: 9.6px !important; }
  /* logo: the image is 472px wide, so give it a 400px box and move the menu over by the same amount */
  #hpb-headerLogo { width: 400px; }
  #hpb-headerLogo a { width: 380px; background-size: 380px auto; background-position: left center; }
  #hpb-nav li:first-child { margin-left: 400px; }
}

/* desktop: weekday and weekend plan lists side by side */
@media screen and (min-width: 569px) {
  #plan-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; }
  #plan-list h4:nth-of-type(1) { grid-column: 1; grid-row: 1; justify-self: start; }
  #plan-list ul:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  #plan-list h4:nth-of-type(2) { grid-column: 2; grid-row: 1; justify-self: start; }
  #plan-list ul:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  #plan-list .plan-note { grid-column: 1 / -1; grid-row: 3; }
  #plan-list .pp { font-size: 1.05em; }
}

/* the calendar page is embedded in the top page: no bottom bar inside the frame */
html[data-embed] #sp-bar { display: none !important; }
html[data-embed] body { padding-bottom: 0 !important; }

/* ======================================================================
   phone: make tables, term lists and form labels the same size as the body text (16px)
   (the template's base size is 70%, so only p / li / dd were 16px before)
   ====================================================================== */
@media screen and (max-width: 568px) {
  #hpb-main td, #hpb-main th, #hpb-main dt, #hpb-main address, #hpb-main label { font-size: 16px; line-height: 1.7; }
  #toppage-news dt { font-size: 13px; }
}

/* ======================================================================
   desktop header back to the original black (screens wider than a phone)
   the phone keeps the green header from the color layer
   ====================================================================== */
@media screen and (min-width: 569px) {
  #hpb-container {
    background-image: url(bg_header_2Za.png) !important;
    background-repeat: repeat-x !important;
    background-size: auto !important;
    background-position: center top !important;
  }
  #hpb-header { background: transparent !important; }
  #hpb-nav { background: transparent !important; }
  #hpb-nav li a { border-bottom-color: #000000 !important; box-shadow: none !important; }
}

/* ======================================================================
   company page: line up the company-profile rows with the body text edges (desktop)
   ====================================================================== */
@media screen and (min-width: 569px) {
  #company dl { margin-left: 50px; margin-right: 50px; }
  #company dl dt { padding-left: 0; width: 180px; }
}