/* ==========================================================================
   Go Tropical property template — WordPress overlay
   --------------------------------------------------------------------------
   gt-theme.css is a verbatim copy of the static template's stylesheet, served
   scoped to .gt-property by tools/gt-scope-css.php. Everything WordPress needs
   on top of it lives here.
   ========================================================================== */

/* ---------- Fitting under WP Residence's header ---------- */
/* The template's top padding existed to clear its own fixed navigation bar.
   The theme's header is in normal flow, so that space is now dead. */
.gt-property .prop-top{padding-top:clamp(24px,3vw,40px)}
.gt-property .ahero{padding-top:clamp(36px,5vw,72px)}
.gt-property .phead{padding-top:clamp(36px,5vw,72px)}
/* The sidebar sticks below the theme's header rather than the template's. */
.gt-property .pside{top:24px}
body.admin-bar .gt-property .pside{top:56px}
@media(max-width:1060px){
  .gt-property .pside,body.admin-bar .gt-property .pside{top:auto}
}

/* The template set overflow-x on its own body; scoped to .gt-property it would
   clip the sticky sidebar, so the page keeps the theme's scrolling. */
.gt-property{overflow-x:visible}

/* The theme's container adds side padding; the template's .wrap supplies its
   own gutter, so full-bleed bands stay full-bleed. */
.gt-property .section--sand,
.gt-property .cta{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}

/* ---------- Headings follow their section ---------- */
/* The template relies on headings inheriting their colour, so a dark band
   (.section--ink, .section--lagoon) turns them white. WP Residence sets an
   explicit colour on h1–h6, which breaks that inheritance and leaves the
   headings near-black on a near-black background. */
.gt-property h1,
.gt-property h2,
.gt-property h3,
.gt-property h4,
.gt-property h5,
.gt-property h6{color:inherit}

/* ---------- Agent page: gaps the static template never had ---------- */
/* The template hard-codes three stat cells because its demo agents all had
   three. A real agent may have no coverage set, which would leave an empty
   cell sitting in the row. */
.gt-property .astats--1{grid-template-columns:1fr}
.gt-property .astats--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Same for the About row: with no bio the left column would be blank and the
   detail table would float on its own. */
.gt-property .aabout--solo{grid-template-columns:minmax(0,1fr)}
@media(min-width:861px){
  .gt-property .aabout--solo{max-width:560px}
}

/* ---------- Theme chrome we do not want on this page ---------- */
/* These belong to WP Residence's own property layout, which this template
   replaces. The sticky section tabs link to anchors (#description, #address,
   #walkscore, …) this page does not render; the agent bar duplicates our
   sidebar card; the prev/next arrows sit over the gallery at the page edges.
   Site-wide chrome — back-to-top, contact button, the header and footer
   themselves — is left alone. Delete a rule to get that piece back. */
.wpestate_top_property_navigation{display:none !important}
.mobile_agent_area_wrapper{display:none !important}
.navigational_links{display:none !important}

/* ---------- WordPress core markup inside the description ---------- */
.gt-property .pdesc h1,
.gt-property .pdesc h2,
.gt-property .pdesc h3,
.gt-property .pdesc h4{margin:1.6rem 0 .8rem;font-size:clamp(1.25rem,2vw,1.55rem)}
.gt-property .pdesc h1:first-child,
.gt-property .pdesc h2:first-child,
.gt-property .pdesc h3:first-child{margin-top:0}
.gt-property .pdesc ul,
.gt-property .pdesc ol{margin:1rem 0 0;padding-left:1.25rem;color:var(--ink-2)}
.gt-property .pdesc ul{list-style:disc}
.gt-property .pdesc ol{list-style:decimal}
.gt-property .pdesc li + li{margin-top:.35rem}
.gt-property .pdesc a{color:var(--lagoon);border-bottom:1px solid rgba(14,91,85,.35)}
.gt-property .pdesc a:hover{border-bottom-color:currentColor}
.gt-property .pdesc strong,
.gt-property .pdesc b{font-weight:600}
.gt-property .pdesc em{font-style:italic}
.gt-property .pdesc blockquote{margin:1.4rem 0;padding-left:1.2rem;border-left:2px solid var(--lagoon);color:var(--ink-2)}
.gt-property .pdesc img,
.gt-property .pdesc iframe{margin:1.4rem 0;max-width:100%}
.gt-property .pdesc table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.92rem}
.gt-property .pdesc th,
.gt-property .pdesc td{padding:10px 12px;border:1px solid var(--line);text-align:left}
/* the template gives the first paragraph a display face — only do that when
   the editor actually starts the content with a paragraph */
.gt-property .pdesc > :first-child:not(p){font-family:var(--f-sans)}

/* ---------- Map ---------- */
/* Embedded directly, no click-to-load step. */
.gt-property .pmap{background:var(--sand-2)}
.gt-property .pmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Video / virtual tour embeds ---------- */
.gt-property .pembed{position:relative;aspect-ratio:16/9;background:var(--sand-2);overflow:hidden}
.gt-property .pembed iframe,
.gt-property .pembed video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Enquiry form states ---------- */
.gt-property .form__status.is-ok{color:var(--lagoon)}
.gt-property .form__status.is-error{color:var(--sun)}
.gt-property .acard__form.is-sending{opacity:.6;pointer-events:none}

/* ---------- Empty gallery placeholder ---------- */
.gt-property .pgallery--none{display:grid;place-items:center;height:clamp(240px,28vw,360px);background:var(--sand);color:var(--muted);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}

/* ---------- Gallery lightbox (Fancybox) ---------- */
/* Every photo gets an anchor so Fancybox can build the full slider, but only
   the first few are mosaic tiles — the rest must not take a grid cell. */
.gt-property .pgallery__hidden{display:none}

/* Fancybox appends its container to <body>, outside the scope, so it is styled
   here rather than in the scoped build. These pull it towards the template:
   the same near-black, the display face on the caption, and the sand accent
   used for the active thumbnail. */
.fancybox__container{
  --fancybox-bg:#0b0f11;
  --fancybox-color:#fff;
  --fancybox-hover-color:#d9c9a8;
  --f-button-bg:rgba(255,255,255,.08);
  --f-button-hover-bg:#fff;
  --f-button-hover-color:#12171a;
  --f-button-border-radius:0;
  --f-button-width:46px;
  --f-button-height:46px;
  --f-thumb-gap:8px;
  --f-thumb-width:88px;
  --f-thumb-height:58px;
  --f-thumb-border-radius:0;
  --f-thumb-outline:2px;
  --f-thumb-outline-color:#d9c9a8;
  --f-thumb-opacity:.4;
  --f-thumb-hover-opacity:.8;
  --f-progress-color:#0e5b55;
  font-family:var(--f-sans)
}
.fancybox__caption{
  font-family:var(--f-display);
  font-size:1.05rem;
  letter-spacing:-.01em
}
.fancybox__infobar{
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6)
}
/* The template's reset does not reach here, so the thumbnail strip would
   inherit the theme's list styling. */
.fancybox__thumbs .carousel__slide{list-style:none}

/* ---------- Print ---------- */
@media print{
  .gt-property .cta,
  .gt-property [data-similar]{display:none !important}
}