/* Ish Travel – core blocks styled as the design elements (content pages built in the block editor).
 * Loaded on full-width pages and inside the editor. WordPress's own block styles are not loaded
 * on those pages, so everything a block needs to look right is here. */

/* Paragraph style "Label": the small uppercase label with the red drop. */
p.is-style-ish-label{display:flex; align-items:center; gap:10px; font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0; max-width:none;
  padding:5px 0 7px} /* the design's label is inline, so it takes a full text line (26px) */
p.is-style-ish-label::before,
.is-style-ish-drops li::before{content:""; display:inline-block; flex:none; width:10px; height:14px; background:var(--red);
  clip-path:path("M5 0 C6.6 3.4 10 5.6 10 8.7 A5 5 0 1 1 0 8.7 C0 5.6 3.4 3.4 5 0 Z"); -webkit-clip-path:path("M5 0 C6.6 3.4 10 5.6 10 8.7 A5 5 0 1 1 0 8.7 C0 5.6 3.4 3.4 5 0 Z")}
.head p.is-style-ish-label{max-width:none; font-size:12px; color:var(--muted); padding:0}

/* List style "Drops": red drop bullets. */
ul.is-style-ish-drops{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; font-size:15px}
.is-style-ish-drops li{display:flex; gap:12px; align-items:flex-start}
.is-style-ish-drops li::before{width:.62em; height:.85em; margin-top:6px}

/* Buttons: same as .btn; Red / Outline / Light styles, arrow added after the text. */
.wp-block-buttons{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.wp-block-button__link{display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:14px 22px; font:600 15px/1 var(--sans); text-decoration:none; border:1px solid transparent; cursor:pointer;
  background:var(--red); color:#fff; transition:background .25s, color .25s, border-color .25s}
.wp-block-button__link::after{content:""; width:16px; height:16px; flex:none; background:currentColor; transition:transform .25s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.wp-block-button__link:hover::after{transform:translateX(4px)}
.wp-block-button__link:hover{background:var(--red-deep)}
.is-style-ish-ghost .wp-block-button__link{background:transparent; color:var(--fg); border-color:var(--line)}
.is-style-ish-ghost .wp-block-button__link:hover{background:transparent; border-color:var(--fg)}
.is-style-ish-light .wp-block-button__link{background:#fff; color:#12110F}
.is-style-ish-light .wp-block-button__link:hover{background:var(--coconut)}
.ish-no-arrow .wp-block-button__link::after{display:none}

/* Images keep the design's frames; the caption is the dark pill. */
.wp-block-image{margin:0}
.wp-block-image img{display:block; max-width:100%; height:auto}
.wp-element-caption{margin:0}

/* Two-column text + image rows: label and button spacing as in the design. */
.ti p.is-style-ish-label{color:var(--muted); font-size:12px; margin-top:0}
.ti p.is-style-ish-label + h2 + p{color:var(--fg)}
.ti .wp-block-buttons{margin-top:24px}
.phero p.is-style-ish-label + h1{margin-top:16px}
.head__l .wp-block-heading{margin-top:16px}

/* About page. */
.ab-hero p.is-style-ish-label + h1{margin-top:20px}
.ab-hero__acts{margin-top:32px}
.resp p.is-style-ish-label{color:#C9A46A}
.resp p.is-style-ish-label::before{background:#C9A46A}
.resp .is-style-ish-ghost .wp-block-button__link{border-color:rgba(237,230,218,.3); color:#EDE6DA}
.resp .is-style-ish-ghost .wp-block-button__link:hover{border-color:#C9A46A; color:#C9A46A}
.resp .wp-block-buttons{margin-top:0}
.story figcaption::before{content:""; width:14px; height:14px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat}

/* Progress bars on Responsible travel: class w-0 … w-100 in steps of 5 sets the bar length. */
.prog i.w-0::after{width:0%} .prog i.w-5::after{width:5%} .prog i.w-10::after{width:10%} .prog i.w-15::after{width:15%} .prog i.w-20::after{width:20%} .prog i.w-25::after{width:25%} .prog i.w-30::after{width:30%} .prog i.w-35::after{width:35%} .prog i.w-40::after{width:40%} .prog i.w-45::after{width:45%} .prog i.w-50::after{width:50%} .prog i.w-55::after{width:55%} .prog i.w-60::after{width:60%} .prog i.w-65::after{width:65%} .prog i.w-70::after{width:70%} .prog i.w-75::after{width:75%} .prog i.w-80::after{width:80%} .prog i.w-85::after{width:85%} .prog i.w-90::after{width:90%} .prog i.w-95::after{width:95%} .prog i.w-100::after{width:100%}

/* Section spacing helpers (Advanced → Additional CSS class). */
section.ish-pt-0{padding-top:0}
section.ish-py-sm{padding-block:clamp(50px,6vw,80px)}
section.ish-py-md{padding-block:clamp(60px,7vw,96px)}
.head.ish-mb-28{margin-bottom:28px}

/* Inside the editor: show what scrolls in on the site, and keep sections full width. */
.editor-styles-wrapper .rv{opacity:1; transform:none}
.editor-styles-wrapper{background:var(--bg); color:var(--fg); font:400 16px/1.65 var(--sans)}
.editor-styles-wrapper .subnav{position:static}