/* ==========================================================================
   Check Media CSS (Consolidated by ChatGPT 5)
   Tidied and added FullScreenBtn to map iframe overlay
   Last tidy: 29/10/2025
   Notes:
   - Behaviour preserved; duplication trimmed; invalid values fixed.
   - IDs retained (no HTML changes needed).
   - Landscape map height now uses clamp() to replace stacks of height MQs.
   ========================================================================== */


/* ========== 0) GLOBAL BASE / RESETS ===================================== */

/* Prevent WebKit auto-resizing text; keep a single global rule */
html { -webkit-text-size-adjust: none; }

/* Default visibility/layout for key containers (desktop-first baseline) */
#mainback2 { display:block; }
#maintoptable { display:block; }
#photomain { display:block; width:100%; }

#sidebar-toggle-button { display:none; }   /* toggler shows only on narrower breakpoints */
#menu-wrap { display:block; }

#main-content-table { width:100%; }
#main-content-div   { width:100%; }

#smalllogo { display:none; width:100%; }   /* mobile logo appears on small screens */
#biglogo   { display:inline-block; width:100%; }
#logo-container { padding-top:25px; }
#home { display:none; }
#mobile-up-arrow { display:none; }

#map-container { width:50%; }              /* overridden to 100% on small screens */
#mapdiv { width:100%; }

#left-hand-bar,
#left-hand-bar-new  { max-width:98%; padding:1%; }
#right-hand-bar,
#right-hand-bar-new { width:250px; text-align:left; height:auto; } /* used on specific pages */
#route-pic-wrapper  { display:inline-block; width:24%; vertical-align:top; padding-bottom:15px; padding-right:1%; font-size:small; }
#route-pic-wrapper-2{ display:none; }      /* turned on in 751–990px and =750px blocks as needed */

#bottom-bar { max-width:98%; padding:1%; }

#pic { width:230px; margin-bottom:10px; }

/* Route hero image block (background image set inline) */
#routepic{
  margin-right:26px; margin-top:10px; padding-bottom:20px;
  height:220px; width:50%;
  background-position:left; background-repeat:no-repeat; background-size:auto 100%;
  float:left;
}

/* Route summary text block often alongside route pics */
.routesummarytext { display:inline-block; }

/* ===== Map show/hide buttons (portrait default) ===== */
#showmapbox{
  position:absolute; top:140px; right:0; display:none; writing-mode:vertical-lr;
  background-color:#839ABE; color:#fff; padding:10px 5px; border-bottom-left-radius:5px; border-top-left-radius:5px;
}
#hidemapbox,
#fullscreenbtn {
  position: absolute;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: rgba(90,120,150,0.8);
  color: #fff;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.4) ;
  outline: none;
  z-index: 10;              /* ensure above the iframe */
  text-decoration: none;    /* for <a> elements */
}

/* Hover to match Locate button */
#hidemapbox:hover,
#fullscreenbtn:hover {
  background: rgba(70,100,130,0.9);
}

/* SVG/IMG sizing to match the 18px icon in Locate */
#hidemapbox svg, #hidemapbox img,
#fullscreenbtn svg, #fullscreenbtn img {
  width: 22px;
  height: 22px;
  display: block;
}

/* Specific positioning (keep your existing offsets) */
#hidemapbox { top: 78px; right: 8px; font-size: 0; }     /* font-size:0 to avoid extra inline spacing */
#fullscreenbtn { top: 272px; left: 11px; font-size: 0; }  /* adjust left/top if you want to line up under OL controls */

/* ===== Maps & GPX section tiles =====
   (Base styles; sizes override in small-screen MQ) */
#recommendedmapdiv{ display:inline-block; padding-bottom:5px; padding-right:25px; vertical-align:top; }
#othermapdiv      { display:inline-block; padding-bottom:5px; padding-right:25px; vertical-align:top; background-color:transparent; }
#gpxdiv           { display:inline-block; padding-bottom:25px; padding-right:25px; vertical-align:top; width:25%; }

.bigmappic,
.smallmappic { border-radius:3px; margin-bottom:3px; }

.bigmappic        { width:95px;  height:163px; }
.smallmappic      { width:95px;  height:163px; }

.bigmappiccontainer,
.smallmappiccontainer {
  position:relative; text-align:center; font-size:8pt; color:white; width:95px; vertical-align:top;
}

.bigmappicadd,
.smallmappicadd {
  position:absolute; bottom:3px; right:0; background-color:#648ba3; padding:2px;
  border-bottom-right-radius:3px; border-top-left-radius:5px; font-weight:normal;
}

.mappictext { text-decoration:none; font-weight:normal; font-size:9pt; }

/* ===== Nearby hill thumbnails (IDs retained; base merged) ===== */
[id^="nearbyhill-"]{
  display:inline-block; position:relative; vertical-align:top; padding-top:6px;
  /* width and margin-right adjust per breakpoint for grid fit */
}

/* ===== Webcam + bottom blocks ===== */
#webcamdiv  { display:inline-block; width:49%; vertical-align:top; }
#bottomblock{ width:100%; }

/* ===== Content blocks & sticky maps ===== */
.contentcolumned      { column-count:3; width:100%; column-gap:30px; padding-bottom:25px; }
.contentpic           { width:100%; display:inline-block; background-color:#ddd; font-size:8pt; margin-bottom:15px; }
.contentpicbottom     { width:100%; display:inline-block; background-color:#ddd; font-size:8pt; margin-bottom:15px; }
.contentpicbottomfloat{ display:none; background-color:#ddd; font-size:8pt; margin-bottom:15px; }
.contenth4            { border-bottom:solid 1px #666; padding-bottom:6px; margin-bottom:10px; column-span:all; }
.contentmap           { border:solid 1px #000; height:350px; } /* landscape overrides with clamp() */
.contentmapsticky     { position:-webkit-sticky; position:sticky; top:0; background-color:#fff; }

/* ===== Region Routes Summary pages (desktop base) ===== */
.routesummary       { display:block; padding-bottom:24px; }
.routesummarytextmore { text-indent:-20px; padding-left:20px; padding-bottom:14px; }

/* Search box (footer widget) */
.searchbox { width:360px; height:220px; border:none; float:right; }




/* ========== 1) = 991px (wide/desktop) =================================== */
@media screen and (min-width: 991px) {

  #mainback2     { display:block; max-width:970px; }
  #photomain     { display:block; max-width:100%; }
  #sidebar-toggle-button { display:none; }

  #smalllogo { display:none; }
  #biglogo   { display:inline-block; width:970px; }
  #mobile-up-arrow { display:none; }

  #map-container { width:50%; }
  #mapdiv        { width:100%; }

  #left-hand-bar,
  #left-hand-bar-new { width:100%; padding:1%; }

  #right-hand-bar,
  #right-hand-bar-new { width:100%; padding-left:1%; text-align:left; background-color:#fff; }

  #route-pic-wrapper  { display:inline-block; width:24%; vertical-align:top; padding-bottom:15px; padding-right:1%; font-size:small; }
  #route-pic-wrapper-2{ display:none; }

  #bottom-bar { max-width:98%; padding:1%; }

  /* Route pic slightly shorter on wide screens */
  #routepic{
    margin-right:10px; margin-top:10px; padding-bottom:20px;
    height:190px; width:50%;
    background-position:left; background-repeat:no-repeat; background-size:auto 100%;
    float:left;
  }

  /* Nearby hills: 3 across; last in each row no right margin */
  [id^="nearbyhill-"]{ width:32.7%; margin-right:0.1%; }
  #nearbyhill-3, #nearbyhill-6 { margin-right:0; }

  #webcamdiv { display:inline-block; width:49%; vertical-align:top; }

  #bottomblock { width:970px; }
  .bottomlogo { display:inline-block; padding:0;  vertical-align:top; width:30%; }
  .bottombox1 { display:inline-block; padding:15px; vertical-align:top; width:15%; }
  .bottombox2 { display:inline-block; padding:15px; vertical-align:top; width:20%; }
  .bottombox3 { display:inline-block; padding:15px; vertical-align:top; width:20%; }

  #mobile-menu-pad { display:none; }

  .contentcolumned { column-count:3; width:100%; column-gap:30px; padding-bottom:25px; min-height:200px; }
  .contentpic, .contentpicbottom { width:100%; display:inline-block; }
  .contentpicbottomfloat { display:none; }
  
    #fullscreenbtn      { display:none; }     /* hide the close button – map is pinned */

}


/* ========== 2) 751px–990px (tablet/landscape phones) ==================== */
@media screen and (max-width: 990px) and (min-width: 751px) {

  #mainback2 { opacity:0; width:100%; }
  #sidebar-toggle-button { display:block; }
  #menu-wrap { display:none; }
  #smalllogo { display:block; }
  #biglogo   { display:inline-block; }
  #mobile-up-arrow { display:inline; }

  #main-content-table { width:98%; padding-left:1%; padding-right:1%; }
  #main-content-div   { width:100%; }

  #map-container { width:50%; }
  #mapdiv        { width:100%; }

  #left-hand-bar,
  #left-hand-bar-new { width:100%; padding:1%; }

  #right-hand-bar,
  #right-hand-bar-new { width:100%; padding-left:1%; text-align:left; background-color:#fff; }

  /* Two route pic wrappers visible side-by-side */
  #route-pic-wrapper,
  #route-pic-wrapper-2 {
    display:inline-block; width:32%; vertical-align:top; padding-bottom:15px; padding-right:1%; font-size:small;
  }

  #bottom-bar { max-width:98%; padding:1%; }

  #pic { width:230px; margin-bottom:10px; }

  /* Route pics a little taller, centred */
  #routepic{
    margin-right:10px; margin-top:10px; padding-bottom:20px;
    height:220px; width:38%;
    background-position:center; background-repeat:no-repeat; background-size:auto 100%;
    float:left;
  }
  #route-pic2{
    margin-right:10px; margin-top:10px; padding-bottom:20px;
    height:220px; width:38%;
    background-position:center; background-repeat:no-repeat; background-size:auto 100%;
    float:left;
  }

  /* Bigger close button */
  #hidemapbox { top:75px; font-size:14pt; }

  /* Nearby hills: 3 across */
  [id^="nearbyhill-"]{ width:32.7%; margin-right:0.1%; }
  #nearbyhill-3, #nearbyhill-6 { margin-right:0; }

  #webcamdiv { display:inline-block; width:99%; vertical-align:top; }

  #bottomblock { width:100%; }
  .bottomlogo { display:inline-block; padding:0;  vertical-align:top; padding-right:10px; width:30%; }
  .bottombox1 { display:inline-block; padding:15px; vertical-align:top; width:20%; }
  .bottombox2 { display:inline-block; padding:15px; vertical-align:top; width:29%; }
  .bottombox3 { display:inline-block; padding:15px; vertical-align:top; width:28%; }

  #mobile-menu-pad { height:60px; display:block; }

  .contentcolumned { column-count:3; width:100%; column-gap:30px; padding-bottom:25px; min-height:200px; }
  .contentpic, .contentpicbottom { width:100%; display:inline-block; }
  .contentpicbottomfloat { display:none; }
  .contentmap { border:solid 1px #000; height:350px; }

  /* Heading sizes (as per original intent) */
  h1 { font-size:26pt; }
  h2 { font-size:12pt; }
  h3 { font-size:16pt; }
  h4 { font-size:14pt; }
  
    #fullscreenbtn      { display:none; }     /* hide the close button – map is pinned */

}


/* ========== 3) = 750px (phones & small tablets) ========================= */
@media screen and (max-width: 750px) {

  #mainback2 { opacity:0; width:100%; }
  #maintoptable { display:none; }
  #sidebar-toggle-button { display:block; }
  #menu-wrap { display:none; }

  #smalllogo { display:inline-block; width:100%; }
  #biglogo   { display:none; }
  #logo-container { display:none; }
  #mobile-up-arrow { display:inline; }

  #photomain { display:block; width:100%; }

  #map-container { width:100%; }
  .routesummarytext { display:none; } /* hide the long text beside pics on very small screens */

  /* Centred map frame within content column */
  #mapdiv { width:80%; margin-left:10%; margin-right:10%; }

  /* Keep only one definition for content table sizing on mobile */
  #main-content-table { width:94%; padding-left:3%; padding-right:3%; }

  #left-hand-bar,
  #left-hand-bar-new { width:100%; padding:1%; }

  #right-hand-bar,
  #right-hand-bar-new { width:100%; padding-left:1%; text-align:left; background-color:#fff; }

  #bottom-bar { max-width:100%; padding:1%; }

  #pic { width:31.5%; padding-right:1%; margin-bottom:10px; }

  /* Route hero turns into full-width banner */
  #routepic{
    padding-top:10px; padding-bottom:20px; height:220px; width:100%;
    background-position:center top; background-repeat:no-repeat; background-size:100% auto; float:none;
  }

  /* Thumbnails grid under banner */
  #route-pic-wrapper,
  #route-pic-wrapper-2 { display:inline-block; width:31.5%; padding-right:1%; vertical-align:top; padding-bottom:15px; font-size:small; }
  #desc-pic { width:50%; max-width:230px; padding-left:20px; float:right; }

  #webcamdiv { display:inline-block; width:99%; vertical-align:top; }

  #bottomblock { width:100%; }
  .bottomlogo { display:inline-block; padding:0; vertical-align:top; padding-right:10px; width:30%; }
  .bottombox1 { display:inline-block; padding:15px; vertical-align:top; width:25%; }
  .bottombox2 { display:inline-block; padding:15px; vertical-align:top; width:32%; }
  .bottombox3 { display:inline-block; padding:15px; vertical-align:top; width:20%; }

  /* Close button position/size tweak on small screens */
  #hidemapbox { top:75px; font-size:14pt; }

  /* Maps/GPX tiles – shrink on phones */
  #gpxdiv { display:inline-block; padding-bottom:25px; padding-right:25px; vertical-align:top; width:75%; }
  #recommendedmapdiv, #othermapdiv { display:inline-block; padding-bottom:5px; padding-right:25px; vertical-align:top; }
  .mappictext { display:none; }

  .bigmappic      { width:75px; height:125px; }
  .smallmappic    { width:75px; height:125px; }
  .bigmappiccontainer,
  .smallmappiccontainer { width:75px; }

  /* Nearby hills: 3 across */
  [id^="nearbyhill-"]{ width:32.7%; margin-right:0.1%; }
  #nearbyhill-3, #nearbyhill-6 { margin-right:0; }

  #mobile-menu-pad { height:60px; display:block; }

  .contentcolumned { column-count:2; width:100%; column-gap:30px; padding-bottom:25px; min-height:200px; }
  .contentpic, .contentpicbottom { width:100%; display:inline-block; }
  .contentpicbottomfloat { display:none; }
  .contentmap { border:solid 1px #000; height:300px; }
  .contentmapsticky { position:-webkit-sticky; position:sticky; top:0; background-color:#fff; }

  /* Type on small screens */
  h1 { font-size:24pt; }
  h2 { font-size:12pt; }
  h3 { font-size:16pt; }
  h4 { font-size:14pt; }

  .breadcrumbs { font-size:8pt; font-weight:100; }
  .breadcrumbs a:link,
  .breadcrumbs a:visited,
  .breadcrumbs a:hover,
  .breadcrumbs a:active { font-weight:100; }

  /* Region Routes Summary: hide the large card list, keep more text */
  .routesummary { display:none; }
  .routesummarytextmore { font-family:'Open Sans', sans-serif; font-size:12pt; font-weight:normal; padding-top:0; }
}


/* ========== 4) = 570px (very small phones) ============================== */
@media screen and (max-width: 570px) {

  #bottomblock { width:100%; }
  .searchbox { width:60%; }
  .bottomlogo { display:inline-block; padding-left:5px; vertical-align:top; padding-right:10px; width:30%; }
  .bottombox1, .bottombox2, .bottombox3 { display:inline-block; padding:15px; vertical-align:top; width:45%; }

  /* Close button fit */
  #hidemapbox { top:66px; font-size:14pt; }

  /* Nearby hills: 2 across; hide 5 & 6 */
  #nearbyhill-1, #nearbyhill-3 { width:49%; margin-right:0.5%; }
  #nearbyhill-2, #nearbyhill-4 { width:49%; margin-right:0; }
  #nearbyhill-5, #nearbyhill-6 { display:none; }

  .contentcolumned { column-count:1; width:100%; padding-bottom:25px; min-height:0; }
  .contentpic { width:50%; float:left; margin-right:25px; margin-bottom:20px; }
  .contentpicbottom { display:none; }
  .contentpicbottomfloat { display:block; width:60%; float:right; margin-left:20px; margin-top:5px; margin-bottom:5px; }

  /* Type */
  h1 { font-size:22pt; }
  h2 { font-size:11pt; }
  h3 { font-size:14pt; }
  h4 { font-size:14pt; }

  .breadcrumbs { font-size:6pt; font-weight:100; }
  .breadcrumbs a:link,
  .breadcrumbs a:visited,
  .breadcrumbs a:hover,
  .breadcrumbs a:active { font-weight:100; }

  /* Close button slight offset on the tiniest heights */
  #hidemapbox { top:72px; }
}


/* ========== 5) ORIENTATION: LANDSCAPE (map floats right) ================ */
/* When in landscape: put the detailed text in two columns (left 63%) and
   float the map to the top-right (33%), with a sticky position. */
@media screen and (orientation:landscape) {
  .contentmapsticky{ position:-webkit-sticky; position:sticky; background-color:#fff; width:33%; float:right; padding-top:45px; }
  #paradetail      { width:63%; }
  #routemap        { display:none; }     /* only the sticky map shows in landscape */
  .contentcolumned { column-count:2; width:100%; column-gap:30px; padding-bottom:25px; min-height:200px; }
  #hidemapbox      { display:none; }     /* hide the close button */
  #fullscreenbtn   { display:none; }     /* hide the fullscreen button */
  .contentmap      { height:clamp(220px, 70vh, 690px); }/* Replace multiple (max-height) map height rules with a single clamp: */
}

/* (End of file) */